- // 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