The Startup
Published in

The Startup

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:

Optional, we chose Mustache as our template rendering engine:

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 class="clndr-grid">
<div class="days-of-the-week">
<div class="header-day">{{.}}</div>
<div class="days">
<div class="{{classes}}" id="{{id}}"><span class="day-number">{{day}}</span></div>
<div class="event-listing">
<div class="event-listing-title">THIS MONTH</div>
<div class="event-item">
<div class="event-item-name">{{title}}</div>
<div class="event-item-location">{{location}}</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!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store