Open In App

Spectre Calendar

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <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.

HTML




<!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



Last Updated : 19 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads