Minimally functional schedule rendering

Add timetable and event listing based on transforming a simple input
data structure.

ui/timetable.module.css

@@ -0,0 +1,42 @@
+.timetable {
+	overflow-x: auto;
+}
+
+.timetable table {
+	border-spacing: 0;
+	table-layout: fixed;
+	width: 100%;
+	font-size: 0.8rem;
+	--row-header-width: 6rem;
+	--cell-size: 3rem;
+}
+
+.timetable col {
+	width: calc(var(--cell-size) * var(--minutes, 60) / 60);
+}
+
+.timetable col.header {
+	width: var(--row-header-width);
+}
+
+.timetable th:first-child {
+	background-color: var(--background);
+	position: sticky;
+	left: 0;
+}
+
+.timetable :is(td, th) {
+	padding: 0.1rem;
+	border-top: 1px solid var(--foreground);
+	border-right: 1px solid var(--foreground);
+}
+.timetable tr th:first-child {
+	border-left: 1px solid var(--foreground);
+}
+.timetable tbody tr:last-child :is(td, th) {
+	border-bottom: 1px solid var(--foreground);
+}
+
+.break {
+	background-color: rgb(78, 78, 143);
+}