extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'calendars'
  - var parent = 'experimentals'
  - var title = 'Calendars - Experimentals - Spectre.css CSS Framework'
  - var description = 'Calendars are designed for date or date range picker and events display. It is made with flex layout. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('calendars', 'Calendars')
    include ../_layout/_ad-g.pug

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

    +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 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>
    
    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug