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;
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 */
}
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);
`;
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.