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

2pm Short event

HTML

Expand Edit in Playground Copy


<div id="hcm" class="hc-calendar hc-calendar--month hc-calendar--no-weekends">
  <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="14:00" data-hc-event-duration="60">
          <span class="hc-indicator hc-indicator--success hc-indicator--sm"></span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T14:00">2pm</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

Third 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="6: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 class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="13:15" data-hc-event-duration="15">
          <span class="hc-calendar-event-title">Third sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-14T13:15">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

Sibling event 2:30pm

Another sibling 3pm

Third sibling 3:15pm

HTML

Expand Edit in Playground Copy


<div id="hcd" class="hc-calendar hc-calendar--time hc-calendar--day w-1/2" 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 class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="14:30" data-hc-event-duration="75">
          <span class="hc-calendar-event-title">Sibling event</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T14:30">2:30pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="15:00" data-hc-event-duration="60">
          <span class="hc-calendar-event-title">Another sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T15:00">3pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="15:15" data-hc-event-duration="120">
          <span class="hc-calendar-event-title">Third sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T15:15">3:15pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--has-third-sibling" data-hc-event-start="16:30" data-hc-event-duration="60">
          <span class="hc-calendar-event-title">Third sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T15:15">3:15pm</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.

Event types

Use the class .hc-calendar-event to create a standard event with title and time.

A few different ways to display events and event details come standard as well for the most common use cases. Some of these originated as platform-specific but can always be used as needed.

Default event attributes

Create an event using the .hc-calendar-event class on a block-level element inside of the .hc-calendar-events-day wrapper. This element should have the following data attributes:

data-hc-event-start: start time in 24-hour format, in 15-minute increments
data-hc-event-duration: event duration in minutes from 15 to 180, in 15-minute increments

The contents inside of this event wrapper are fairly standard, with a title and time as needed. These and other optional elements are documented below for specific calendar display types.

Additionally, append the class .hc-calendar-event--lg to increase the size and padding for the month and day/week event variants.

Month event types

Standard month event

The standard month event contains an Indicator, time (or other meta data) with a class .hc-calendar-event-time, and title with class .hc-calendar-event-title.

12pm Planning meeting

1pm Team standup

1pm Large variation

HTML

Expand Edit in Playground Copy


<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-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</span>
  </div>
  <div class="hc-calendar-event" data-hc-event-start="13:00" data-hc-event-duration="60">
    <span class="hc-indicator hc-indicator--success hc-indicator--sm"></span>
    <time class="hc-calendar-event-time" datetime="2024-11-11T12:00">1pm</time>
    <span class="hc-calendar-event-title">Team standup</span>
  </div>
</div>
<div class="hc-calendar-events-day">
  <div class="hc-calendar-event hc-calendar-event--lg" data-hc-event-start="13:00" data-hc-event-duration="60">
    <span class="hc-indicator hc-indicator--success hc-indicator--sm"></span>
    <time class="hc-calendar-event-time" datetime="2024-11-11T12:00">1pm</time>
    <span class="hc-calendar-event-title">Large variation</span>
  </div>
</div>

Icon event

Create a fuller event with an indicator icon at the left to convey an additional event type, the event title, and additional information to the right. Append .hc-calendar-event--icon to the event element to align these correctly.

For the Boost form event, add the participants in a Badge in this right space.

Informal observation with a long title that will get cut off AG

Formal evaluation SC

Informal observation with a long title that will get cut off AG

HTML

Expand Edit in Playground Copy


<div class="hc-calendar-events-day">
  <div class="hc-calendar-event hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--success">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Informal observation with a long title that will get cut off</span>
    <span class="hc-badge hc-badge--sm hc-badge--success">AG</span>
  </div>
  <div class="hc-calendar-event hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--warning">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Formal evaluation</span>
    <span class="hc-badge hc-badge--sm hc-badge--warning">SC</span>
  </div>
</div>
<div class="hc-calendar-events-day">
  <div class="hc-calendar-event hc-calendar-event--lg hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--success">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Informal observation with a long title that will get cut off</span>
    <span class="hc-badge hc-badge--sm hc-badge--success">AG</span>
  </div>
</div>

Alternatively, add an Avatar or Avatar Stack to this right space instead of a Badge.

Informal observation with a long title that will get cut off AG

Formal evaluation

AG SC MG

Informal observation with a long title that will get cut off AG

Formal evaluation

AG SC MG

HTML

Expand Edit in Playground Copy


