Calendar Figma Code Connected

While you will most likely use third party or custom calendar libraries for a full calendar view, Honeycomb provides a set of classes and layouts to apply to your calendar for a consistent look.

Default month view

The standard full month view should be used for a full-page calendar showing an entire month’s events or activities for a user.

Create a wrapper element with classes .hc-calendar .hc-calendar--month, and then reference the below controls, weekday headings, and day/event markup.

November 2024

Weekends

Sun

Mon

Tue

Wed

Thu

Fri

Sat

12pm Planning Meeting that wraps and goes longer

12pm Short event

HTML

Expand Edit in Playground Copy


<div id="hcm" class="hc-calendar hc-calendar--month hc-calendar--no-weekends" style="height: 600px;">
  <div class="hc-calendar-controls">
    <h2 class="hc-calendar-title">November <span class="hc-text--secondary">2024</span></h2>
    <div class="hc-calendar-actions">
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" class="hc-checkbox" name="hcw-weekends" onchange="document.getElementById('hcm').classList.toggle('hc-calendar--no-weekends');" />
        <span class="hc-label">
          <span class="hc-label-text">Weekends</span>
        </span>
      </label>
      <div class="hc-button-segment">
        <button type="button" class="hc-button hc-button--primary hc-button--icon" aria-label="Previous month">
          <i class="hc-icon hc-icon--chevron-left hc-icon--20"></i>
        </button>
        <button type="button" class="hc-button hc-button--primary">
          Today
        </button>
        <button type="button" class="hc-button hc-button--primary hc-button--icon" aria-label="Next week">
          <i class="hc-icon hc-icon--chevron-right hc-icon--20"></i>
        </button>
      </div>
      <select id="calendar-view" class="hc-select">
        <option value="day">Day</option>
        <option value="week">Week</option>
        <option value="month" selected>Month</option>
      </select>
      <button type="button" class="hc-button hc-button--primary hc-button--brand">Add activity</button>
    </div>
  </div>
  <div class="hc-calendar-grid">
    <div class="hc-calendar-weekdays">
      <div class="hc-calendar-weekdays-item hc-is--weekend">
        <time datetime="2024-11-10">Sun</time>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-11">Mon</time>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-12">Tue</time>
      </div>
      <div class="hc-calendar-weekdays-item hc-is--active">
        <time datetime="2024-11-13">Wed</time>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-14">Thu</time>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-15">Fri</time>
      </div>
      <div class="hc-calendar-weekdays-item hc-is--weekend">
        <time datetime="2024-11-16">Sat</time>
      </div>
    </div>
    <div class="hc-calendar-events">
      <div class="hc-calendar-events-day hc-calendar-events-day--off hc-is--weekend">
        <time datetime="20241027T00:00">27</time>
      </div>
      <div class="hc-calendar-events-day hc-calendar-events-day--off">
        <time datetime="20241028T00:00">28</time>
      </div>
      <div class="hc-calendar-events-day hc-calendar-events-day--off">
        <time datetime="20241029T00:00">29</time>
      </div>
      <div class="hc-calendar-events-day hc-calendar-events-day--off">
        <time datetime="20241030T00:00">30</time>
      </div>
      <div class="hc-calendar-events-day hc-calendar-events-day--off">
        <time datetime="20241031T00:00">31</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241101T00:00">1</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241102T00:00">2</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241103T00:00">3</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241104T00:00">4</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241105T00:00">5</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241106T00:00">6</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241107T00:00">7</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241108T00:00">8</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241109T00:00">9</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241110T00:00">10</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241111T00:00">11</time>
        <div class="hc-calendar-event" data-hc-event-start="12:00" data-hc-event-duration="30">
          <span class="hc-indicator hc-indicator--primary hc-indicator--sm"></span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T12:00">12pm</time>
          <span class="hc-calendar-event-title">Planning Meeting that wraps and goes longer</span>
        </div>
        <div class="hc-calendar-event" data-hc-event-start="2:00" data-hc-event-duration="60">
          <span class="hc-indicator hc-indicator--boost hc-indicator--sm"></span>
          <time class="hc-calendar-event-time" datetime="2024-11-14T11:00">12pm</time>
          <span class="hc-calendar-event-title">Short event</span>
        </div>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241112T00:00">12</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241113T00:00">13</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241114T00:00">14</time>
      </div>
      <div class="hc-calendar-events-day hc-is--active">
        <time datetime="20241115T00:00">15</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241116T00:00">16</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241117T00:00">17</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241118T00:00">18</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241119T00:00">19</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241120T00:00">20</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241121T00:00">21</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241122T00:00">22</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241123T00:00">23</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241124">24</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241125T00:00">25</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241126T00:00">26</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241127T00:00">27</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241128T00:00">28</time>
      </div>
      <div class="hc-calendar-events-day">
        <time datetime="20241129T00:00">29</time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend">
        <time datetime="20241130T00:00">30</time>
      </div>
    </div>
  </div>
