Summary Files Commits Branches @commit @diff @stats
path: root / docs / experimentals / calendars.html
diff options
context:
space:
mode:
Commitef6d8056d26fe952891e47660f1cb0d1ed7041f1 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-08 07:42:33 +0800
Committer
 GitHub <noreply@github.com>
2018-11-08 07:42:33 +0800
Files26e1a053ee953a570e54939ef30c2c89636a6acf /docs/experimentals/calendars.html
Spectre-Dark-Gruvbox-0.5.5.tar
Spectre-Dark-Gruvbox-0.5.5.tar.gz
Spectre-Dark-Gruvbox-0.5.5.zip
Parent0a6c76429b294c26d318479c05736537f3d95abb (diff)
Parenteb7fd9d2538accfe5d291ca93d2ce7dd6e62fefa (diff)
Merge pull request #522 from picturepan2/0.5.5 v0.5.5
0.5.5
1 files changed, 585 insertions, 0 deletions
-rw-r--r--docs/experimentals/calendars.html585
diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html
new file mode 100644
index 0000000..7f42eb8
--- /dev/null
+++ b/docs/experimentals/calendars.html
@@ -0,0 +1,585 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Calendars - Experimentals - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/experimentals/calendars.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="calendars">
+ <h3 class="s-title">Calendars<a class="anchor" href="#calendars" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ <div class="show-md text-center">
+ <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
+ <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
+ </div>
+ </div>
+ <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
+ <div class="docs-demo columns">
+ <div class="column col-4 col-md-12">
+ <div class="calendar">
+ <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">
+ <div class="calendar-date prev-month">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">28</button>
+ </div>
+ <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>
+ <div class="calendar-date tooltip" data-tooltip="Today">
+ <button class="date-item date-today">4</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="Not available">
+ <button class="date-item" disabled="">5</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">6</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">7</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="You have appointments">
+ <button class="date-item badge">8</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">9</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">10</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">11</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">12</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">13</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">14</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">15</button>
+ </div>
+ <div class="calendar-date calendar-range range-start">
+ <button class="date-item">16</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">17</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">18</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">19</button>
+ </div>
+ <div class="calendar-date calendar-range range-end">
+ <button class="date-item">20</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">21</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">22</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">23</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">24</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">25</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">29</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">30</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">31</button>
+ </div>
+ <div class="calendar-date next-month">
+ <button class="date-item">1</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar navbar --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-nav navbar"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-primary"</span>&gt;</span>March 2017<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action btn-link btn-lg"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Sun<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Mon<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Tue<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Wed<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Thu<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Fri<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>Sat<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar previous month --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>26<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ ...
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date prev-month"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>28<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- calendar current month --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date: today --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item date-today"</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date: tooltip --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"You have appointments"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date: not available --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Not available"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">""</span>&gt;</span>6<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- calendar range --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-start"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>7<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>8<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date calendar-range range-end"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>9<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ ...
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>31<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+ <span class="hljs-comment">&lt;!-- calendar next month --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date next-month"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="calendars-sizes">Calendars sizes<a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a></h4>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <div class="calendar calendar-lg">
+ <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">
+ <div class="calendar-date prev-month">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">27</button>
+ <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a></div>
+ </div>
+ <div class="calendar-date prev-month">
+ <button class="date-item">28</button>
+ </div>
+ <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>
+ <div class="calendar-date tooltip" data-tooltip="Today">
+ <button class="date-item date-today">4</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item" disabled="">5</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">6</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">7</button>
+ </div>
+ <div class="calendar-date tooltip" data-tooltip="You have appointments">
+ <button class="date-item badge">8</button>
+ <div class="calendar-events"><a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a><a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a></div>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">9</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">10</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">11</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">12</button>
+ <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a></div>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">13</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">14</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">15</button>
+ </div>
+ <div class="calendar-date calendar-range range-start">
+ <button class="date-item">16</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">17</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">18</button>
+ </div>
+ <div class="calendar-date calendar-range">
+ <button class="date-item">19</button>
+ </div>
+ <div class="calendar-date calendar-range range-end">
+ <button class="date-item">20</button>
+ <div class="calendar-events"><a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a></div>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">21</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">22</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">23</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">24</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">25</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">26</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">27</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">28</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">29</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">30</button>
+ </div>
+ <div class="calendar-date">
+ <button class="date-item">31</button>
+ </div>
+ <div class="calendar-date next-month disabled">
+ <button class="date-item">1</button>
+ <div class="calendar-events"><a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar calendar-lg"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar navbar structure --&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-container"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar header structure --&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- calendar date with events --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-date"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"date-item active"</span>&gt;</span>20<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-events"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"calendar-event bg-success text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#calendars"</span>&gt;</span>Spring Equinox<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file