From: Art Cancro <ajc@citadel.org>
Date: Mon, 3 Jun 2024 03:53:08 +0000 (-0400)
Subject: Getting navigation in place for week view.
X-Git-Url: https://code.citadel.org/explore?a=commitdiff_plain;h=HEAD;p=citadel.git

Getting navigation in place for week view.

Week View is actually also Day View, because it's using a flexbox and
can display a arbitrary number of day columns.  So we will use 1 column
for day view, 5 columns for work week view, and 7 columns for week view.
---

diff --git a/webcit-ng/static/js/view_calendar.js b/webcit-ng/static/js/view_calendar.js
index 7c48178f9..75d2e3a2d 100644
--- a/webcit-ng/static/js/view_calendar.js
+++ b/webcit-ng/static/js/view_calendar.js
@@ -57,34 +57,35 @@ function XXXXXview_render_calendar() {
 }
 
 var date_being_displayed;
-var calendar_initialized = 0;
 var days_being_displayed = 7;		/* 1 = day view; 5 = work week view; 7 = week view */
+var start_of_week = 0;			/* 0 = Sunday; 1 = Monday */
 
 // Update the calendar display (we might have changed dates, or added/removed data)
 function update_calendar_display() {
 
-	// Get y-m-d to display
-	let day_of_month = date_being_displayed.getDate();
-	let month = date_being_displayed.getMonth() + 1;
-	let year = date_being_displayed.getFullYear();
+	let this_column_date = date_being_displayed;
 
-	let caldisplay = `<div class="ctdl-calendar-week">`;
-
-	caldisplay += `<div class="ctdl-calendar-ruler">`;
-	for (let i=0; i<24; ++i) {
-		caldisplay += i + "<br>";
-	};
-	caldisplay += `</div>`;
+	// If displaying a whole week, start the week on the correct day.
+	if (days_being_displayed == 7) {
+		while (this_column_date.getDay() != start_of_week) {
+			this_column_date.setDate(this_column_date.getDate() - 1);
+		}
+	}
 
+	// Go through every day on the screen (up to a week I guess)
 	for (let i=0; i<days_being_displayed; ++i) {
-		caldisplay += `<div id="ctdl-cal-day` + i + `" class="ctdl-calendar-day">Hi!</div>`;
+		// Get y-m-d to display
+		let day_of_month = this_column_date.getDate();
+		let month = this_column_date.getMonth() + 1;
+		let year = this_column_date.getFullYear();
+	
+		// Populate the columns
+		var weekday = this_column_date.toLocaleString("default", { weekday: "short" })
+		document.getElementById("ctdl-cal-day" + i).innerHTML = weekday + " " + year + "-" + month + "-" + day_of_month;
+
+		// Get ready for the next column
+		this_column_date.setDate(this_column_date.getDate() + 1);
 	}
-	caldisplay += "</div>";
-	document.getElementById("ctdl-main").innerHTML = caldisplay;
-
-	// Populate the columns
-	document.getElementById("ctdl-cal-day0").innerHTML = year + "-" + month + "-" + day_of_month;
-
 }
 
 
@@ -104,7 +105,7 @@ function go_back_one_month() {
 
 // Go back by one week.
 function go_back_one_week() {
-	date_being_displayed.setDate(date_being_displayed.getDate() - 7 );
+	date_being_displayed.setDate(date_being_displayed.getDate() - 8 );		// why 8 instead of 7?
 	update_calendar_display();
 }
 
@@ -132,7 +133,7 @@ function go_forward_one_day() {
 
 // Advance the calendar by one week.
 function go_forward_one_week() {
-	date_being_displayed.setDate(date_being_displayed.getDate() + 7);
+	date_being_displayed.setDate(date_being_displayed.getDate() + 6);		// why 6 instead of 7?
 	update_calendar_display();
 }
 
@@ -167,9 +168,22 @@ function view_render_calendar() {
 	;
 	document.getElementById("ctdl-calendar-nav").style.display = "block";
 
-	// Calendar will persist the year/month/day where the user left it,
-	// but if it's rendering for the first time, set it to "today".
-	if (!calendar_initialized) {
-		go_to_today();
+
+	let caldisplay = `
+		<div class="ctdl-calendar-week">
+		<div class="ctdl-calendar-ruler">
+	`;
+	for (let i=0; i<24; ++i) {
+		caldisplay += i + "<br>";
+	};
+	caldisplay += `</div>`;
+
+	for (let i=0; i<days_being_displayed; ++i) {
+		caldisplay += `<div id="ctdl-cal-day` + i + `" class="ctdl-calendar-day">Hi!</div>`;
 	}
+	caldisplay += "</div>";
+	document.getElementById("ctdl-main").innerHTML = caldisplay;
+
+	// Start on today.
+	go_to_today();
 }