Datepicker

Datepicker Figma Code Connected

Datepickers are used to select an individual date, date range, and/or time from a familiar small calendar dropdown.

Native HTML date and time inputs

The native HTML date and time input types are strongly preferred when presenting the user with a date or time selection. These inputs have full cross-browser support and work well now on mobile.

The Datepicker component presented here may be used in contexts where more control is necessary, for range selections or complex calendar menus, or when you want to embed a static “mini calendar” on a screen.

Default datepicker

Datepickers should normally appear in a Dropdown menu, though they can also be embedded on screen or in any other component, like a Modal or Drawer.

Create one with a wrapper element with class .hc-datepicker. Additional elements should be included as necessary depending on the use case. Here is a complete default example with exlanations for each element below:

August 2024
M T W R F S U
HTML
Expand Edit in Playground Copy 

<div class="hc-datepicker bg-white rounded-md" id="hcdp1">
  <div class="hc-datepicker-title">
    <div class="hc-datepicker-title-month">
      <span class="hc-label">August 2024</span>
      <label for="hc-datepicker-year-select" class="hc-button hc-button--icon hc-button--sm hc-button--secondary hc-datepicker-year-toggle-button" aria-label="Previous month">
        <i class="hc-icon hc-icon--chevron-down"></i>
      </label>
    </div>
    <div class="hc-datepicker-title-actions">
      <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
        aria-label="Previous month"
        onclick="document.querySelectorAll('#hcdp1 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'ltr') });">
        <i class="hc-icon hc-icon--chevron-left"></i>
      </button>
      <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
        aria-label="Next month"
        onclick="document.querySelectorAll('#hcdp1 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'rtl') });">
        <i class="hc-icon hc-icon--chevron-right"></i>
      </button>
    </div>
  </div>
  <input type="checkbox" class="hc-datepicker-year-toggle" id="hc-datepicker-year-select">
  <div class="hc-datepicker-years">
    <button class="hc-datepicker-calendar-item">2028</button>
    <button class="hc-datepicker-calendar-item">2027</button>
    <button class="hc-datepicker-calendar-item">2026</button>
    <button class="hc-datepicker-calendar-item">2025</button>
    <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--today">2024</button>
    <button class="hc-datepicker-calendar-item">2023</button>
    <button class="hc-datepicker-calendar-item">2022</button>
    <button class="hc-datepicker-calendar-item">2021</button>
    <button class="hc-datepicker-calendar-item">2020</button>
    <button class="hc-datepicker-calendar-item">2019</button>
    <button class="hc-datepicker-calendar-item">2018</button>
    <button class="hc-datepicker-calendar-item">2017</button>
    <button class="hc-datepicker-calendar-item">2016</button>
    <button class="hc-datepicker-calendar-item">2015</button>
    <button class="hc-datepicker-calendar-item">2014</button>
    <button class="hc-datepicker-calendar-item">2013</button>
    <button class="hc-datepicker-calendar-item">2012</button>
    <button class="hc-datepicker-calendar-item">2011</button>
    <button class="hc-datepicker-calendar-item">2010</button>
    <button class="hc-datepicker-calendar-item">2009</button>
    <button class="hc-datepicker-calendar-item">2008</button>
    <button class="hc-datepicker-calendar-item">2007</button>
    <button class="hc-datepicker-calendar-item">2006</button>
    <button class="hc-datepicker-calendar-item">2005</button>
    <button class="hc-datepicker-calendar-item">2004</button>
    <button class="hc-datepicker-calendar-item">2003</button>
    <button class="hc-datepicker-calendar-item">2002</button>
    <button class="hc-datepicker-calendar-item">2001</button>
    <button class="hc-datepicker-calendar-item">2000</button>
    <button class="hc-datepicker-calendar-item">1999</button>
    <button class="hc-datepicker-calendar-item">1998</button>
    <button class="hc-datepicker-calendar-item">1997</button>
    <button class="hc-datepicker-calendar-item">1996</button>
    <button class="hc-datepicker-calendar-item">1995</button>
    <button class="hc-datepicker-calendar-item">1994</button>
    <button class="hc-datepicker-calendar-item">1993</button>
    <button class="hc-datepicker-calendar-item">1992</button>
    <button class="hc-datepicker-calendar-item">1991</button>
    <button class="hc-datepicker-calendar-item">1990</button>
    <button class="hc-datepicker-calendar-item">1989</button>
    <button class="hc-datepicker-calendar-item">1988</button>
    <button class="hc-datepicker-calendar-item">1987</button>
    <button class="hc-datepicker-calendar-item">1986</button>
    <button class="hc-datepicker-calendar-item">1985</button>
  </div>
  <div class="hc-datepicker-calendar">
    <div class="hc-datepicker-calendar-head">
      <span class="hc-datepicker-calendar-th">M</span>
      <span class="hc-datepicker-calendar-th">T</span>
      <span class="hc-datepicker-calendar-th">W</span>
      <span class="hc-datepicker-calendar-th">R</span>
      <span class="hc-datepicker-calendar-th">F</span>
      <span class="hc-datepicker-calendar-th">S</span>
      <span class="hc-datepicker-calendar-th">U</span>
    </div>
    <div class="hc-datepicker-calendar-months">
      <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
        <button class="hc-datepicker-calendar-item">1</button>
        <button class="hc-datepicker-calendar-item">2</button>
        <button class="hc-datepicker-calendar-item">3</button>
        <button class="hc-datepicker-calendar-item">4</button>
        <button class="hc-datepicker-calendar-item">5</button>
        <button class="hc-datepicker-calendar-item">6</button>
        <button class="hc-datepicker-calendar-item">7</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today">8</button>
        <button class="hc-datepicker-calendar-item">9</button>
        <button class="hc-datepicker-calendar-item">10</button>
        <button class="hc-datepicker-calendar-item">11</button>
        <button class="hc-datepicker-calendar-item">12</button>
        <button class="hc-datepicker-calendar-item">13</button>
        <button class="hc-datepicker-calendar-item">14</button>
        <button class="hc-datepicker-calendar-item">15</button>
        <button class="hc-datepicker-calendar-item">16</button>
        <button class="hc-datepicker-calendar-item">17</button>
        <button class="hc-datepicker-calendar-item">18</button>
        <button class="hc-datepicker-calendar-item">19</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on">20</button>
        <button class="hc-datepicker-calendar-item">21</button>
        <button class="hc-datepicker-calendar-item">22</button>
        <button class="hc-datepicker-calendar-item">23</button>
        <button class="hc-datepicker-calendar-item">24</button>
        <button class="hc-datepicker-calendar-item">25</button>
        <button class="hc-datepicker-calendar-item">26</button>
        <button class="hc-datepicker-calendar-item">27</button>
        <button class="hc-datepicker-calendar-item">28</button>
        <button class="hc-datepicker-calendar-item">29</button>
        <button class="hc-datepicker-calendar-item">30</button>
        <button class="hc-datepicker-calendar-item">31</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</button>
      </div>
      <div class="hc-datepicker-calendar-month" data-hc-datepicker-month="September" data-hc-datepicker-year="2024">
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">25</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">26</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">27</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
        <button class="hc-datepicker-calendar-item">1</button>
        <button class="hc-datepicker-calendar-item">2</button>
        <button class="hc-datepicker-calendar-item">3</button>
        <button class="hc-datepicker-calendar-item">4</button>
        <button class="hc-datepicker-calendar-item">5</button>
        <button class="hc-datepicker-calendar-item">6</button>
        <button class="hc-datepicker-calendar-item">7</button>
        <button class="hc-datepicker-calendar-item">8</button>
        <button class="hc-datepicker-calendar-item">9</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--start">10</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">11</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">12</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">13</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">14</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">15</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--end">16</button>
        <button class="hc-datepicker-calendar-item">17</button>
        <button class="hc-datepicker-calendar-item">18</button>
        <button class="hc-datepicker-calendar-item">19</button>
        <button class="hc-datepicker-calendar-item">20</button>
        <button class="hc-datepicker-calendar-item">21</button>
        <button class="hc-datepicker-calendar-item">22</button>
        <button class="hc-datepicker-calendar-item">23</button>
        <button class="hc-datepicker-calendar-item">24</button>
        <button class="hc-datepicker-calendar-item">25</button>
        <button class="hc-datepicker-calendar-item">26</button>
        <button class="hc-datepicker-calendar-item">27</button>
        <button class="hc-datepicker-calendar-item">28</button>
        <button class="hc-datepicker-calendar-item">29</button>
        <button class="hc-datepicker-calendar-item">30</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
      </div>
    </div>
  </div>
</div>

Embedded calendar

The datepicker component may also be used as an embedded calendar either for display or for mild interactions. This can be useful on a fuller calendar screen to show the month preview with indicators for days that have events.

Append the class .hc-datepicker--embedded to the parent element and remove any controls that are unnecessary for your use case (such as the year toggle or month switcher).

Use <span> elements for display and <button> elements for interactive calendars.

Display
August 2024
M T W R F S U
28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7
Interactive
August 2024
M T W R F S U
HTML
Expand Edit in Playground Copy 

<div class="flex flex-col gap-2 items-center">
  <div>Display</div>
  <div class="hc-datepicker hc-datepicker--embedded hc-datepicker--embedded--with-border">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm">August 2024</span>
      </div>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</span>
          <span class="hc-datepicker-calendar-item">1</span>
          <span class="hc-datepicker-calendar-item">2</span>
          <span class="hc-datepicker-calendar-item">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">5</span>
          <span class="hc-datepicker-calendar-item">6</span>
          <span class="hc-datepicker-calendar-item">7</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today hc-datepicker-calendar-item--event">8</span>
          <span class="hc-datepicker-calendar-item">9</span>
          <span class="hc-datepicker-calendar-item">10</span>
          <span class="hc-datepicker-calendar-item">11</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">12</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">13</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">14</span>
          <span class="hc-datepicker-calendar-item">15</span>
          <span class="hc-datepicker-calendar-item">16</span>
          <span class="hc-datepicker-calendar-item">17</span>
          <span class="hc-datepicker-calendar-item">18</span>
          <span class="hc-datepicker-calendar-item">19</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--event">20</span>
          <span class="hc-datepicker-calendar-item">21</span>
          <span class="hc-datepicker-calendar-item">22</span>
          <span class="hc-datepicker-calendar-item">23</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">24</span>
          <span class="hc-datepicker-calendar-item">25</span>
          <span class="hc-datepicker-calendar-item">26</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">27</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">28</span>
          <span class="hc-datepicker-calendar-item">29</span>
          <span class="hc-datepicker-calendar-item">30</span>
          <span class="hc-datepicker-calendar-item">31</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="flex flex-col gap-2 items-center">
  <div>Interactive</div>
  <div class="hc-datepicker hc-datepicker--embedded hc-datepicker--embedded--with-border">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm">August 2024</span>
      </div>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
          <button class="hc-datepicker-calendar-item">1</button>
          <button class="hc-datepicker-calendar-item">2</button>
          <button class="hc-datepicker-calendar-item">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">5</button>
          <button class="hc-datepicker-calendar-item">6</button>
          <button class="hc-datepicker-calendar-item">7</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today hc-datepicker-calendar-item--event">8</button>
          <button class="hc-datepicker-calendar-item">9</button>
          <button class="hc-datepicker-calendar-item">10</button>
          <button class="hc-datepicker-calendar-item">11</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">12</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">13</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">14</button>
          <button class="hc-datepicker-calendar-item">15</button>
          <button class="hc-datepicker-calendar-item">16</button>
          <button class="hc-datepicker-calendar-item">17</button>
          <button class="hc-datepicker-calendar-item">18</button>
          <button class="hc-datepicker-calendar-item">19</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--event">20</button>
          <button class="hc-datepicker-calendar-item">21</button>
          <button class="hc-datepicker-calendar-item">22</button>
          <button class="hc-datepicker-calendar-item">23</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">24</button>
          <button class="hc-datepicker-calendar-item">25</button>
          <button class="hc-datepicker-calendar-item">26</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">27</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">28</button>
          <button class="hc-datepicker-calendar-item">29</button>
          <button class="hc-datepicker-calendar-item">30</button>
          <button class="hc-datepicker-calendar-item">31</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</button>
        </div>
      </div>
    </div>
  </div>
