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:

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