jQuery Calendar Plugin with Daily Events – CLNDR.js

The CLNDR.js is a responsive, customize-able and cross browser jQuery calendar plugin with daily events. The plugin uses Underscore & Moment JavaScript library to display events in calendar widget / gadget. It is useful to show date in different formats (day, weeks, months).

Plugin Overview

Plugin: CLNDR
Author: Kyle Stetz
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, Underscore.js and Moment Js

File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 130 KB

How to Make jQuery Calendar Plugin with Daily Events

1. Load the jQuery, Moment Js and Underscore Js into your webpage to getting started with CLNDR.js plugin.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Underscore js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<!-- Moment Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

2. After that, include the CLNDR‘s CSS and JavaScript files.

<!-- CLNDR CSS/Less -->  
<link rel="stylesheet/less" href="css/clndr.css" />
<!-- CLNDR Js -->
<script src="js/clndr.js" type="text/javascript"></script>

3. Build markup structure for calendar as follows:

        <div id="full-clndr" class="clearfix">
          <script type="text/template" id="full-clndr-template">
            <div class="clndr-controls">
              <div class="clndr-previous-button"><</div>
              <div class="clndr-next-button">></div>
              <div class="current-month"><%= month %> <%= year %></div>

            </div>
            <div class="clndr-grid">
              <div class="days-of-the-week clearfix">
                <% _.each(daysOfTheWeek, function(day) { %>
                  <div class="header-day"><%= day %></div>
                <% }); %>
              </div>
              <div class="days">
                <% _.each(days, function(day) { %>
                  <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div>
                <% }); %>
              </div>
            </div>
            <div class="event-listing">
              <div class="event-listing-title">EVENTS THIS MONTH</div>
              <% _.each(eventsThisMonth, function(event) { %>
                  <div class="event-item">
                    <div class="event-item-name"><%= event.title %></div>
                    <div class="event-item-location"><%= event.location %></div>
                  </div>
                <% }); %>
            </div>
          </script>
        </div>

4. Finally, initialize the plugin in jQuery document ready function with default settings.

$(document).ready(function(){

$('#full-clndr').clndr();

});

5. To add events in calendar, load the plugin with following syntax.

$( function() {

  // PARDON ME while I do a little magic to keep these events relevant for the rest of time...
  var currentMonth = moment().format('YYYY-MM');
  var nextMonth    = moment().add('month', 1).format('YYYY-MM');

  var events = [
    { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
    { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
    { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
    { date: nextMonth + '-' + '07',    title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
  ];

  clndr = $('#full-clndr').clndr({
    template: $('#full-clndr-template').html(),
    events: events,
    forceSixRows: true
  });
});

This awesome jQuery plugin is developed by Kyle Stetz. Please check the demo page or official repository for more advance usage.




Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...