A Calendar Widget with no Dependencies

published on January 22, 2012 in technical

I needed recently some calendar widget, which could not depend on any Javascript library, for size and load reasons. At that time, I was thinking to create one, due to not being able to find any which fullfilled my needs. In the end, I used a simple dropdown. But now we have Kalendae. Let me show you a few examples of how it should be used.

1. The Goal.

As stated on the Github page, the goal of the developer team was to create a datepicjer that doesn't suck. And I must say I aggree. There are many datepickers out there, but not so many that may be called good. One of them is the jQuery datepicker, which is ok, but it neads jQuery. Loading jQuery just to have a datepicker available, should not be the case.

2. Features

  • No dependencies
  • Fully and easily skinable
  • Single day, multiple day and date range selection (range, hurray!)
  • It may be displayed inline, or as a widget
  • moment.js already bundled, for increased ease of usage

3. Usage

Include the downloaded scripts in your HTML document:

<link rel="stylesheet" href="kalendae.css" type="text/css">
<script src="kalendae.js" type="text/javascript"></script>

Then, for the simplest way of use, you only need to add a class to the element you want to hook Kalendae to.

<div class="auto-kal"></div>
<input type="text" class="auto-kal" />

I case this is not enough for you, then you should use the manual initialization of Kalendae. For this to work, you must imstantiate on of the two objects:

  • Kalendae, the widget class
  • Kalendae.input, the input element popup class

Both take two parameters, a target element and a options collection. The options collection well documented on the Github page.

4. Examples

I put together some examples, you may find them here. THe source code is going to be of some help, if needed.
There are two examples here. The first one is just a simple trigger by class name, the other is by manual setup.