Expose min_day_width, header_tag as parameters in schedule include

_includes/schedule.html

@@ -6,13 +6,16 @@
       `data` (site data): site data file containing the requested schedule.
       `interval` (integer): time in minutes between each timeline tick.
       `row_height` (integer): row height in pixels.
+      `min_day_width` (integer): minimum width reserved for each day in pixels.
+      `header_tag` (string): HTML tag for the schedule-header, default: 'h3'.
   {% endcomment %}
 
+  {% assign header_tag = include.header_tag | default: 'h3' %}
   {% assign timeline_first = include.data.timeline | first %}
   {% capture offset %}{% include _minutes.html time=timeline_first %}{% endcapture %}
 {% endcapture %}{% assign schedule_workspace = '' %}
 <div class="schedule">
-  <ul class="schedule-timeline" style="margin-top: {{ include.row_height }}px">
+  <ul class="schedule-timeline" style="margin-top: {{ include.row_height }}px; min-width: {{ include.data.schedule | size | times: include.min_day_width }}px">
     {% for time in include.data.timeline %}
     <li class="schedule-time" style="height: {{ include.row_height }}px">
       {{- time -}}
@@ -21,10 +24,8 @@
   </ul>
   <ul class="schedule-group">
     {% for day in include.data.schedule %}
-    <li class="schedule-day">
-      <h3 class="schedule-header" style="height: {{ include.row_height }}px">
-        {{- day.name -}}
-      </h3>
+    <li class="schedule-day" style="min-width: {{ include.min_day_width }}px">
+      <{{ header_tag }} class="schedule-header" style="height: {{ include.row_height }}px">{{ day.name }}</{{ header_tag }}>
       {% if day.events %}
       <ul class="schedule-events" style="height: {{ include.data.timeline | size | times: include.row_height }}px">
       {% for event in day.events %}
@@ -34,7 +35,7 @@
         {%- assign height = end | minus: start | times: include.row_height | divided_by: include.interval -%}
         <li class="schedule-event {{ event.class }}"
             style="top: {{ top }}px; height: {{ height }}px;">
-          {{- event.name -}}
+          <div class="name">{{ event.name }}</div>
           <div class="time">{{ event.start }}–{{ event.end }}</div>
           <div class="location">{{ event.location }}</div>
         </li>

_sass/custom/schedule.scss

@@ -16,7 +16,6 @@
 
 .schedule-timeline {
   margin-bottom: 0;
-  min-width: $schedule-day-min-width;
   position: absolute;
   width: 100%;
 }
@@ -47,7 +46,6 @@
 .schedule-day {
   border-left: $border $border-color;
   flex: 1 0 0;
-  min-width: $schedule-day-min-width;
   margin: 0;
 
   &:first-of-type {
@@ -70,7 +68,6 @@
 }
 
 .schedule-event {
-  @extend .fw-700;
   background-color: $grey-dk-000;
   border-radius: $border-radius;
   box-shadow: 0 10px 20px rgba(0, 0, 0, .1), inset 0 -3px 0 rgba(0, 0, 0, .2);
@@ -82,8 +79,13 @@
   position: absolute;
   width: 100%;
 
-  div {
-    @extend .fs-2, .fw-700;
+  .name {
+    @extend .fw-700;
+  }
+
+  .time,
+  .location {
+    @extend .fs-2;
   }
 
   &.lecture {

_sass/custom/variables.scss

@@ -21,5 +21,4 @@ $media-queries: (
 // Components
 $box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
 $module-date-color: $link-color;
-$schedule-day-min-width: 9rem;
 $staffer-image-size: 80px;

schedule.md

@@ -13,8 +13,8 @@ Multiple schedules can be rendered on a page, each with their own events and hou
 
 ## Weekly Schedule
 
-{% include schedule.html data=site.data.schedule.weekly interval=30 row_height=40 %}
+{% include schedule.html data=site.data.schedule.weekly interval=30 row_height=40 min_day_width=125 %}
 
 ## Office Hours Schedule
 
-{% include schedule.html data=site.data.schedule.office-hours interval=30 row_height=40 %}
+{% include schedule.html data=site.data.schedule.office-hours interval=30 row_height=40 min_day_width=125 %}