schedule.html

{% capture schedule_workspace %}
  {% comment %}
    Return the HTML for the schedule corresponding to the given data.

    Parameters:
      `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; 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 -}}
    </li>
    {% endfor %}
  </ul>
  <ul class="schedule-group">
    {% for day in include.data.schedule %}
    <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 %}
        {%- capture start -%}{% include _minutes.html time=event.start %}{%- endcapture -%}
        {%- capture end -%}{% include _minutes.html time=event.end %}{%- endcapture -%}
        {%- assign top = start | minus: offset | times: include.row_height | divided_by: include.interval -%}
        {%- 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;">
          <div class="name">{{ event.name }}</div>
          <div class="time">{{ event.start }}–{{ event.end }}</div>
          <div class="location">{{ event.location }}</div>
        </li>
      {% endfor %}
      </ul>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>