Open In App

jQuery CLNDR Plugin

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery provides a front-end calendar CLNDR plugin using HTML templates mostly used in single-day or multiple days event management system. It is used in appointing dates of various events in the calendar format. You have to download the required files in the working folder so that the programmer can include it in the head section of the HTML structure page as implemented in the following programs.

Note: Include the “underscore.js” and “moment.js” libraries in the head section, before the “clndr.js” as the CLNDR plugin leans on these libraries. . Download the link for CLNDR plugin.

Example 1: The following example demonstrates the basic usage of CLNDR plugin which displays the current month in calendar format. Options like “showAdjacentMonths” and “adjacentDaysChangeMonth” are set to true for quick and easy traverse of previous and next months.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery Calendar Plugin</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="clndr.css" />
 
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src="clndr.js"></script>
    <style>
        body {
            font-family: Arial;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <b>jQuery CLNDR Plugin</b>
    <div class="container">
        <div class="cal1"></div>
    </div>
 
    <script>
        let calendar = {};
        $(document).ready(function () {
            calendar.clndr = $(".cal1").clndr({
 
                // Able to display adjacent months
                showAdjacentMonths: true,
 
                // Visible adjacent days will show
                // corresponding month on click
                adjacentDaysChangeMonth: true,
            });
 
            // Going forward monthwise
            calendar.forward();
            // Going back to previous month
            calendar.back();
        });
    </script>
</body>
 
</html>


Output :

Example 2:

The following example demonstrates passing of events for information display using the CLNDR plugin. In the jQuery code, list of events is passed to the CLNDR click event in the form of array. It displays the date in “red” color and event title in the bottom, once the event date is clicked by the user. Days of the week are also set in a particular format. Programmer can set other options depending on the application requirement.

html




<html>
 
<head>
    <title>jQuery CLNDR Plugin</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="clndr.css" />
 
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src="clndr.js"></script>
    <style>
        body {
            font-family: Arial;
            text-align: center;
        }
 
        div#eventInfoID {
            margin-top: 5px;
            width: 90%;
            text-align: center;
            font-weight: bold;
            padding: 10px;
            box-sizing: content-box;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <b>jQuery CLNDR Plugin</b>
    <div class="container">
        <div class="cal1"></div>
        <div id="eventInfoID"><b></b></div>
    </div>
 
    <script>
        let calendar = {};
        $(document).ready(function () {
            let eventsList = [
                {
                    date: "2020-05-08",
                    title: "Open lecture on web",
                },
                {
                    date: "2020-05-20",
                    title: "Another Long Event",
                },
                {
                    title: "Birthday Party",
                    date: "2020-05-27",
                },
            ];
 
            calendar.clndr = $(".cal1").clndr({
 
                // Displays days of the week in given format
                daysOfTheWeek: ["Sun", "Mon", "Tue",
                    "Wed", "Thu", "Fri", "Sat"],
                events: eventsList,
                clickEvents: {
                    click: function (target) {
                        $(".day .day-contents").css("color", "#000");
 
                        // Displays the event date in red, once clicked
                        $(".calendar-day-" + target["date"]["_i"] + " .day-contents")
                            .css("color", "#FF0000");
                        let titleInfo = target.events[0].title;
                        $("#eventInfoID").text(titleInfo);
                    },
                },
                showAdjacentMonths: true,
                adjacentDaysChangeMonth: false,
            });
        });
    </script>
</body>
 
</html>


Output :

The CLNDR plugin can also handle multiple-day events in the similar manner like single-day events by accessing

start

and

end

date of your event in the array object.

Example 3: The following example demonstrates CLNDR plugin with some constraints like choosing dates within a particular range in the calendar. It helps in handling a lot of user and date validations in web applications.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery CLNDR plugin</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="clndr.css" />
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src="clndr.js"></script>
    <style>
        body {
            font-family: Arial;
        }
 
        .msg-row {
            padding: 5px;
        }
 
        .container {
            width: 650px;
        }
 
        #constraintInfoID {
            margin-top: 5px;
            margin-left: 5px;
            width: 600px;
            text-align: center;
            font-weight: bold;
            padding: 10px 10px;
            box-sizing: content-box;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksForGeeks
    </h1>
    <b>jQuery CLNDR Plugin</b>
    <div class="container">
        <div id="calendarID" class="cal1"></div>
        <div id="constraintInfoID"></div>
    </div>
 
    <script>
        let calendar = {};
        $(document).ready(function () {
            calendar.clndr = $("#calendarID").clndr({
                constraints: {
                    startDate: "2020-05-06",
                    endDate: "2020-05-16",
                },
                clickEvents: {
                    click: function (target) {
                        if (!$(target.element).hasClass("inactive")) {
                            let msg = "Valid date within the constraints!";
                            $("#constraintInfoID")
                                .append("<div class='msg-row'
                                                style = 'background-color:green' > "
                                    + msg + "</div>");
                        } else {
                            let msg = "Date chosen is outside the constraint range";
                            $("#constraintInfoID")
                                .append("<div class='msg-row'
                                                style = 'background-color:red' > "
                                    + msg + "</div>");
                        }
                    },
                },
            });
        });
    </script>
</body>
 
</html>


Output:



Last Updated : 13 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads