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

Billy Cheng
Dec 18, 2019 · 3 min read

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 . All the dependencies will be properly downloaded and install under your directory.

Integrate with your Rails front end

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

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

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Billy Cheng

Written by

Share my tips and codes on my work with Ruby on Rails — Hong Kong

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Billy Cheng

Written by

Share my tips and codes on my work with Ruby on Rails — Hong Kong

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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