An Hour with CLNDR

The other day I needed a client-side calendar to build something. I guess I’m not quite normal because I needed something that didn’t come pre-styled, and that seemed to be the most popular thing. I needed to build this:

screenshot of CLNDR

It also needed to support paging through multiple months, selection, min and max dates, and event hooks. Most calendar libraries looked painful to customize to this look, though perhaps I was mistaken. In terms of time-investment, I expected the worst. Then I found CLNDR.

I spent about 15 minutes reading the documentation and about an hour implementing it and then...I was done. That was way better than I was expecting.

CLNDR is a jQuery plugin. It has a default template (which was almost exactly what I wanted) but I ended up creating my own. Here's the JavaScript for configuring my CLNDR.


//grab my custom template from the page
var templateText = $('#calendar-template').html();
var templateFunc = _.template(templateText);

$('#calendar').clndr({
  //easy to customized the days of the week
  daysOfTheWeek: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],

  startWithMonth: moment(),

  clickEvents: {
    click: function(target) {
      //How I am toggling selected day
      $('.selected-day').removeClass('selected-day');
      target.element.classList.toggle('selected-day');
    }
  },

  constraints: { //You can constrain the available months
        startDate: moment(),
        endDate: '2022-01-01'
  },

  render: function(data) {
    //use my custom template
    return templateFunc(data);
  }
});

And my SCSS.


#calendar {

  .clndr {
    margin: 0 auto;
    max-width: 600px;
  }

  td {
    color: #b7b7b7;
    padding: 8px 15px;
    text-align: center;
  }

  .day-contents {
    font-family: 'FuturaExtraBold', sans-serif;
    letter-spacing: 0.1em;
    font-size: 2.375em;
  }

  .header-day {
    font-family: 'FuturaExtraBold', sans-serif;
    letter-spacing: 0.1em;
    font-size: 0.9em;
    color: #7c5e53;
    text-transform: uppercase;
  }

  .month {
    font-family: 'FuturaExtraBold', sans-serif;
    letter-spacing: 0.1em;
    font-size: 2.375em;
    color: #7c5e53;
    text-align: center;
  }

  .clndr-next-button::after {
    content: '>'
  }

  .selected-day {
    color: #b45d64;
  }
}

I am very happy with my choice. If you need a client-side calendar, check out CLNDR.

comments powered by Disqus