Calender Resize
Der Kalender kann mittels eines "+" und "-" buttons vergrößert und verkleinert werden. D.h. Zeilen werden enger zusammengerückt oder auseinander gezogen
This commit is contained in:
brausjonas
@@ -19,15 +19,17 @@ export default function Button(p) {
|
||||
let onClick = p.onClick;
|
||||
let color = p.color;
|
||||
let fontColor = p.fontColor;
|
||||
let font_size = p.fontSize;
|
||||
|
||||
//if parameters are not set, they are set to default values
|
||||
if (height == null) height = 50;
|
||||
if (width == null) width = 100;
|
||||
if (height == null) height = 0;
|
||||
if (width == null) width = 0;
|
||||
if (iconWidth == null) iconWidth = width-10;
|
||||
if (iconHeight == null) iconHeight = height-10;
|
||||
if (onClick == null) onClick = () => {};
|
||||
if (color == null) color = "#363636";
|
||||
if (fontColor == null) fontColor = "white";
|
||||
if (font_size == null) font_size = 16;
|
||||
|
||||
//build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
|
||||
if (iconHTML != null) {
|
||||
@@ -48,7 +50,10 @@ export default function Button(p) {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: color,
|
||||
color: fontColor
|
||||
color: fontColor,
|
||||
fontSize: font_size,
|
||||
minWidth: width,
|
||||
minHeight: height
|
||||
}}
|
||||
onClick={onClick}>
|
||||
{text}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import {CalenderEntry} from "@/components/CalenderEntry";
|
||||
import Button from "@/components/Button";
|
||||
|
||||
let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
|
||||
let grabbed = null;
|
||||
@@ -11,7 +12,7 @@ let selectedOffsetTop = 0;
|
||||
let selectedOffsetBottom = 0;
|
||||
let selectedListID = "";
|
||||
|
||||
const cellHeight = 25;
|
||||
let cellHeight = 25;
|
||||
|
||||
export default function CalenderView(p) {
|
||||
const [t, setT] = useState(false)
|
||||
@@ -188,162 +189,202 @@ export default function CalenderView(p) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
|
||||
<div style={{backgroundColor: "#363636"}}>
|
||||
<div className={"wochen-tag-container"}>
|
||||
<div className={"wochen-tag font-big"}>Montag</div>
|
||||
<div className={"wochen-tag font-big"}>Dienstag</div>
|
||||
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
||||
<div className={"wochen-tag font-big"}>Donnerstag</div>
|
||||
<div className={"wochen-tag font-big"}>Freitag</div>
|
||||
<div className={"wochen-tag font-big"}>Samstag</div>
|
||||
<div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "start"}}>
|
||||
<Button text={"-"} fontSize={25} onClick={() => {if(cellHeight - 5 >= 10) cellHeight -= 5; setT(!t);}} width={50} height={50}/>
|
||||
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
|
||||
<div style={{backgroundColor: "#363636"}}>
|
||||
<div className={"wochen-tag-container"}>
|
||||
<div className={"wochen-tag font-big"}>Montag</div>
|
||||
<div className={"wochen-tag font-big"}>Dienstag</div>
|
||||
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
||||
<div className={"wochen-tag font-big"}>Donnerstag</div>
|
||||
<div className={"wochen-tag font-big"}>Freitag</div>
|
||||
<div className={"wochen-tag font-big"}>Samstag</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"calender-container"}>
|
||||
|
||||
<div className={"calender-view content"} style={{height: cellHeight * 96}}>
|
||||
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"mo"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["mo"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
gridColumnStart: 0,
|
||||
gridColumnEnd: 0,
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"tu"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
{entries["tu"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"we"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["we"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"th"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
{entries["th"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"fr"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["fr"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"sa"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["sa"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
||||
{temp.map(i => (<div style={{
|
||||
width: "100%",
|
||||
height: cellHeight * 2,
|
||||
borderBottom: "1px solid #363636",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
}} className={"no-pointer-events"}>
|
||||
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight -3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight -3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight -3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight -3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight -3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight -3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className={"calender-container"}>
|
||||
|
||||
<div className={"calender-view content"}>
|
||||
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"mo"}>
|
||||
|
||||
|
||||
{entries["mo"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
gridColumnStart: 0,
|
||||
gridColumnEnd: 0
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"tu"}>
|
||||
|
||||
{entries["tu"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"we"}>
|
||||
|
||||
|
||||
{entries["we"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"th"}>
|
||||
|
||||
{entries["th"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"fr"}>
|
||||
|
||||
|
||||
{entries["fr"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"sa"}>
|
||||
|
||||
|
||||
{entries["sa"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
||||
{temp.map(i => (<div style={{
|
||||
width: "100%",
|
||||
height: cellHeight * 2,
|
||||
borderBottom: "1px solid #363636",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
}} className={"no-pointer-events"}>
|
||||
|
||||
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
|
||||
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
|
||||
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
|
||||
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
|
||||
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
|
||||
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<Button text={"+"} fontSize={25} onClick={() => {cellHeight += 5; setT(!t)}} width={50} height={50}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -255,7 +255,6 @@ Calender View
|
||||
display: grid;
|
||||
padding: 0 3px;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: repeat(96, 25px);
|
||||
}
|
||||
|
||||
.wochen-tag-container .wochen-tag
|
||||
|
||||
Reference in New Issue
Block a user