blog

  • Home
  • blog
  • A Comparison of JavaScript Calendars and Schedulers

A Comparison of JavaScript Calendars and Schedulers

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 scheduler but don’t know where to start from, 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:

[author_more]

  • 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 schedulers:

Creating the Scheduler

Child writing in a calendar

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.

Continue reading %A Comparison of JavaScript Calendars and Schedulers%

LEAVE A REPLY