Now there are labels at the top. Ho-ho-ho.

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index c9f6f4d5fd2aaefc45d44fcbd07270bdf1da09e5..06ef01033a7ce0f480cc9632771cfe40d42b238a 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -697,6 +697,29 @@ blockquote pre {
        color: White;
 }
 
+.ctdl-calendar-container {                     /* Flexbox container for calendars; child elements are headings and content */
+       display: flex;
+       flex-direction: column;
+       flex-wrap: nowrap;
+       justify-content: space-between;
+       align-items: center;
+       margin: 0;
+       width: 100%;
+       height: 100%;
+       overflow: hidden;
+}
+
+.ctdl-calendar-toplabels {                     /* days and numbers of the week, up top */
+       height: 5%;
+       width: 100%;
+}
+
+.ctdl-calendar-content {                       /* days and numbers of the week, up top */
+       flex-grow: 0;
+       height: 95%;
+       width: 100%;
+}
+
 .ctdl-calendar-week {                          /* Flexbox container for day, 3-day, 5-day, week view */
        display: flex;
        flex-direction: row;
@@ -714,10 +737,19 @@ blockquote pre {
        border: 1px solid GhostWhite;
 }
 
+.ctdl-calendar-label {                         /* Flexbox child for LABEL of one day of the week */
+       flex-grow: 0;                           /* Keep all columns the same size */
+       width: 100%;                            /* Fill the width of the main pane; don't compress them into narrow boxes */
+       justify-content: center;
+       align-items: center;
+       text-align: center;
+       font-weight: bold;
+}
+
 .ctdl-calendar-day {                           /* Flexbox child for one day of the week */
        flex-grow: 0;                           /* Keep all columns the same size */
        background-color: White;
-       border: 1px solid GhostWhite;
+       border: 1px solid SlateGrey;
        height: 100%;                           /* Occupy the entire height of the main pane */
        width: 100%;                            /* Fill the width of the main pane; don't compress them into narrow boxes */
 }

diff --git a/webcit-ng/static/js/view_calendar.js b/webcit-ng/static/js/view_calendar.js
index aa5d85187c2b990f85f0beb5fcafa737318a04af..76de28902e36dead5766c19586cc9bc20bc75a32 100644 (file)
--- a/webcit-ng/static/js/view_calendar.js
+++ b/webcit-ng/static/js/view_calendar.js
@@ -88,7 +88,9 @@ function update_calendar_display() {
                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;
+               let monthname = this_column_date.toLocaleString("default", { month: "short" })
+               document.getElementById("ctdl-cal-label" + i).innerHTML = weekday + " " + year + "-" + monthname + "-" + day_of_month;
+               document.getElementById("ctdl-cal-day" + i).innerHTML = "This is the content for " + this_column_date;
 
                // Get ready for the next column
                this_column_date.setDate(this_column_date.getDate() + 1);
@@ -189,20 +191,35 @@ function view_render_calendar() {
        `;
        document.getElementById("ctdl-calendar-nav").style.display = "block";
 
-       // This will be the hours ruler on the left side of the screen.
-       let caldisplay = `
-               <div class="ctdl-calendar-week">
-               <div class="ctdl-calendar-ruler">
-       `;
+       let caldisplay = "";
+       caldisplay += `<div class="ctdl-calendar-container">`;          // top level container
+       caldisplay += `<div class="ctdl-calendar-toplabels">`;          // the row of labels above the calendar content
+
+       // This section renders the day labels at the top of the screen
+       caldisplay += `<div class="ctdl-calendar-week">`;               // container for ruler+days
+       caldisplay += `<div class="ctdl-calendar-ruler">`;              // the hours ruler on the left side of the screen
+       caldisplay += "</div>";                                         // closes ctdl-calendar-ruler
+       for (let i=0; i<days_being_displayed; ++i) {
+               caldisplay += `<div id="ctdl-cal-label` + i + `" class="ctdl-calendar-label">Hi!</div>`;
+       }
+       caldisplay += "</div>";                                         // closes ctdl-calendar-week
+
+       caldisplay += `</div>`;                                         // closes ctdl-calendar-toplabels
+       caldisplay += `<div class="ctdl-calendar-content">`;            // the actual boxes of content below the labels
+       caldisplay += `<div class="ctdl-calendar-week">`;               // container for ruler+days
+       caldisplay += `<div class="ctdl-calendar-ruler">`;              // the hours ruler on the left side of the screen
        for (let i=0; i<24; ++i) {
                caldisplay += i + "<br>";
        };
-       caldisplay += `</div>`;
+       caldisplay += `</div>`;                                         // closes ctdl-calendar-ruler
 
+       // This section renders the day boxes.
        for (let i=0; i<days_being_displayed; ++i) {
                caldisplay += `<div id="ctdl-cal-day` + i + `" class="ctdl-calendar-day">Hi!</div>`;
        }
-       caldisplay += "</div>";
+       caldisplay += "</div>";                                         // closes ctdl-calendar-week
+       caldisplay += "</div>";                                         // closes ctdl-calendar-content
+       caldisplay += "</div>";                                         // closes ctdl-calendar-container
        document.getElementById("ctdl-main").innerHTML = caldisplay;
 
        // Start on today.