JavaScript

A Comparison of JavaScript Calendars and Schedulers

Sergey Laptick
Share

The days are moving fast, and modern people will choose an online schedule app rather than a bunch of sticky notes to organize their life. Online apps can be used on a smart-phone or laptop. And there’s no need to synchronize data between devices. If you want to create your own calendar or scheduler but don’t know where to start, have no fear. This article’s aim is to help you with your decision.

Why create your own scheduler instead of using the existing ones? Well, here are some use cases:

  • When you build an Intranet application that should not necessarily have access to the outer web. In this case, you’ll probably want a standalone component that doesn’t require external services and will store data where you want it to. Or if you wish to have a full control over your app and don’t want to rely on external services
  • When you use a scheduler to visualize and manage data that you already have in your system, and it’s doesn’t necessarily consist of “appointments” that are defined by date/title/description. This data can contain, for example, various entities with a lot of business rules involved
  • When you need some advanced functionality, that is not supported by Google Calendar. Or when you need to customize the appearance or logic of a component, e.g. multiple resource views, showing working/non-working hours, etc.

We’ll take a look at three different types of JavaScript calendars:

Creating the Scheduler

Office calendar planner on the coffee table with a cup of coffee.

Before getting started, let’s define what characteristics are valuable for us:

  • Terms of use
  • Appearance
  • Usability
  • Coding complexity

Well, let’s start now.

Kendo UI Scheduler

You should get the full library package to use this scheduler. Alternatively, custom download allows you to choose the modules you want, but you need to have a commercial license to use it. To get the 30-day trial, you need to register by filling a web form or via your social network account. By the way, there’s also a free open-source version of Kendo UI available. It is called Kendo UI Core, and you can check the details on this GitHub page. But, unfortunately, the scheduler is not one of its parts.

After you extract the library, you can create a basic scheduler. First, include the required files:

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

Notice that you should include jQuery before the Kendo UI JavaScript files.

The next step is to define the styles. Besides the styling the <html> and <body> tags, you should define the proper style for the scheduler’s container to make it look good in full-screen mode.

html, body{
  margin:0;
  padding:0;
  height: 100%;
}
#scheduler {
  border-width: 0;
  height: 100%;
}

Now you can use the constructor to initialize the scheduler:

<div id="scheduler"></div>

$("#scheduler").kendoScheduler({
  // The current date of the scheduler
  date: new Date(),
  views: [
    "day",
    { type: "week", selected: true },
    "month"
  ]
});

The views property allows you to enable the Day, Week and Month views and choose the initially selected one.

This code will create a basic scheduler that is shown below:

Kendo UI basic scheduler

A double-click will open the new event creation window.

Kendo UI New event

Created events are draggable, so you can rearrange them if you need. Another handy feature is a mini calendar that is helpful for navigation through the schedule.

Kendo UI Mini calendar

The Show business hours/Show full day toggle button will help to filter your work time events from the regular ones. You can find it at the bottom of the scheduler:

Kendo UI business hours

The scheduler is intuitive and has all the basic functions you may need. You can create an event and move it through the calendar grid. Additional features such as Mini calendar and Show business hours button are rather handy.

That’s all that we can get by default, so let’s move along.

FullCalendar

This calendar is released under the MIT License, so there’s almost no restrictions on how you can use it. There are different ways you can install this calendar: you can use Bower, add the required files to your page via CDNJS, or download the package with JavaScript and CSS files. Check the download page for more details.

One more thing before moving forward. Since FullCalendar is a jQuery plugin, don’t forget to add it to your page. Another dependency is Moment.js, a JavaScript library for working with dates. Here’s how you might include the files in your page in case you use a CDN:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css' />

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js'></script>

After that, you can define a DIV container that will hold the calendar, define CSS rules if needed and, finally, initialize the calendar. For example, we have a container:

<div id='calendar'></div>

Here’s what the initialization process looks like:

$(document).ready(function() {
  // page is ready
  $('#calendar').fullCalendar({
      // calendar properties
  })
});

As you can see, there’s not much code you need to make this calendar work. And, by default, there are not so many features you can use.

Here you can see how the default scheduler looks:

FullCalendar Default View

