Simple and customizable calendar that allows users to view the current day and navigate between different months. By using this plugin, you can easily create a calendar by adding a div element with a unique ID and calling the provided functions.

To add the calendar plugin into your project, you will need to include CSS and JS files that are situated in the JS/Plugins/Calendar and CSS/Plugins/Calendar directories.

Make sure that "null-components" CSS file is included in your project to ensure the proper styling of the calendar.

<div class="null-box-shadow null-padding-20 null-border-radius">

<div id="null-calendar"></div>

</div><!--End null-box-shadow-->

document.addEventListener('DOMContentLoaded', (event) => {

const calendar = new NullCalendar('null-calendar');

});

You can retrieve all of today's events using your server-side programming language, and subsequently display them under the calendar.

<div class="null-box-shadow null-padding-20 null-border-radius">

        <div id="null-calendar-2"></div>

            <div class="null-margin-top-10">

                <span class="null-font-weight-bold null-font-size-25 null-color-main">Today's Events</span>

                <div class="null-background-light-grey null-padding-10 null-border-radius null-margin-top-10">
                    <b>Title: </b> <span>Lorem ipsum dolor sit amet.</span>
                </div><!--End null-background-light-grey-->

                <div class="null-background-light-grey null-padding-10 null-border-radius null-margin-top-10">
                    <b>Title: </b> <span>Lorem ipsum dolor sit amet.</span>
                </div><!--End null-background-light-grey-->

                
            </div><!--End null-margin-top-10-->

</div><!--End null-box-shadow-->

document.addEventListener('DOMContentLoaded', (event) => {
     const calendar2 = new NullCalendar('null-calendar-2');
});