</div>

Creating days

Each day of the month (and preceding or following months, if necessary) should appear in order inside of the .hc-calendar-events element. There’s no need to use a table or group them by week, the CSS automatically handles positioning and weekend display.

Day elements should have the class .hc-calendar-events-day and their first child should always be a <time> element that holds the day.

Apply class .hc-calendar-events-day--off for previous or following month days. Apply class .hc-is--weekend for any weekend days to support weekend handling, and .hc-is--active for the current day.

Adding events to a day

To add an event on a specific day, add successive .hc-calendar-event elements that contain an Indicator (if desired), a <time>, and then a label.


<div class="hc-calendar-events-day">
  <time datetime="20241114T00:00">11</time>
  <div class="hc-calendar-event" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator hc-indicator--primary hc-indicator--sm"></span>
    <time class="hc-calendar-event-time" datetime="2024-11-14T12:00">12pm</time>
    <span class="hc-calendar-event-title">Planning Meeting that wraps and goes longer</span>
  </div>
</div>

Week view

Week view shows events with more detail. Simply append .hc-calendar--week and .hc-calendar--time to the primary calendar element and review the HTML below for structure and classes. We have this split out with a separate -time modifier because day and week share so many styles.

The default week will not add half hours in to the grid, but to add that simply append .hc-has--half-hours to the hc-calendar-events-hours element.

You can also append class .hc-calendar--no-weekends to the primary calendar element to turn off Saturday and Sunday everywhere.

November 2024

Weekends ½ hours

Sun 10

Mon 11

Tue 12

Wed 13

Thu 14

Fri 15

Sat 16

12am 1am 2am 3am 4am 5am 6am 7am 8am 9am 10am 11am 12pm 1pm 2pm 3pm 4pm 5pm 6pm 7pm 8pm 9pm 10pm 11pm

Curriculum weekly team meeting 11:15am

Curriculum debrief 12:45am

Team standup 6:30am

Planning Meeting that wraps and goes longer 12pm

Planning Meeting 1pm

Sibling event 12:30pm

Another sibling 1pm

HTML

Expand Edit in Playground Copy


