Source: src/postcss/Common/Calendars/_basic.css, line 2
3 Calendars
Basic ui skeleton for calendars.
Source: src/postcss/Common/Calendars/_basic.css, line 2
Basic ui skeleton for calendars.
Source: src/postcss/Common/Calendars/_basic.css, line 13
Typically used for either a date picker or basic price calendar.
The basic calendar allows us to style the calendar in a variety of ways by adding buttons, links or whatever elements we want in the list elements.
In the following example we just use a button class to determine the current day, which we would apply programatically.
no gap between li
circled days
<div class="flex flex--wrap">
<div class="calendar [modifier class] pad">
<div class="calendar__tools">
<button class="btn"><i class="icon-chevron-left" title="Previous Month"></i></button>
<select>
<option value="February 2024" selected>February 2024</option>
<option value="February 2024">February 2024</option>
<option value="February 2024">February 2024</option>
</select>
<button class="btn"><i class="icon-chevron-right" title="Next Month"></i></button>
</div>
<ul class="calendar__day-of-week">
<li>Su</li>
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
</ul>
<ul class="calendar__date-grid">
<li class="calendar__null"></li>
<li class="calendar__null"></li>
<li><button>
<time datetime="2019-02-01">1</time>
</button></li>
<li><button>
<time datetime="2019-02-02">2</time>
</button></li>
<li><button>
<time datetime="2019-02-03">3</time>
</button></li>
<li><button>
<time datetime="2019-02-04">4</time>
</button></li>
<li><button class="btn btn--positive">
<time datetime="2019-02-05">5</time>
</button></li>
<li><button>
<time datetime="2019-02-06">6</time>
</button></li>
<li><button>
<time datetime="2019-02-07">7</time>
</button></li>
<li><button>
<time datetime="2019-02-08">8</time>
</button></li>
<li class="calendar__selected">
<button>
<time datetime="2019-02-09">9</time>
</button></li>
<li><button>
<time datetime="2019-02-10">10</time>
</button></li>
<li><button>
<time datetime="2019-02-11">11</time>
</button></li>
<li><button>
<time datetime="2019-02-12">12</time>
</button></li>
<li><button>
<time datetime="2019-02-13">13</time>
</button></li>
<li><button>
<time datetime="2019-02-14">14</time>
</button></li>
<li><button>
<time datetime="2019-02-15">15</time>
</button></li>
<li><button>
<time datetime="2019-02-16">16</time>
</button></li>
<li><button>
<time datetime="2019-02-17">17</time>
</button></li>
<li><button>
<time datetime="2019-02-18">18</time>
</button></li>
<li><button>
<time datetime="2019-02-19">19</time>
</button></li>
<li><button>
<time datetime="2019-02-20">20</time>
</button></li>
<li><button>
<time datetime="2019-02-21">21</time>
</button></li>
<li><button>
<time datetime="2019-02-22">22</time>
</button></li>
<li><button>
<time datetime="2019-02-23">23</time>
</button></li>
<li><button>
<time datetime="2019-02-24">24</time>
</button></li>
<li><button>
<time datetime="2019-02-25">25</time>
</button></li>
<li><button>
<time datetime="2019-02-26">26</time>
</button></li>
<li><button>
<time datetime="2019-02-27">27</time>
</button></li>
<li><button>
<time datetime="2019-02-28">28</time>
</button></li>
<li class="calendar__null"></li>
</ul>
</div>
<div class="calendar [modifier class] pad">
<div class="calendar__tools">
<button class="btn"><i class="icon-chevron-left" title="Previous Year"></i></button>
<select>
<option value="2024" selected> 2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
<button class="btn"><i class="icon-chevron-right" title="Next Year"></i></button>
</div>
<ul class="calendar__month-grid">
<li>
<button class="align-right">
<div>January</div>
<div class="text--xs">2024</div>
</button>
</li>
<li>
<button>
<div>January</div>
<div class="text--xs">2024</div>
</button>
</li>
<li>
<button class="btn--positive">
<div>January</div>
<div class="text--xs">2024</div>
</button>
</li>
<li>
<button>
<div>January</div>
<div class="text--xs">2024</div>
</button>
</li>
<li>
<button>
<div>January</div>
<div class="text--xs">2024</div>
</button>
</li>
</ul>
</div>
</div>Source: src/postcss/Common/Calendars/_basic.css, line 187
Still using the basic calendar class we can display as a price calendar with options to highlight the best price etc.
<div class="flex flex--wrap">
<div class="calendar pad">
<div class="calendar__tools">
<button class="btn"><i class="icon-chevron-left" title="Previous Month"></i></button>
<select>
<option value="February 2024" selected>February 2024</option>
</select>
<button class="btn"><i class="icon-chevron-right" title="Next Month"></i></button>
</div>
<ul class="calendar__day-of-week">
<li>Su</li>
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
</ul>
<ul class="calendar__date-grid">
<li class="calendar__null"></li>
<li class="calendar__null"></li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="btn--positive hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£49</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li class="calendar__null"></li>
</ul>
</div>
<div class="calendar pad">
<div class="calendar__tools">
<button class="btn"><i class="icon-chevron-left" title="Previous Year"></i></button>
<select>
<option value="2024" selected> 2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
<button class="btn"><i class="icon-chevron-right" title="Next Year"></i></button>
</div>
<ul class="calendar__month-grid">
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button class="btn--positive">
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li class="calendar__null"></li>
<li class="calendar__null"></li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
</ul>
</div>
<div class="calendar pad relative">
<div class="loading abs abs--t abs--b abs--l abs--r">
<div>
<div class="loading__animation-1"></div>
<div><strong>Loading...</strong></div>
</div>
</div>
<div class="calendar__tools">
<button class="btn"><i class="icon-chevron-left" title="Previous Year"></i></button>
<select>
<option value="2024" selected> 2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
<button class="btn"><i class="icon-chevron-right" title="Next Year"></i></button>
</div>
<ul class="calendar__month-grid">
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button class="btn--positive">
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
<li class="calendar__null"></li>
<li class="calendar__null"></li>
<li>
<button>
<div>January</div>
<div>2024</div>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£67</calendar-price>
</button>
</li>
</ul>
</div>
</div>