Blaze UI Calendars

Last Updated : 06 May, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.

Blaze UI Calendars is one of the simplest calendars to be implemented on the webpage. The calendar can also be styled and we can select the dates from the calendar.

Blaze UI Calendars Attributes:

date: This sets the initially selected date of the calendar.
selected: This event is triggered when a date is selected.
type: This styles the calendar.

Syntax:

<blaze-calendar date="..."></blaze-calendar>

Example 1: In the following example, we have a simple calendar with an initial date set.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0" /> 
    <title> GeeksforGeeks | BlazeUI </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" style="padding: 1em;"> 
        <center> 
            <div> 
                <h1 style="color: green;"> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <strong> 
                Blaze UI Calendars 
            </strong> 
            <br> <br> 
  
            <blaze-calendar date="April 24, 1973"> 
            </blaze-calendar> 
        </center> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Calendars

Example 2: In the following example, we will change the style of the calendar using buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0" /> 
    <title> GeeksforGeeks | BlazeUI </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" style="padding: 1em;"> 
        <center> 
            <div> 
                <h1 style="color: green;"> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <strong> 
                Blaze UI Calendars 
            </strong> 
            <br> <br> 
  
            <div style="display: flex; justify-content: space-evenly;"> 
                <button class="c-button c-button--brand" 
                        onclick="changeType('brand')"> 
                    Brand 
                </button> 
                <button class="c-button c-button--success" 
                        onclick="changeType('success')"> 
                    Success 
                </button> 
                <button class="c-button c-button--warning" 
                        onclick="changeType('warning')"> 
                    Warning 
                </button> 
                <button class="c-button c-button--info" 
                        onclick="changeType('info')"> 
                    Info 
                </button> 
            </div> 
  
            <blaze-calendar date="April 24, 1973"> 
            </blaze-calendar> 
        </center> 
    </div> 
      
    <script> 
        const changeType = (type) => { 
            $('blaze-calendar').attr('type', type) 
        } 
    </script> 
</body> 
  
</html>