Spectre Calendar
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" >w3wiki</ 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" >w3wiki</ 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
Contact Us