This is the month view with the current date highlighted, the possibility to change the displayed month, and a Today button. That’s all. You see, FullCalendar is some kind of DIY-tool. There’s a lot of handy features you can use, but the default calendar is very basic. It’s a good choice if you want to create minimalistic applications that have only the required minimum of features.

Let’s write some code to make our app look and work better:

// enable theme
theme: true,
// emphasizes business hours
businessHours: true,
// event dragging & resizing
editable: true,
// header
header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
},

Since we want to use a custom theme, we should add the required CSS file:

<link rel='stylesheet' href='./lib/cupertino/jquery-ui.min.css' />

Almost done! The final step is to define some events to render. There are different ways you can define events: as an array, as a JSON feed, and even as a function.

Here’s an example:

events: [
  // all day event
  {
    title  : 'Meeting',
    start  : '2015-11-12'
  },
  // long-term event 
  {
    title  : 'Conference',
    start  : '2015-11-13',
    end    : '2015-11-15'
  },
  // short term event 
  {
    title  : 'Dentist',
    start  : '2015-11-09T11:30:00',
    end  : '2015-11-09T012:30:00'
    allDay : false // will make the time show
  }
]

Now, let’s check the result:

FullCalendar. Second Try

Much better this time! Now, you can change the view, drag and resize the existing events, business hours are emphasized, and the week and day views filter all day events from the other ones:

Full Calendar week view

Here’s the overall impression of FullCalendar. It was designed as a lightweight tool that gives you full control over your app. You can create a low-functional basic application and then add the features you want one by one. And there are plenty of them: coloring, events, existing view customization, etc. Check this documentation page for the full list.

dhtmlxScheduler

If you check the download page, you will notice that there is a free Standard Edition available. Moreover, there are two special editions available: the Mobile Version and Windows 8 version. You can buy a PRO Edition if you want to get extended functionality.

To create a basic chart you should include some files from the codebase folder to your HTML file:

<script src="codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" />

Now we can define the necessary <div></div> sections:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
  <div class="dhx_cal_navline">
    <div class="dhx_cal_prev_button">&nbsp;</div>
    <div class="dhx_cal_next_button">&nbsp;</div>
    <div class="dhx_cal_today_button"></div>
    <div class="dhx_cal_date"></div>
    <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
    <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
    <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
  </div>
  <div class="dhx_cal_header"></div>
  <div class="dhx_cal_data"></div>
</div>

And finally, we can initialize our scheduler:

<body onload="init();">
<!--insert your divs here-->

function init() {
  scheduler.init('scheduler_here',new Date(),"week");
}

The init() method initializes a dhtmlxScheduler object. In this case, the scheduler will be initialized within the previously defined scheduler_here container. new Date() will set the current date as the scheduler initial date value. The "week" parameter sets the initial view. Its possible values are "day", "week" and "month".

Everything is ready, and we can see how the default scheduler looks:

dhtmlxScheduler default view

By default, there is a possibility to switch between the Day, Week and Month view. Today’s date is highlighted, but if you lose yourself within the schedule, use the Today button.

You can create a new event by double-clicking on the proper calendar area. Resizing an event will change its duration. Drag-and-drop event reordering is available as well.

dhtmlxScheduler new item

To create a long-term event you should use the Details button at the event’s left side.

dhtmlxScheduler long-term event

To change its place in your schedule, you should select the Month view.

dhtmlxScheduler month view

Overall Results

Kendo UI Scheduler

Kendo UI is big and advanced JavaScript framework. It contains tons of widgets and tools. Maybe it’s not a good idea to use its Scheduler Widget if you’re not interested in other components. The Kendo UI documentation is well written, and you can check a bunch of Scheduler demos supplemented with code examples. Regarding the coding, it won’t take much time to build a basic scheduler and add some features to it. The default view is little bit plain, but it’s easy to change that.

FullCalendar

This is a good choice for those who know what they want. There are no detailed step-by-step guides that describe what to do to get the goal. Only a brief Getting Started Guide and Documentation Page. Lightweight.

dhtmlxScheduler

This is quite a good choice if a scheduler is all that you want. There is an example of integration with Google maps, so you can extend the basic functionality if you need. The documentation page contains a set of guides that may be useful for the beginners. The bunch of <div> containers needed to make this scheduler work may confuse you to begin with, but the overall coding process is quite explicit.