Open In App

Spectre Calendar Size

Last Updated : 22 Aug, 2022
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. The calendar can be created in different sizes like it can be default or large as per your requirement. 

Spectre Calendar Size Class:

  • calendar*: This class is a must to create a calendar.
  • calendar-lg: This class is used to create a large size calendar.

Note: The * mark class is a must to create a calendar.

Syntax:

<div class="calendar calendar-lg">
    ...
</div>

Example 1: In this example, we will create a default calendar.

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 Calendar Size</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">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 a large calendar.




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 Calendar Size</strong> 


        <br><br> 


        <div class="calendar calendar-lg"> 


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


Spectre Calendar Size


Reference: https://picturepan2.github.io/spectre/experimentals/calendars.html#calendars-sizes


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Spectre Calendar
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Spectre Calendar
            

        
    
        
            

                Spectre Button Size
            

        
    
        
            

                Spectre Icon size
            

        
    
        
            

                Spectre Folder Structure
            

        
    
        
            

                Spectre Variables - Colors
            

        
    
        
            

                Spectre Form Textarea
            

        
    
        
            

                Spectre Form Input
            

        
    
        
            

                Spectre Button States
            

        
    
        
            

                Spectre Forms Form Checkbox
            

        
    
        
            

                Spectre Forms Form Select
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox