p
  | Calendars are designed for date or date range picker and events display. It is made with flex layout.

.docs-demo.columns
  .column.col-4.col-md-12
    .calendar
      .calendar-nav.navbar
        button.btn.btn-action.btn-link.btn-lg
          i.icon.icon-arrow-left
        .navbar-primary March 2017
        button.btn.btn-action.btn-link.btn-lg
          i.icon.icon-arrow-right
      .calendar-container
        .calendar-header
          .calendar-date Sun
          .calendar-date Mon
          .calendar-date Tue
          .calendar-date Wed
          .calendar-date Thu
          .calendar-date Fri
          .calendar-date Sat
        .calendar-body
          .calendar-date.prev-month
            button.date-item 26
          .calendar-date.prev-month
            button.date-item 27
          .calendar-date.prev-month
            button.date-item 28
          .calendar-date
            button.date-item 1
          .calendar-date
            button.date-item 2
          .calendar-date
            button.date-item 3
          .calendar-date.tooltip(data-tooltip="Today")
            button.date-item.date-today 4
          .calendar-date.tooltip(data-tooltip="Not available")
            button.date-item(disabled="") 5
          .calendar-date
            button.date-item 6
          .calendar-date
            button.date-item 7
          .calendar-date.tooltip(data-tooltip="You have appointments")
            button.date-item.badge 8
          .calendar-date
            button.date-item 9
          .calendar-date
            button.date-item 10
          .calendar-date
            button.date-item 11
          .calendar-date
            button.date-item 12
          .calendar-date
            button.date-item 13
          .calendar-date
            button.date-item 14
          .calendar-date
            button.date-item 15
          .calendar-date.calendar-range.range-start
            button.date-item 16
          .calendar-date.calendar-range
            button.date-item 17
          .calendar-date.calendar-range
            button.date-item 18
          .calendar-date.calendar-range
            button.date-item 19
          .calendar-date.calendar-range.range-end
            button.date-item 20
          .calendar-date
            button.date-item 21
          .calendar-date
            button.date-item 22
          .calendar-date
            button.date-item 23
          .calendar-date
            button.date-item 24
          .calendar-date
            button.date-item 25
          .calendar-date
            button.date-item 26
          .calendar-date
            button.date-item 27
          .calendar-date
            button.date-item 28
          .calendar-date
            button.date-item 29
          .calendar-date
            button.date-item 30
          .calendar-date
            button.date-item 31
          .calendar-date.next-month
            button.date-item 1

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

March 2017

        <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>

+docs-subheading('calendars-sizes', 'Calendars sizes')

.docs-demo.columns
  .column.col-12
    .calendar.calendar-lg
      .calendar-nav.navbar
        button.btn.btn-action.btn-link.btn-lg
          i.icon.icon-arrow-left
        .navbar-primary March 2017
        button.btn.btn-action.btn-link.btn-lg
          i.icon.icon-arrow-right
      .calendar-container
        .calendar-header
          .calendar-date Sun
          .calendar-date Mon
          .calendar-date Tue
          .calendar-date Wed
          .calendar-date Thu
          .calendar-date Fri
          .calendar-date Sat
        .calendar-body
          .calendar-date.prev-month
            button.date-item 26
          .calendar-date.prev-month
            button.date-item 27
            .calendar-events
              a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
          .calendar-date.prev-month
            button.date-item 28
          .calendar-date
            button.date-item 1
          .calendar-date
            button.date-item 2
          .calendar-date
            button.date-item 3
          .calendar-date.tooltip(data-tooltip="Today")
            button.date-item.date-today 4
          .calendar-date
            button.date-item(disabled="") 5
          .calendar-date
            button.date-item 6
          .calendar-date
            button.date-item 7
          .calendar-date.tooltip(data-tooltip="You have appointments")
            button.date-item.badge 8
            .calendar-events
              a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
              a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
          .calendar-date
            button.date-item 9
          .calendar-date
            button.date-item 10
          .calendar-date
            button.date-item 11
          .calendar-date
            button.date-item 12
            .calendar-events
              a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
          .calendar-date
            button.date-item 13
          .calendar-date
            button.date-item 14
          .calendar-date
            button.date-item 15
          .calendar-date.calendar-range.range-start
            button.date-item 16
          .calendar-date.calendar-range
            button.date-item 17
          .calendar-date.calendar-range
            button.date-item 18
          .calendar-date.calendar-range
            button.date-item 19
          .calendar-date.calendar-range.range-end
            button.date-item 20
            .calendar-events
              a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
          .calendar-date
            button.date-item 21
          .calendar-date
            button.date-item 22
          .calendar-date
            button.date-item 23
          .calendar-date
            button.date-item 24
          .calendar-date
            button.date-item 25
          .calendar-date
            button.date-item 26
          .calendar-date
            button.date-item 27
          .calendar-date
            button.date-item 28
          .calendar-date
            button.date-item 29
          .calendar-date
            button.date-item 30
          .calendar-date
            button.date-item 31
          .calendar-date.next-month.disabled
            button.date-item 1
            .calendar-events
              a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        <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>