How I add a Calendar to my Ruby on Rails 6 app using CLNDR.js

When I am building my app, I need to add a calendar to show a list of events to remind me of the appointments and schedules. Recently I have been exploring with a JQuery plugin called CLNDR. Unlike many other calendar libraries, this library provides the data and you are responsible for the HTML template with an optional template engine of your choice. I chose the Mustache.js for my project. Here is what I do:

• Installation of the JS libraries
• Integrate with your Rails front end
• An example

Installation of the JS libraries

CLNDR is a jQuery plugin. It requires only 2 dependencies:

• jQuery
• Moment.js

Optional, we chose Mustache as our template rendering engine:

• Mustache.js

In a Rails app, you can easily install using yarn to install yarn install clndr mustache. All the dependencies will be properly downloaded and install under your node_modules directory.

Integrate with your Rails front end

Now that you have all the necessary prerequisites, you can include them in your application.js.

Application.js
//= require mustache/mustache.min
//= require moment/moment
//= require clndr/clndr.min

An example

We first define our calendar template in a view. The mustache template is self explantory and it’s using double parenthesis to enclose the variable and using {{#}} and {{/}} for a loop.

Mustache template
<div id="full-clndr" class="clearfix">
  <script type="x-tmpl-mustache" id="full-clndr-template">
  <div class="clndr">
    <div class="clndr-controls">
      <div class="clndr-previous-button">&lt;</div>
      <div class="clndr-next-button">&gt;</div>
      <div class="current-month">{{month}} {{year}}</div>
    </div>
    <div class="clndr-grid">
      <div class="days-of-the-week">
        {{#daysOfTheWeek}}
          <div class="header-day">{{.}}</div>
        {{/daysOfTheWeek}}
      </div>
      <div class="days">
        {{#days}}
          <div class="{{classes}}" id="{{id}}"><span class="day-number">{{day}}</span></div>
        {{/days}}
      </div>
    </div>
    <div class="event-listing">
      <div class="event-listing-title">THIS MONTH</div>
        {{#eventsThisMonth}}
          <div class="event-item">
            <div class="event-item-name">{{title}}</div>
            <div class="event-item-location">{{location}}</div>
          </div>
        {{/eventsThisMonth}}
    </div>
   </div>
  </script>
</div>
// All the variables you can access in the template:
daysOfTheWeek: [‘S’,’M’,’T’, etc...]
numberOfRows: 5
days: [{ day, classes, id, events, data }]
month: ”December”
year: ”2019”
eventsThisMonth: []
eventsLastMonth: []
eventsNextMonth: []
// You can define custom variables when initializing your clndr object and access here in your template.
extras: {}

JavaScript
// Initiate calendar
var clndr = {};
$(function() {
  var currentMonth = "2019-12";
  var nextMonth    = "2020-01";
  var events = [
    { date: '2019-12-10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
    { date: '2019-12-19', title: 'Cat Frisbee', location: 'Jefferson Park' },
    { date: '2019-12-23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
    { date: '2020-01-07',    title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
  ];
  var clndrTemplate = $('#full-clndr-template').html();
  clndr = $('#full-clndr').clndr({
    // template: $('#full-clndr-template').html(),
    render: function(data) {
      return Mustache.render(clndrTemplate, data);
    },
    events: events,
    forceSixRows: true
  });
});

A demonstration of calendar with events

The JQuery plugin CLNDR is a worthy choice for your next project should you required a calendar component. The decoupling of the calendar data and layout makes it highly customizable and tailor to the needs of your project or client’s needs. Do check it out!