|
Spectre Calendars are designed for a date or date range picker and to display events. It is made with a flex layout, it is useful to create an attractive calendar.
Spectre Calendar Classes:
- calendar: This class is used to create a calendar interface container.
- calendar-nav: This class is used to create a calendar nav.
- calendar-container: This class is used to hold the calendar-header element.
- calendar-header: This class is used to hold the calendar-date elements like days that we see in a calendar.
- calendar-date: This class is used to hold the date like any specific day “Sunday”.
- calendar-body: This class is used to hold the dates in a number form.
- prev-month: This class holds the previous month’s dates, that look inactive.
- next-month: This class holds the next month’s dates, that look inactive.
- date-item: This class holds the individual number as a date.
- range-start: This class is used to create a range.
- calendar-range: This class is used to carry the range effect from start to end.
- range-end: This class is used to end a range.
Calendar Size: There are different sizes of the calendar, we can create them as we want.
Example 1: In this example, we will create the interface for July 2022, we will include a range of one meeting date and one inactive or unavailable date. We will also mention the current date.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<h3>SPECTRE Autocomplete</h3>
<br><br>
<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">July 2022</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">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 class="calendar-date">Sun</div>
</div>
<div class="calendar-body">
<!-- calendar previous month -->
<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 prev-month">
<button class="date-item">29</button>
</div>
<div class="calendar-date prev-month">
<button class="date-item">30</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">4</button>
</div>
<!-- calendar date: tooltip -->
<div class="calendar-date">
<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 range-start">
<button class="date-item">7</button>
</div>
<div class="calendar-date">
<button class="date-item">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">
<button class="date-item">16</button>
</div>
<div class="calendar-date">
<button class="date-item date-today">17</button>
</div>
<div class="calendar-date">
<button class="date-item">18</button>
</div>
<div class="calendar-date calendar-range range-start">
<button class="date-item">19</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">20</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">21</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">22</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">23</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">24</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">25</button>
</div>
<div class="calendar-date calendar-range range-end">
<button class="date-item">26</button>
</div>
<div class="calendar-date">
<button class="date-item tooltip"
data-tooltip="You have appointments">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>
</div>
</div>
</center>
</body>
</html>
Output:
Example 2: In this example, we will create June 2022 calendar interface, we will make a range plus we will indicate the weekends in orange.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Autocomplete</strong>
<br><br>
<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">June 2022</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">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 class="calendar-date">Sun</div>
</div>
<div class="calendar-body">
<!-- calendar previous month -->
<div class="calendar-date prev-month">
<button class="date-item">30</button>
</div>
<div class="calendar-date prev-month">
<button class="date-item">31</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>
<div class="calendar-date">
<button class="date-item bg-error
text-secondary">4</button>
</div>
<div class="calendar-date">
<button class="date-item bg-error
text-secondary">5</button>
</div>
<!-- calendar date: today -->
<div class="calendar-date">
<button class="date-item">6</button>
</div>
<!-- calendar date: tooltip -->
<div class="calendar-date">
<button class="date-item">7</button>
</div>
<!-- calendar date: not available -->
<div class="calendar-date">
<button class="date-item">8</button>
</div>
<!-- calendar range -->
<div class="calendar-date range-start">
<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 bg-error
text-secondary">11</button>
</div>
<div class="calendar-date">
<button class="date-item bg-error
text-secondary">12</button>
</div>
<div class="calendar-date">
<button class="date-item">13</button>
</div>
<div class="calendar-date
calendar-range range-start">
<button class="date-item ">14</button>
</div>
<div class="calendar-date calendar-range">
<button class="date-item">15</button>
</div>
<div class="calendar-date
calendar-range range-end">
<button class="date-item ">16</button>
</div>
<div class="calendar-date ">
<button class="date-item">17</button>
</div>
<div class="calendar-date">
<button class="date-item bg-error
text-secondary">18</button>
</div>
<div class="calendar-date">
<button class="date-item bg-error
text-secondary">19</button>
</div>
<div class="calendar-date">
<button class="date-item">20</button>
</div>
<div class="calendar-date">
<button class="date-item">24</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 bg-error
text-secondary">25</button>
</div>
<div class="calendar-date">
<button class="date-item bg-error
text-secondary">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>
<!-- Next Month -->
<div class="calendar-date next-month">
<button class="date-item">1</button>
</div>
<div class="calendar-date next-month">
<button class="date-item">2</button>
</div>
<div class="calendar-date next-month">
<button class="date-item">3</button>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Output:
 Reference: https://picturepan2.github.io/spectre/experimentals/calendars.html
|
