Days Grayed Out
This commit is contained in:
@@ -58,7 +58,7 @@ export default function BasicDateCalendar(p) {
|
||||
backgroundColor: getBackMonthColor(index) ? "#346991":"rgba(0,0,0,0)",
|
||||
color : getBackMonthColor(index) ? "white":"black",
|
||||
borderRadius : 10
|
||||
}}>{getMonthName(index)}</p>
|
||||
}}>{getMonthName(index) + " " + new Date(parseInt(startParts[2]), parseInt(startParts[1]) + index - 1, 1).getFullYear()}</p>
|
||||
<div className={"Days"} style={{
|
||||
pointerEvents: "none"
|
||||
}}>
|
||||
|
||||
@@ -12,14 +12,18 @@ let cellHeight = 20;
|
||||
let colors = ["#f80000", "#414141"]
|
||||
|
||||
let semesterStart;
|
||||
let semesterEnd;
|
||||
let currentWeekStartDay;
|
||||
let currentYear;
|
||||
let semesterStartYear;
|
||||
let semesterEndYear;
|
||||
let selectedElement;
|
||||
let grabbedDown;
|
||||
|
||||
let isDayOkay = [true, true, true, true, true, true]
|
||||
|
||||
let errorState = ErrorType.Okay
|
||||
let grayedOut = [false, false, false, false, false, false]
|
||||
|
||||
export default function CalenderView(p) {
|
||||
|
||||
@@ -27,15 +31,14 @@ export default function CalenderView(p) {
|
||||
const [update, setUpdate] = useState(false)
|
||||
const scrollRef = useRef(null);
|
||||
|
||||
const[startDayCalenderSideBar, setStartDayCalenderSideBar] = useState(0)
|
||||
const[startYearCalenderSideBar, setStartYearCalenderSideBar] = useState(2000)
|
||||
const[endDayCalenderSideBar, setEndDayCalenderSideBar] = useState(0)
|
||||
const[endYearCalenderSideBar, setEndYearCalenderSideBar] = useState(2000)
|
||||
const [startDayCalenderSideBar, setStartDayCalenderSideBar] = useState(0)
|
||||
const [startYearCalenderSideBar, setStartYearCalenderSideBar] = useState(2000)
|
||||
const [endDayCalenderSideBar, setEndDayCalenderSideBar] = useState(0)
|
||||
const [endYearCalenderSideBar, setEndYearCalenderSideBar] = useState(2000)
|
||||
const [highlightMonth, setHighlightMonth] = useState(0)
|
||||
const [highlightYear, setHighlightYear] = useState(2000)
|
||||
|
||||
|
||||
|
||||
function readEntries() {
|
||||
let url = baseURL + "/entries?semesterid=" + localStorage.getItem("currentsid") +
|
||||
"&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid");
|
||||
@@ -93,6 +96,13 @@ export default function CalenderView(p) {
|
||||
}
|
||||
}
|
||||
|
||||
let j = 0;
|
||||
for(let i = Math.round(((new Date(currentYear, 0, currentWeekStartDay) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))); i <= Math.round(((new Date(currentYear, 0, currentWeekStartDay + 5) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))); i++)
|
||||
{
|
||||
grayedOut[j] = i % Math.round(((new Date(currentYear, 11, 31) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))) < semesterStart && semesterEnd && new Date(currentYear, 0, currentWeekStartDay + j).getFullYear() == semesterStartYear || i % Math.round(((new Date(currentYear, 11, 31) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))) > semesterEnd && new Date(currentYear, 0, currentWeekStartDay + j).getFullYear() == semesterEndYear
|
||||
j++
|
||||
}
|
||||
|
||||
setEntries(en)
|
||||
})
|
||||
} catch (e) {
|
||||
@@ -248,9 +258,11 @@ export default function CalenderView(p) {
|
||||
if (!currentId.includes("grab")) {
|
||||
if (!checkForElementAtRow(row + 2, currentColumnID)) {
|
||||
if ((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18) {
|
||||
if(!grayedOut[currentColumnID]) {
|
||||
pushEntry(currentColumnID, row)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
|
||||
if (currentUserID == getElementInColumn(parentID, currentColumnID).usercreatedbyid) {
|
||||
@@ -313,6 +325,9 @@ export default function CalenderView(p) {
|
||||
|
||||
useEffect(() => {
|
||||
semesterStart = 0;
|
||||
semesterEnd = 0;
|
||||
semesterStartYear = 0;
|
||||
semesterEndYear = 0;
|
||||
currentWeekStartDay = 0;
|
||||
currentYear = 2000;
|
||||
selectedElement = null;
|
||||
@@ -333,6 +348,9 @@ export default function CalenderView(p) {
|
||||
setHighlightYear(currentYear)
|
||||
|
||||
semesterStart = s.startday;
|
||||
semesterEnd = s.endday;
|
||||
semesterStartYear = s.startyear;
|
||||
semesterEndYear = s.endyear;
|
||||
setStartDayCalenderSideBar(semesterStart)
|
||||
setEndDayCalenderSideBar(s.endday)
|
||||
}).then(readEntries)
|
||||
@@ -379,8 +397,7 @@ export default function CalenderView(p) {
|
||||
temp.push(i);
|
||||
}
|
||||
|
||||
function onMonthClick(monthIndex, startParts)
|
||||
{
|
||||
function onMonthClick(monthIndex, startParts) {
|
||||
monthIndex--
|
||||
let date = new Date(parseInt(startParts[2]), monthIndex, 1)
|
||||
let start = new Date(date.getFullYear(), 0, 0)
|
||||
@@ -401,7 +418,10 @@ export default function CalenderView(p) {
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<div>
|
||||
<BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar} endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar} highlightYear={highlightYear} highlightMonth={highlightMonth} onMonthClick={onMonthClick}/>
|
||||
<BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar}
|
||||
endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar}
|
||||
highlightYear={highlightYear} highlightMonth={highlightMonth}
|
||||
onMonthClick={onMonthClick}/>
|
||||
</div>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
@@ -449,7 +469,7 @@ export default function CalenderView(p) {
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[0] ? "#aaaaaa" : "#ffffff"}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
@@ -475,7 +495,7 @@ export default function CalenderView(p) {
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[1] ? "#aaaaaa" : "#ffffff"}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
@@ -502,7 +522,7 @@ export default function CalenderView(p) {
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[2] ? "#aaaaaa" : "#ffffff"}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
@@ -530,7 +550,7 @@ export default function CalenderView(p) {
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[3] ? "#aaaaaa" : "#ffffff"}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
@@ -557,7 +577,7 @@ export default function CalenderView(p) {
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[4] ? "#aaaaaa" : "#ffffff"}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
@@ -584,7 +604,7 @@ export default function CalenderView(p) {
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[5] ? "#aaaaaa" : "#ffffff"}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user