<div class="hc-calendar-events-day">
  <div class="hc-calendar-event hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--success">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Informal observation with a long title that will get cut off</span>
    <span class="hc-avatar hc-avatar--xs hc-avatar--blue">AG</span>
  </div>
  <div class="hc-calendar-event hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--warning">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Formal evaluation</span>
    <div class="hc-avatar-stack">
      <span class="hc-avatar hc-avatar-image hc-avatar-image--earth hc-avatar--xs">AG</span>
      <span class="hc-avatar hc-avatar-image hc-avatar-image--pencil hc-avatar--xs">SC</span>
      <span class="hc-avatar hc-avatar-image hc-avatar-image--book hc-avatar--xs">MG</span>
    </div>
  </div>
</div>
<div class="hc-calendar-events-day">
  <div class="hc-calendar-event hc-calendar-event--lg hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--success">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Informal observation with a long title that will get cut off</span>
    <span class="hc-avatar hc-avatar--xs hc-avatar--blue">AG</span>
  </div>
  <div class="hc-calendar-event hc-calendar-event--lg hc-calendar-event--icon" data-hc-event-start="12:00" data-hc-event-duration="30">
    <span class="hc-indicator-icon hc-indicator--sm hc-indicator--warning">
      <i class="hc-icon hc-icon--clipboard hc-icon--16"></i>
    </span>
    <span class="hc-calendar-event-title">Formal evaluation</span>
    <div class="hc-avatar-stack">
      <span class="hc-avatar hc-avatar-image hc-avatar-image--earth hc-avatar--xs">AG</span>
      <span class="hc-avatar hc-avatar-image hc-avatar-image--pencil hc-avatar--xs">SC</span>
      <span class="hc-avatar hc-avatar-image hc-avatar-image--book hc-avatar--xs">MG</span>
    </div>
  </div>
</div>

Week and Day event types

Week and Day calendar views allow for larger event elements with additional metadata. Since they have a color background, these events swap the month event indicator for a background instead.

Standard week and day event

The standard week and day event contains an event title with class .hc-calendar-event-title, an optional icon area with class .hc-calendar-event-icons, time with a class .hc-calendar-event-time, and an avatar or avatar stack group at the bottom to show event participants.

The height and layout of the event details is determined by the data-hc-event-duration value that you set. If the value is 15, the label and time will be in one row.

15 minute meetings use flex row 11:15am

30 minute meetings use flex column. This is a 60 minute meeting clamped to 1 line. 1:30pm

This is a 60 minute meeting clamped to 2 lines with 2 icons floated to the right. The text should truncate after two lines here. 1:30pm

Large variation 60 minute meeting 11:15am

HTML

Expand Edit in Playground Copy


<div class="hc-calendar-events">
  <div class="hc-calendar-event" data-hc-event-start="11:15" data-hc-event-duration="15">
    <span class="hc-calendar-event-title">
      <span>15 minute meetings use flex row </span>
    </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="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span class="hc-calendar-event-title--clamp-1">30 minute meetings use flex column. This is a 60 minute meeting clamped to 1 line. </span>
      <i class="hc-icon hc-icon--display hc-icon--16"></i>
    </span>
    <time class="hc-calendar-event-time" datetime="2024-11-11T13:30">1:30pm</time>
  </div>
  <div class="hc-calendar-event" data-hc-event-start="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span class="hc-calendar-event-title--clamp-2">This is a 60 minute meeting clamped to 2 lines with 2 icons floated to the right. The text should truncate after two lines here.</span>
      <i class="hc-icon hc-icon--display hc-icon--16" aria-label="Virtual meeting" title="Virtual meeting"></i>
      <i class="hc-icon hc-icon--refresh hc-icon--16" aria-label="Recurring event" title="Recurring event"></i>
    </span>
    <time class="hc-calendar-event-time" datetime="2024-11-11T13:30">1:30pm</time>
  </div>
</div>
<div class="hc-calendar-events mt-4">
  <div class="hc-calendar-event hc-calendar-event--lg" data-hc-event-start="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span>Large variation 60 minute meeting</span>
    </span>
    <time class="hc-calendar-event-time" datetime="2024-11-11T11:15">11:15am</time>
  </div>
</div>

If you’re including one or more icons inside the title line, make sure to wrap the title itself in a <span> or other inline element. Icons should sit to the right and contain an appropriate title attribute.

Additionally, if you’d like to limit the number of lines that a title can display, add .hc-calendar-event-title--clamp-1, *-2, or *-3 to the inner span element within the title span.

Adding participants

Wrap an Avatar or Avatar Stack to display participants in an element with class .hc-calendar-event-meta directly below the event title.

Avatars should be sized xs or sm. If using a stack, for participant counts more than 4 you should include 3 avatars with the 4th indicating how many more participants there are.

Inside this wrapping element, participants should go to the left with the event time, if present, justified to the right. This is handled automatically as long as these elements are ordered in this way.

Curriculum weekly team meeting

AG SC MG

11:15am

Weekly standup that has a long title and a long agenda so that we can clamp this title and see how it works

