Finally got the calendar navigation logic correct.

Something about the javascript date object makes instances of it
persist even when it goes out of scope and is reinitialized in the
next call.  I had to try a bunch of different methods before I found
one that went out of scope correctly.

But now it's working properly.  All of the temporary nav buttons
←Y | ←M | ←W | ←D | today | D→ | W→ | M→ | Y→
are doing what they are expected to do.

Next steps will be to pretty up the view and then populate it with
calendar data.

diff --git a/webcit-ng/static/js/view_calendar.js b/webcit-ng/static/js/view_calendar.js
index 75d2e3a2dfb3ca447a6c37ad762f80a85effbf8b..5ab310377cb4b205d817f72b8cfb8873fb1b1f38 100644 (file)
--- a/webcit-ng/static/js/view_calendar.js
+++ b/webcit-ng/static/js/view_calendar.js
@@ -56,31 +56,38 @@ function XXXXXview_render_calendar() {
        });
 }
 
-var date_being_displayed;
-var days_being_displayed = 7;          /* 1 = day view; 5 = work week view; 7 = week view */
-var start_of_week = 0;                 /* 0 = Sunday; 1 = Monday */
+date_being_displayed = new Date();
+days_being_displayed = 7;              /* 1 = day view; 5 = work week view; 7 = week view */
+start_of_week = 1;                     /* 0 = Sunday; 1 = Monday */
 
 // Update the calendar display (we might have changed dates, or added/removed data)
 function update_calendar_display() {
 
-       let this_column_date = date_being_displayed;
+       // Clone the "date_being_displayed" and scope it locally for this function.
+       let this_column_date = new Date(date_being_displayed);
 
-       // If displaying a whole week, start the week on the correct day.
+       // If displaying a whole week, start the week on the correct day of the week (usually Sunday or Monday)
        if (days_being_displayed == 7) {
                while (this_column_date.getDay() != start_of_week) {
                        this_column_date.setDate(this_column_date.getDate() - 1);
                }
        }
 
+       // If displaying a work week, start the week on Monday
+       if (days_being_displayed == 5) {
+               while (this_column_date.getDay() != 1) {
+                       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) {
-               // 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" })
+               let year = this_column_date.getFullYear();
+               let month = this_column_date.getMonth() + 1;
+               let day_of_month = this_column_date.getDate();
+               let 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
@@ -105,7 +112,7 @@ function go_back_one_month() {
 
 // Go back by one week.
 function go_back_one_week() {
-       date_being_displayed.setDate(date_being_displayed.getDate() - 8 );              // why 8 instead of 7?
+       date_being_displayed.setDate(date_being_displayed.getDate() - 7 );
        update_calendar_display();
 }
 
@@ -133,7 +140,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() + 6);               // why 6 instead of 7?
+       date_being_displayed.setDate(date_being_displayed.getDate() + 7);
        update_calendar_display();
 }