Calendars - Experimentals - Spectre.css CSS Framework
Author: Yan Zhu
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.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Calendars#

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

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat

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

#### Calendars sizes#

March 2017
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Zhonghe Festival
Product launch eventInternational Women's Day
Arbor Day
Spring Equinox
April Fools' Day

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

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.