Spectre CSS

Calendars ​

JS Optional

Picker ​

Calendars are designed for date or date range picker and events display.

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
html
<div class="calendar">
  <!-- calendar navbar -->
  <div class="calendar-nav navbar">
    <button class="btn btn-action btn-link btn-lg">
      <i class="icon icon-arrow-left"></i>
    </button>
    <div class="navbar-primary">March 2017</div>
    <button class="btn btn-action btn-link btn-lg">
      <i class="icon icon-arrow-right"></i>
    </button>
  </div>

  <div class="calendar-container">
    <div class="calendar-header">
      <div class="calendar-date">Sun</div>
      <div class="calendar-date">Mon</div>
      <div class="calendar-date">Tue</div>
      <div class="calendar-date">Wed</div>
      <div class="calendar-date">Thu</div>
      <div class="calendar-date">Fri</div>
      <div class="calendar-date">Sat</div>
    </div>

    <div class="calendar-body">
      <!-- calendar previous month -->
      <div class="calendar-date prev-month">
        <button class="date-item">26</button>
      </div>
      ...
      <div class="calendar-date prev-month">
        <button class="date-item">28</button>
      </div>

      <!-- calendar current month -->
      <div class="calendar-date">
        <button class="date-item">1</button>
      </div>
      <div class="calendar-date">
        <button class="date-item">2</button>
      </div>
      <div class="calendar-date">
        <button class="date-item">3</button>
      </div>
      <!-- calendar date: today -->
      <div class="calendar-date">
        <button class="date-item date-today">4</button>
      </div>
      <!-- calendar date: tooltip -->
      <div class="calendar-date tooltip" data-tooltip="You have appointments">
        <button class="date-item">5</button>
      </div>
      <!-- calendar date: not available -->
      <div class="calendar-date tooltip" data-tooltip="Not available">
        <button class="date-item" disabled="">6</button>
      </div>

      <!-- calendar range -->
      <div class="calendar-date calendar-range range-start">
        <button class="date-item">7</button>
      </div>
      <div class="calendar-date calendar-range">
        <button class="date-item">8</button>
      </div>
      <div class="calendar-date calendar-range range-end">
        <button class="date-item">9</button>
      </div>
      ...
      <div class="calendar-date">
        <button class="date-item">31</button>
      </div>

      <!-- calendar next month -->
      <div class="calendar-date next-month">
        <button class="date-item">1</button>
      </div>
    </div>
  </div>
</div>

Full size ​

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Zhonghe Festival
Product launch eventInternational Women's Day
Arbor Day
Spring Equinox
April Fools' Day
html
<div class="calendar calendar-lg">
  <!-- calendar navbar structure -->

  <div class="calendar-container">
    <!-- calendar header structure -->

    <div class="calendar-body">
      <!-- calendar date with events -->
      <div class="calendar-date">
        <button class="date-item active">20</button>
        <div class="calendar-events">
          <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
        </div>
      </div>
    </div>
  </div>
</div>