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.
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ 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.
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ 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