init schedule grid

layout.html

@@ -290,9 +290,21 @@
 				<p id="current_week_indicator"></p>
 				<button id="next_week_button">&gt;</button>
 			</section>
-			<section id="schedules_grid">
+			<table id="schedules_grid">
 				
-			</section>
+			</table>
+		</template>
+		<template id="schedule_header_row_template">
+			<th>
+				<td>&nbsp;</td>
+				<td id="header_1"></td>
+				<td id="header_2"></td>
+				<td id="header_3"></td>
+				<td id="header_4"></td>
+				<td id="header_5"></td>
+				<td id="header_6"></td>
+				<td id="header_0"></td>
+			</th>
 		</template>
 		<script>
 			const init_library = () => {
@@ -623,6 +635,41 @@
 						current_day.setDate(current_day.getDate() + 1);
 					}
 				}
+
+				first_day_of_week = first_day_of_week || first_day_of_schedule;
+
+				current_day = first_day_of_week;
+
+				for (let i = 0; i < 8; i++) {
+					if (i === 0) {
+						// first column of schedule, set up the grid
+						const current_week_indicator = document.querySelector("#current_week_indicator");
+						current_week_indicator.innerHTML = `Schedule for the week beginning <strong>${first_day_of_week.toDateString()}</strong>`;
+						// set up previous/next buttons
+						document.querySelector('#previous_week_button').addEventListener("click", previous_week_schedule);
+						document.querySelector('#next_week_button').addEventListener("click", next_week_schedule);
+						// init grid structure itself
+						const grid = document.querySelector("#schedule_grid");
+						const template = document.querySelector("#schedules_template");
+						const template_clone = template.content.cloneNode(true);
+						grid.appendChild(template_clone);	
+					}
+					// put date at top of appropriate column of the grid
+					const header_selector = "#header_" + i;
+					const header_cell = document.querySelector(header_selector);
+					header_cell.innerHTML = current_day.toDateString();
+					current_day.setDate(current_day.getDate() + 1);_
+				}
+			}
+
+			const previous_week_schedule = (e) => {
+				e.preventDefault();
+
+			}
+
+			const next_week_schedule = (e) => {
+				e.preventDefault();
+				
 			}
 
 			const tag_editor_handlers = () => {