</div>

The calendar markup is essentially the same otherwise as the interactive datepicker, with an additional class on each day to indicate that there is an event on that day: .hc-datepicker-calendar-item--event.

The height of the calendar is automatic based on the number of weeks presented for the given month.

Brand themes

Apply a brand theme to the buttons by adding .hc-datepicker--brand to the parent element.

Theme:
August 2024
M T W R F S U
August 2024
M T W R F S U
28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7
HTML
Expand Edit in Playground Copy 

<div class="w-full md:w-1/2 xl:w-1/3 mx-auto flex flex-row items-center gap-2 pt-2 mb-4">
    <span class="whitespace-nowrap">Theme:</span>
    <select class="hc-select" onchange="document.querySelector('body').dataset.hcTheme=this.value">
        <option value="ss">Default</option>
        <option value="attend">Attend</option>
        <option value="boost">Boost</option>
        <option value="connect">Connect</option>
        <option value="forms">Forms &amp; Flows</option>
    </select>
</div>
<div class="flex flex-row gap-12">
  <div class="hc-datepicker hc-datepicker--brand bg-white rounded-md" id="hcdp2">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm">August 2024</span>
        <label for="hc-datepicker-year-select2" class="hc-button hc-button--icon hc-button--sm hc-button--secondary hc-datepicker-year-toggle-button" aria-label="Previous month">
          <i class="hc-icon hc-icon--chevron-down"></i>
        </label>
      </div>
      <div class="hc-datepicker-title-actions">
        <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
          aria-label="Previous month"
          onclick="document.querySelectorAll('#hcdp2 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'ltr') });">
          <i class="hc-icon hc-icon--chevron-left"></i>
        </button>
        <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
          aria-label="Next month"
          onclick="document.querySelectorAll('#hcdp2 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'rtl') });">
          <i class="hc-icon hc-icon--chevron-right"></i>
        </button>
      </div>
    </div>
    <input type="checkbox" class="hc-datepicker-year-toggle" id="hc-datepicker-year-select2">
    <div class="hc-datepicker-years">
      <button class="hc-datepicker-calendar-item">2028</button>
      <button class="hc-datepicker-calendar-item">2027</button>
      <button class="hc-datepicker-calendar-item">2026</button>
      <button class="hc-datepicker-calendar-item">2025</button>
      <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--today">2024</button>
      <button class="hc-datepicker-calendar-item">2023</button>
      <button class="hc-datepicker-calendar-item">2022</button>
      <button class="hc-datepicker-calendar-item">2021</button>
      <button class="hc-datepicker-calendar-item">2020</button>
      <button class="hc-datepicker-calendar-item">2019</button>
      <button class="hc-datepicker-calendar-item">2018</button>
      <button class="hc-datepicker-calendar-item">2017</button>
      <button class="hc-datepicker-calendar-item">2016</button>
      <button class="hc-datepicker-calendar-item">2015</button>
      <button class="hc-datepicker-calendar-item">2014</button>
      <button class="hc-datepicker-calendar-item">2013</button>
      <button class="hc-datepicker-calendar-item">2012</button>
      <button class="hc-datepicker-calendar-item">2011</button>
      <button class="hc-datepicker-calendar-item">2010</button>
      <button class="hc-datepicker-calendar-item">2009</button>
      <button class="hc-datepicker-calendar-item">2008</button>
      <button class="hc-datepicker-calendar-item">2007</button>
      <button class="hc-datepicker-calendar-item">2006</button>
      <button class="hc-datepicker-calendar-item">2005</button>
      <button class="hc-datepicker-calendar-item">2004</button>
      <button class="hc-datepicker-calendar-item">2003</button>
      <button class="hc-datepicker-calendar-item">2002</button>
      <button class="hc-datepicker-calendar-item">2001</button>
      <button class="hc-datepicker-calendar-item">2000</button>
      <button class="hc-datepicker-calendar-item">1999</button>
      <button class="hc-datepicker-calendar-item">1998</button>
      <button class="hc-datepicker-calendar-item">1997</button>
      <button class="hc-datepicker-calendar-item">1996</button>
      <button class="hc-datepicker-calendar-item">1995</button>
      <button class="hc-datepicker-calendar-item">1994</button>
      <button class="hc-datepicker-calendar-item">1993</button>
      <button class="hc-datepicker-calendar-item">1992</button>
      <button class="hc-datepicker-calendar-item">1991</button>
      <button class="hc-datepicker-calendar-item">1990</button>
      <button class="hc-datepicker-calendar-item">1989</button>
      <button class="hc-datepicker-calendar-item">1988</button>
      <button class="hc-datepicker-calendar-item">1987</button>
      <button class="hc-datepicker-calendar-item">1986</button>
      <button class="hc-datepicker-calendar-item">1985</button>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
          <button class="hc-datepicker-calendar-item">1</button>
          <button class="hc-datepicker-calendar-item">2</button>
          <button class="hc-datepicker-calendar-item">3</button>
          <button class="hc-datepicker-calendar-item">4</button>
          <button class="hc-datepicker-calendar-item">5</button>
          <button class="hc-datepicker-calendar-item">6</button>
          <button class="hc-datepicker-calendar-item">7</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today">8</button>
          <button class="hc-datepicker-calendar-item">9</button>
          <button class="hc-datepicker-calendar-item">10</button>
          <button class="hc-datepicker-calendar-item">11</button>
          <button class="hc-datepicker-calendar-item">12</button>
          <button class="hc-datepicker-calendar-item">13</button>
          <button class="hc-datepicker-calendar-item">14</button>
          <button class="hc-datepicker-calendar-item">15</button>
          <button class="hc-datepicker-calendar-item">16</button>
          <button class="hc-datepicker-calendar-item">17</button>
          <button class="hc-datepicker-calendar-item">18</button>
          <button class="hc-datepicker-calendar-item">19</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on">20</button>
          <button class="hc-datepicker-calendar-item">21</button>
          <button class="hc-datepicker-calendar-item">22</button>
          <button class="hc-datepicker-calendar-item">23</button>
          <button class="hc-datepicker-calendar-item">24</button>
          <button class="hc-datepicker-calendar-item">25</button>
          <button class="hc-datepicker-calendar-item">26</button>
          <button class="hc-datepicker-calendar-item">27</button>
          <button class="hc-datepicker-calendar-item">28</button>
          <button class="hc-datepicker-calendar-item">29</button>
          <button class="hc-datepicker-calendar-item">30</button>
          <button class="hc-datepicker-calendar-item">31</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</button>
        </div>
        <div class="hc-datepicker-calendar-month" data-hc-datepicker-month="September" data-hc-datepicker-year="2024">
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">25</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">26</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">27</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
          <button class="hc-datepicker-calendar-item">1</button>
          <button class="hc-datepicker-calendar-item">2</button>
          <button class="hc-datepicker-calendar-item">3</button>
          <button class="hc-datepicker-calendar-item">4</button>
          <button class="hc-datepicker-calendar-item">5</button>
          <button class="hc-datepicker-calendar-item">6</button>
          <button class="hc-datepicker-calendar-item">7</button>
          <button class="hc-datepicker-calendar-item">8</button>
          <button class="hc-datepicker-calendar-item">9</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--start">10</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">11</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">12</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">13</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">14</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">15</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--end">16</button>
          <button class="hc-datepicker-calendar-item">17</button>
          <button class="hc-datepicker-calendar-item">18</button>
          <button class="hc-datepicker-calendar-item">19</button>
          <button class="hc-datepicker-calendar-item">20</button>
          <button class="hc-datepicker-calendar-item">21</button>
          <button class="hc-datepicker-calendar-item">22</button>
          <button class="hc-datepicker-calendar-item">23</button>
          <button class="hc-datepicker-calendar-item">24</button>
          <button class="hc-datepicker-calendar-item">25</button>
          <button class="hc-datepicker-calendar-item">26</button>
          <button class="hc-datepicker-calendar-item">27</button>
          <button class="hc-datepicker-calendar-item">28</button>
          <button class="hc-datepicker-calendar-item">29</button>
          <button class="hc-datepicker-calendar-item">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
        </div>
      </div>
    </div>
  </div>
  <div class="hc-datepicker hc-datepicker--embedded hc-datepicker--brand bg-white border-card border-gray-500 rounded-lg">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm">August 2024</span>
      </div>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</span>
          <span class="hc-datepicker-calendar-item">1</span>
          <span class="hc-datepicker-calendar-item">2</span>
          <span class="hc-datepicker-calendar-item">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">5</span>
          <span class="hc-datepicker-calendar-item">6</span>
          <span class="hc-datepicker-calendar-item">7</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today hc-datepicker-calendar-item--event">8</span>
          <span class="hc-datepicker-calendar-item">9</span>
          <span class="hc-datepicker-calendar-item">10</span>
          <span class="hc-datepicker-calendar-item">11</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">12</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">13</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">14</span>
          <span class="hc-datepicker-calendar-item">15</span>
          <span class="hc-datepicker-calendar-item">16</span>
          <span class="hc-datepicker-calendar-item">17</span>
          <span class="hc-datepicker-calendar-item">18</span>
          <span class="hc-datepicker-calendar-item">19</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--event">20</span>
          <span class="hc-datepicker-calendar-item">21</span>
          <span class="hc-datepicker-calendar-item">22</span>
          <span class="hc-datepicker-calendar-item">23</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">24</span>
          <span class="hc-datepicker-calendar-item">25</span>
          <span class="hc-datepicker-calendar-item">26</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">27</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">28</span>
          <span class="hc-datepicker-calendar-item">29</span>
          <span class="hc-datepicker-calendar-item">30</span>
          <span class="hc-datepicker-calendar-item">31</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</span>
        </div>
      </div>
    </div>
  </div>
</div>

Interactions and state

Many of the animations and interactions are handled by default via CSS only. This includes month scrolling transitions, switching between the year selector screen and the calendar view, and hover/selected states.

You are responsible for all JavaScript or other state-handling, however. This includes populating the month containers for previous and successive months, adding appropriate class names to a day or days that a user selects, and any logic that happens when a user changes the year.