AG SC MG +2

1:30pm

Large curriculum weekly team meeting

AG SC MG

11:15am

Large weekly standup that has a long title and a long agenda so that we can clamp this title and see how it works

AG SC MG +2

1:30pm

HTML

Expand Edit in Playground Copy


<div class="hc-calendar-events">
  <div class="hc-calendar-event hc-calendar-event--success" data-hc-event-start="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span>Curriculum weekly team meeting</span>
    </span>
    <div class="hc-calendar-event-meta">
      <div class="hc-avatar-stack">
        <span class="hc-avatar hc-avatar-image hc-avatar-image--earth hc-avatar--xs">AG</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--pencil hc-avatar--xs">SC</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--book hc-avatar--xs">MG</span>
      </div>
      <time class="hc-calendar-event-time" datetime="2024-11-11T11:15">11:15am</time>
    </div>
  </div>
  <div class="hc-calendar-event" data-hc-event-start="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span class="hc-calendar-event-title--clamp-1">Weekly standup that has a long title and a long agenda so that we can clamp this title and see how it works</span>
      <i class="hc-icon hc-icon--display hc-icon--16"></i>
    </span>
    <div class="hc-calendar-event-meta">
      <div class="hc-avatar-stack">
        <span class="hc-avatar hc-avatar-image hc-avatar-image--earth hc-avatar--xs">AG</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--pencil hc-avatar--xs">SC</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--book hc-avatar--xs">MG</span>
        <span class="hc-avatar hc-avatar--xs">+2</span>
      </div>
      <time class="hc-calendar-event-time" datetime="2024-11-11T13:30">1:30pm</time>
    </div>
  </div>
<div class="hc-calendar-events mt-4">
  <div class="hc-calendar-event hc-calendar-event--lg hc-calendar-event--info" data-hc-event-start="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span>Large curriculum weekly team meeting</span>
    </span>
    <div class="hc-calendar-event-meta">
      <div class="hc-avatar-stack">
        <span class="hc-avatar hc-avatar-image hc-avatar-image--earth hc-avatar--xs">AG</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--pencil hc-avatar--xs">SC</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--book hc-avatar--xs">MG</span>
      </div>
      <time class="hc-calendar-event-time" datetime="2024-11-11T11:15">11:15am</time>
    </div>
  </div>
  <div class="hc-calendar-event hc-calendar-event--lg hc-calendar-event--warning" data-hc-event-start="11:15" data-hc-event-duration="60">
    <span class="hc-calendar-event-title">
      <span class="hc-calendar-event-title--clamp-1">Large weekly standup that has a long title and a long agenda so that we can clamp this title and see how it works</span>
      <i class="hc-icon hc-icon--display hc-icon--16"></i>
    </span>
    <div class="hc-calendar-event-meta">
      <div class="hc-avatar-stack">
        <span class="hc-avatar hc-avatar-image hc-avatar-image--earth hc-avatar--xs">AG</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--pencil hc-avatar--xs">SC</span>
        <span class="hc-avatar hc-avatar-image hc-avatar-image--book hc-avatar--xs">MG</span>
        <span class="hc-avatar hc-avatar--xs">+2</span>
      </div>
      <time class="hc-calendar-event-time" datetime="2024-11-11T13:30">1:30pm</time>
    </div>
  </div>
</div>

Event colors

Change the background color of the event by appending a semantic color or activity type class in the format .hc-calendar-event--success.

Curriculum weekly team meeting 11:15am

Monday standup 9am

Lunch with James and Daniel (large) 12:30pm

HTML

Expand Edit in Playground Copy


<div class="hc-calendar-event hc-calendar-event--success" data-hc-event-start="11:15" data-hc-event-duration="90">
  <span class="hc-calendar-event-title">
    <span>Curriculum weekly team meeting</span>
  </span>
  <time class="hc-calendar-event-time" datetime="2024-11-11T11:15">11:15am</time>
</div>
<div class="hc-calendar-event hc-calendar-event--activity-form" data-hc-event-start="11:15" data-hc-event-duration="90">
  <span class="hc-calendar-event-title">
    <span class="hc-calendar-event-title--clamp-1">Monday standup</span>
    <i class="hc-icon hc-icon--display hc-icon--16" aria-label="Virtual meeting" title="Virtual meeting"></i>
  </span>
  <time class="hc-calendar-event-time" datetime="2024-11-11T09:00">9am</time>
</div>
<div class="hc-calendar-event hc-calendar-event--lg hc-calendar-event--activity-event mt-4" data-hc-event-start="11:15" data-hc-event-duration="90">
  <span class="hc-calendar-event-title">
    <span class="hc-calendar-event-title--clamp-2">Lunch with James and Daniel (large)</span>
    <i class="hc-icon hc-icon--emoji-smile hc-icon--16" aria-label="Smile" title="Smile"></i>
  </span>
  <time class="hc-calendar-event-time" datetime="2024-11-11T12:30">12:30pm</time>
