jQuery provides 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 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.
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.
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.
- jQuery | Page Piling Plugin
- jQuery | Mask Plugin
- How to create a jQuery plugin with methods?
- jQuery | Multiscroll Plugin
- jQuery | DrawSVG Plugin
- jQuery | Product Tour Plugin
- jQuery | Alertify Plugin
- jQuery | Flickerplate Plugin
- jQuery | menu-aim plugin
- jQuery | Tagsort Plugin
- jQuery | RowGrid Plugin
- jQuery | Filer Plugin
- jQuery | Logos Distort Plugin
- jQuery | Flipping Gallery Plugin
- jQuery | Vertical Dot Navigation Plugin
- jQuery | table2excel Plugin
- How to check if a jQuery plugin is loaded?
- jQuery Highcharts Plugin
- jQuery GMaps Plugin
- How to use the Magnific Popup jQuery plugin?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.