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>
<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!

--

--

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