<div id="hcw" class="hc-calendar hc-calendar--week hc-calendar--time hc-calendar--no-weekends" style="height: 600px;">
  <div class="hc-calendar-controls">
    <h2 class="hc-calendar-title">November <span class="hc-text--secondary">2024</span></h2>
    <div class="hc-calendar-actions">
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" class="hc-checkbox" name="hcw-weekends" onchange="document.getElementById('hcw').classList.toggle('hc-calendar--no-weekends');" />
        <span class="hc-label">
          <span class="hc-label-text">Weekends</span>
        </span>
      </label>
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" class="hc-checkbox" name="hcw-weekends" checked="checked" onchange="document.getElementById('hcw-hce').classList.toggle('hc-has--half-hours');" />
        <span class="hc-label">
          <span class="hc-label-text">½ hours</span>
        </span>
      </label>
      <div class="hc-button-segment">
        <button type="button" class="hc-button hc-button--primary hc-button--icon" aria-label="Previous week">
          <i class="hc-icon hc-icon--chevron-left hc-icon--20"></i>
        </button>
        <button type="button" class="hc-button hc-button--primary">
          Today
        </button>
        <button type="button" class="hc-button hc-button--primary hc-button--icon" aria-label="Next week">
          <i class="hc-icon hc-icon--chevron-right hc-icon--20"></i>
        </button>
      </div>
      <select id="calendar-view" class="hc-select">
        <option value="day">Day</option>
        <option value="week" selected>Week</option>
        <option value="month">Month</option>
      </select>
    </div>
  </div>
  <div class="hc-calendar-grid" id="hcw-scroll">
    <div class="hc-calendar-weekdays">
      <div class="hc-calendar-weekdays-item hc-is--weekend">
        <time datetime="2024-11-10">Sun</time>
        <span>10</span>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-11">Mon</time>
        <span>11</span>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-12">Tue</time>
        <span>12</span>
      </div>
      <div class="hc-calendar-weekdays-item hc-is--active">
        <time datetime="2024-11-13">Wed</time>
        <span>13</span>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-14">Thu</time>
        <span>14</span>
      </div>
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-15">Fri</time>
        <span>15</span>
      </div>
      <div class="hc-calendar-weekdays-item hc-is--weekend">
        <time datetime="2024-11-16">Sat</time>
        <span>16</span>
      </div>
    </div>
    <div id="hcw-hce" class="hc-calendar-events hc-has--half-hours">
      <div class="hc-calendar-events-hours">
        <time class="hc-calendar-events-hour" data-hc-hour-marker="00:00">12am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="00:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="1:00">1am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="1:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="2:00">2am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="2:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="3:00">3am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="3:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="4:00">4am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="4:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="5:00">5am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="5:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="6:00">6am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="6:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="7:00">7am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="7:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="8:00">8am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="8:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="9:00">9am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="9:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="10:00">10am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="10:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="11:00">11am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="11:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="12:00">12pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="12:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="13:00">1pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="13:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="14:00">2pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="14:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="15:00">3pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="15:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="16:00">4pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="16:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="17:00">5pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="17:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="18:00">6pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="18:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="19:00">7pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="19:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="20:00">8pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="20:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="21:00">9pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="21:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="22:00">10pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="22:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="23:00">11pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="23:30"></time>
      </div>
      <div class="hc-calendar-events-day hc-is--weekend"></div>
      <div class="hc-calendar-events-day">
        <div class="hc-calendar-event" data-hc-event-start="11:15" data-hc-event-duration="90">
          <span class="hc-calendar-event-title">Curriculum weekly team meeting</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T11:15">11:15am</time>
        </div>
        <div class="hc-calendar-event" data-hc-event-start="12:45" data-hc-event-duration="15">
          <span class="hc-calendar-event-title">Curriculum debrief</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T12:45">12:45am</time>
        </div>
      </div>
      <div class="hc-calendar-events-day">
        <div class="hc-calendar-event" data-hc-event-start="06:30" data-hc-event-duration="60">
          <span class="hc-calendar-event-title">Team standup</span>
          <time class="hc-calendar-event-time" datetime="2024-11-12T06:30">6:30am</time>
        </div>
      </div>
      <div class="hc-calendar-events-day">
        <div class="hc-calendar-event" data-hc-event-start="12:00" data-hc-event-duration="30">
          <span class="hc-calendar-event-title">Planning Meeting that wraps and goes longer</span>
          <time class="hc-calendar-event-time" datetime="2024-11-12T12:00">12pm</time>
        </div>
        <div class="hc-calendar-event" data-hc-event-start="13:00" data-hc-event-duration="15">
          <span class="hc-calendar-event-title">Planning Meeting</span>
          <time class="hc-calendar-event-time" datetime="2024-11-12T13:00">1pm</time>
        </div>
      </div>
      <div class="hc-calendar-events-day">
        <div class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="12:30" data-hc-event-duration="75">
          <span class="hc-calendar-event-title">Sibling event</span>
          <time class="hc-calendar-event-time" datetime="2024-11-14T11:15">12:30pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="13:00" data-hc-event-duration="60">
          <span class="hc-calendar-event-title">Another sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-14T13:00">1pm</time>
        </div>
      </div>
      <div class="hc-calendar-events-day"></div>
      <div class="hc-calendar-events-day hc-is--weekend"></div>
    </div>
  </div>
</div>

Week day handling

The week structure inside of the .hc-calendar-events wrapper has some specific requirements.

The first element inside of this wrapper should be the .hc-calendar-events-hours container, with optional .hc-has--half-hours modifier to show extended-height hour blocks that include a half hour tick.

This half hour container expects 48 <time> elements with class .hc-calendar-events-hour and the .hc-calendar-events-hour--half for the half hours.
The horizontal lines are based on the hour markers in this element and other grid structure expects them.

There should be 7 elements after this hour wrapper, one for each day of the week. These can be empty if there are no events for that day but must still be present. Append the modifier `.hc-is--weekend` for weekend days.

Adding events to the week

Each event can be added in the day column similarly to the month view. Simply create elements with class .hc-calendar-event that have a title and time, if desired.

Importantly, each event element must have a data-hc-event-start and data-hc-event-duration value. The start value should be in 24-hour format in 15 minute increments. The duration value should be a value from 15 to 180 in 15-minute increments. Events are placed on their day based on these values.