</div>

Mobile handling

Calendar will automatically reduce to a mobile-friendly version for month, week, and agenda views.

To force this behavior, append the class .hc-calendar--mobile. If you’d like to remove this default behavior, append .hc-calendar--desktop-only to the parent element instead.

Each default view will reduce down to an appropriate mobile size using the same markup as documented above for desktop. There are a few additional elements we have here specific to mobile, however, that will always be hidden on desktop and are safe to always include.

Month view

In addition to the standard month markup, include an element with class hc-calendar-events--mobile-day as a sibling following .hc-calendar-events. This element contains the full event information for a particular day that the user has selected.

November 2024

Sun

Mon

Tue

Wed

Thu

Fri

Sat

12pm Planning Meeting that wraps and goes longer

2pm Short event

Monday, November 11

12pm Planning Meeting that wraps and goes longer

2pm Short event

HTML

Expand Edit in Playground Copy


<div id="hcmm" class="hc-calendar hc-calendar--month hc-calendar--no-weekends hc-calendar--mobile">
  <div class="hc-calendar-controls">
    <h2 class="hc-calendar-title">November <span class="hc-text--secondary">2024</span></h2>
    <div class="hc-calendar-actions">
      <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">
        <i class="hc-icon hc-icon--plus"></i>
      </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 hc-is--active">
        <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="14:00" data-hc-event-duration="60">
          <span class="hc-indicator hc-indicator--success hc-indicator--sm"></span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T14:00">2pm</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">
        <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 class="hc-calendar-events--mobile-day">
      <span class="hc-calendar-events--mobile-day-title">Monday, November 11</span>
      <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="14:00" data-hc-event-duration="60">
        <span class="hc-indicator hc-indicator--success hc-indicator--sm"></span>
        <time class="hc-calendar-event-time" datetime="2024-11-11T14:00">2pm</time>
        <span class="hc-calendar-event-title">Short event</span>
      </div>
    </div>
  </div>
</div>

Time views

While the week view is fully supported on mobile, given how narrow each day becomes it is recommended that instead you switch to a day or agenda view at this screen size. Honeycomb doesn’t support this automatically right now and this will require a change in markup for the < md screen size, or showing/hiding these alternates based on the screen size. For instance, add .md:hc-hidden and .hc-hidden .md:hc-display accordingly.

Week view

The week markup is the same as above except that the weekend checkbox is hidden here for space reasons. This is recommended for small screens as this isn’t necessary.

November 2024

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

Third sibling 1pm

HTML

Expand Edit in Playground Copy


<div id="hcwm" class="hc-calendar hc-calendar--week hc-calendar--time hc-calendar--no-weekends hc-calendar--mobile">
  <div class="hc-calendar-controls">
    <h2 class="hc-calendar-title">November <span class="hc-text--secondary">2024</span></h2>
    <div class="hc-calendar-actions">
      <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="hcwm-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="hcwm-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 class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="13:15" data-hc-event-duration="15">
          <span class="hc-calendar-event-title">Third sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-14T13:15">1pm</time>
        </div>
      </div>
      <div class="hc-calendar-events-day"></div>
      <div class="hc-calendar-events-day hc-is--weekend"></div>
    </div>
  </div>
</div>

Day

November 2024

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

Sibling event 2:30pm

Another sibling 3pm

Third sibling 3:15pm

HTML

Expand Edit in Playground Copy


<div id="hcdm" class="hc-calendar hc-calendar--time hc-calendar--mobile hc-calendar--day">
  <div class="hc-calendar-controls">
    <h2 class="hc-calendar-title">November <span class="hc-text--secondary">2024</span></h2>
    <div class="hc-calendar-actions">
      <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="hcdm-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="hcdm-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 class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="14:30" data-hc-event-duration="75">
          <span class="hc-calendar-event-title">Sibling event</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T14:30">2:30pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="15:00" data-hc-event-duration="60">
          <span class="hc-calendar-event-title">Another sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T15:00">3pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--sibling" data-hc-event-start="15:15" data-hc-event-duration="120">
          <span class="hc-calendar-event-title">Third sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T15:15">3:15pm</time>
        </div>
        <div class="hc-calendar-event hc-calendar-event--has-third-sibling" data-hc-event-start="16:30" data-hc-event-duration="60">
          <span class="hc-calendar-event-title">Third sibling</span>
          <time class="hc-calendar-event-time" datetime="2024-11-11T15:15">3:15pm</time>
        </div>
      </div>
    </div>
  </div>
</div>