<div class="hc-calendar-event" data-hc-event-start="12:30" data-hc-event-duration="75">
  <span class="hc-calendar-event-title">Planning meeting</span>
  <time class="hc-calendar-event-time" datetime="2024-11-14T11:15">12:30pm</time>
</div>

For events that occur at the same time or close enough that they overlay, append the .hc-calender-event--sibling class. Currently 2 sibling events are supported with basic functionality, and the event immediately following the second sibling (if there is one) cannot also have this modifier.

Day view

Similar to the week view calendar, the day view shows a column of times with the largest and most detailed event display by hour or half hour.

Append both .hc-calendar--day and .hc-calendar--time to the parent element.

November 2024

½ hours

Thursday November 14

12am 1am 2am 3am 4am 5am 6am 7am 8am 9am 10am 11am 12pm 1pm 2pm 3pm 4pm 5pm 6pm 7pm 8pm 9pm 10pm 11pm

Curriculum weekly team meeting 11:15am

Curriculum debrief 12:45am

HTML

Expand Edit in Playground Copy


<div id="hcd" class="hc-calendar hc-calendar--time hc-calendar--day" style="height: 600px;">
  <div class="hc-calendar-controls">
    <h2 class="hc-calendar-title">November <span class="hc-text--secondary">2024</span></h2>
    <div class="hc-calendar-actions">
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" class="hc-checkbox" name="hcd-weekends" onchange="document.getElementById('hcd-hce').classList.toggle('hc-has--half-hours');" />
        <span class="hc-label">
          <span class="hc-label-text">½ hours</span>
        </span>
      </label>
      <div class="hc-button-segment">
        <button type="button" class="hc-button hc-button--primary hc-button--icon" aria-label="Previous week">
          <i class="hc-icon hc-icon--chevron-left hc-icon--20"></i>
        </button>
        <button type="button" class="hc-button hc-button--primary">
          Today
        </button>
        <button type="button" class="hc-button hc-button--primary hc-button--icon" aria-label="Next week">
          <i class="hc-icon hc-icon--chevron-right hc-icon--20"></i>
        </button>
      </div>
      <select id="calendar-view" class="hc-select">
        <option value="day" selected>Day</option>
        <option value="week">Week</option>
        <option value="month">Month</option>
      </select>
      <button type="button" class="hc-button hc-button--primary hc-button--brand">Add activity</button>
    </div>
  </div>
  <div class="hc-calendar-grid" id="hcd-scroll">
    <div class="hc-calendar-weekdays">
      <div class="hc-calendar-weekdays-item">
        <time datetime="2024-11-14">Thursday</time>
        <span>November 14</span>
      </div>
    </div>
    <div id="hcd-hce" class="hc-calendar-events">
      <div class="hc-calendar-events-hours">
        <time class="hc-calendar-events-hour" data-hc-hour-marker="00:00">12am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="00:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="1:00">1am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="1:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="2:00">2am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="2:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="3:00">3am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="3:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="4:00">4am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="4:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="5:00">5am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="5:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="6:00">6am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="6:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="7:00">7am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="7:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="8:00">8am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="8:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="9:00">9am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="9:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="10:00">10am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="10:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="11:00">11am</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="11:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="12:00">12pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="12:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="13:00">1pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="13:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="14:00">2pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="14:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="15:00">3pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="15:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="16:00">4pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="16:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="17:00">5pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="17:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="18:00">6pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="18:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="19:00">7pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="19:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="20:00">8pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="20:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="21:00">9pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="21:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="22:00">10pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="22:30"></time>
        <time class="hc-calendar-events-hour" data-hc-hour-marker="23:00">11pm</time>
        <time class="hc-calendar-events-hour hc-calendar-events-hour--half" data-hc-hour-marker="23:30"></time>
      </div>
      <div class="hc-calendar-events-day">
        <div class="hc-calendar-event" data-hc-event-start="11:15" data-hc-event-duration="90">
          <span class="hc-calendar-event-title">Curriculum weekly team meeting</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T11:15">11:15am</time>
        </div>
        <div class="hc-calendar-event" data-hc-event-start="12:45" data-hc-event-duration="15">
          <span class="hc-calendar-event-title">Curriculum debrief</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T12:45">12:45am</time>
        </div>
      </div>
    </div>
  </div>
</div>

Adding events to the day

Events should be added to a day in day view the same way that you do them in the week view. All data attributes are the same, as well as the -sibling modifier and rules.