Creating Online Event Calendar with dhtmlxScheduler

Creating Online Event Calendar with dhtmlxScheduler

0 47545
dhtmlxScheduler

dhtmxScheduler is a JavaScript tool that allows you to create your own online event calendar. In this article we’ll try to create an application of such a kind and then add some extra features to it. There are several ways of data loading among which you can choose. With dhtmlxScheduler, you can use three formats: JSON, XML and iCal. You can use either an inline object or a file as a source of data. Moreover, there’s a possibility to use a database. If you prefer this opportunity, you should have a web server (e.g. Apache or nginx) with PHP and MySQL running. We’ll take a look at both inline object and database options, so you’ll be able to choose which one you want to try.

Before getting started, you should download the scheduler package and extract the codebase folder within the working directory. It can be a regular folder if you want to test this scheduler using inline data or a local web server folder in case you want to try using a database.

Data Formats

Before we initialize the calendar, it’s better to prepare some data to visualize. The easiest of possible ways is to create an array and use it as a data source. One more possibility is to create a database along with a server-side script that will handle database connection. This approach will allow you to save existing events between sessions.

Inline JSON data

If you want to create an array of data, you should learn what properties you can use. It will be easy since there are only four of them:

  • `id` is the event ID. Number for a calendar
  • `start_date` is the date when an event is supposed to start. By default, its format is “%m/%d/%Y %H:%i”
  • `end_date` is the date when an event ends
  • `text` property contains the description of an event

Nothing unusual, as I’ve said. Now you can create a sequence of events:

var events = [
        {id:1, text:"Dentist", start_date:"08/11/2015 14:00",
         end_date:"08/11/2015 15:00"},
        {id:2, text:"Conference", start_date:"08/12/2015 12:00",
         end_date:"08/12/2015 19:00"},
        {id:3, text:"Kayaking", start_date:"08/15/2015 09:00",
         end_date:"08/16/2015 22:00"}
];

That’s all you need to do. We’ll soon render this data on the screen, but now let’s create our testing database.

Database

First of all, we need to create a database itself. Here’s the code:

CREATE DATABASE schedule;
USE schedule;
CREATE TABLE `events` (
        `id` int(11) NOT NULL AUTO_INCREMENT,
        `start_date` datetime NOT NULL,
        `end_date` datetime NOT NULL,
        `text` varchar(255) NOT NULL,
        PRIMARY KEY (`id`)
);

Everything went well, so we can proceed:

MySQL database creation

Now we need to create a server-side script that will initialize the connection to our database. Let’s call this file data.php and place it within our working directory.

Here’s the code:

<?php
require_once("../codebase/connector/scheduler_connector.php");
$res=mysql_connect("localhost","root","");
mysql_select_db("schedule");
$conn = new SchedulerConnector($res);
$conn->render_table("events","id","start_date,end_date,text");
?>

Notice that `mysql_connect()` takes a username and a password as its second and third parameters. So, don’t forget to change these values to actual ones.

This code uses dhtmlxConnector that enables access to external data sources. Then it connects to MySQL and selects our previously created database. And, finally, it sets the columns we’ve created as data to render.

So, we’ve finished configuring a database, which means we can initialize a scheduler.

Scheduler Initialization

Let’s now create an HTML file that will contain the required code. I’ve called it index.html. We should include the required files first:

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

Now we can define required DIV containers. Put this code between your <body></body> tags:

<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>

It may seem a little bit messy. So many DIV’s! Guess, it’s just something you should overcome.

Now we should define the proper style. We’ll use the full-screen mode in this example. Here’s the code we need:

<style media="screen">
        html, body{
                margin:0px;
                padding:0px;
                height:100%;
                overflow:hidden;
        }
</style>

After that we can initialize the scheduler at last:

scheduler.init('scheduler_here', new Date(),"month");

In this code, the init() constructor initializes a scheduler within the scheduler_here DIV container, sets the current date as the initial one and then uses Month as the default view. There are also Day and Week views available.

Well, this is it. That’s all you need to create a calendar. Include the JavaScript and CSS files, define DIV’s and the style, run the constructor and you’ll get your app.

Here’s the result:

Basic Calendar

It allows you to choose one of the available views. As you can see, Month is set by default. Just as planned. Today’s date is highlighted. Moreover, there is the Today button and buttons that allow you to move forward and backward.

Let’s now check how data handling works.

Using Inline Data Source

To use the array we talked about earlier, you can apply this code:

scheduler.parse(events, "json");

This method takes two parameters: the data source (the events array in our case) and the format of data.

Refresh the page and you’ll get this:

Data loading

Here are our events. You can already test your scheduler, add new events, etc. But, as I’ve said before, if you use inline data only, there’s no possibility to save your data. New events you’ve created will disappear after you refresh the page. But have no fear. We’ve got our database. Let’s use it now.

Database

To avoid the data vanishing issue, we can use the database.

First of all, you should change the default date format. Place this code BEFORE scheduler.init():

scheduler.config.xml_date="%Y-%m-%d %H:%i";

Now, instead of scheduler.parse() you should use the code that will load the existing events from the database and save the created events as well:

/* loading data from the server */
scheduler.load("data.php");
/* saving data */
var dp = new dataProcessor("data.php");
dp.init(scheduler);

We use the load() method for the loading purpose. It takes the path to the server-side script as a parameter. After that, we should use dataProcessor to save data. To do so, initialize it and attach to the scheduler.

Done. Now your data will be safe. Since our database is empty, there will be no events in the scheduler when you refresh your web page. Looks like an excellent opportunity to check how events can be created.

Scheduler Basic Features

One of the possible ways to create a new event is double-clicking on the proper area of the calendar. After that you’ll see the New Event window:

New Event

There’s a possibility to add a description to your event, set the proper beginning and ending dates. When you click the Save button, your event will appear on the screen:

Event

You can drag it over the calendar if you want to change your plans:

Dragging

Let’s now talk about the long-term events. One of the possibilities is to set the proper term when you’re creating a new event. Another way is to use the drag-and-drop functionality. All you need to do is to click on the day your event begins on and then drag the cursor to the event’s end:

Long term event

Then you’ll see the familiar New Event window.

What else? You can change the duration of an event nearly the same way. Just alter the size of the proper event. It may be more convenient to do it after you’ve changed the view according to the initial event duration. For example, you can use the Week view for short events:

Event resizing

Seems that it’s all that we can get from the basic scheduler. But don’t worry. There’s a possibility to extend the existing functionality.

Adding New Features

This guides page contains a bunch of guides that can help you customize your application. There are styling guides, extensions guides, data export guides, etc. Let’s try to implement a couple of possibilities.

Changing the Skin

Let’s start with a simple one. Besides the default one, there are three other skins available: Glossy, Classic, and Flat. All you need to do to set another skin is to change the included CSS file.

For example, if you change this:

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

To this:

<link rel="stylesheet" href="./codebase/dhtmlxscheduler_flat.css">

You’ll change the skin from Default to Flat.

The result is shown below:

Flat Skin

Export to PDF

Another useful feature is export. There is a possibility to export your scheduler to different file formats such as PNG, PDF, Excel, etc. Let’s concentrate on PDF since this option provides you with different handy properties.

To enable the exporting feature, you should include this JavaScript file to your project:

<script src="http://export.dhtmlx.com/scheduler/api.js"></script>

Next step is to add the Export button to your page:

<input value="Export" type="button" onclick="exportTo()">

You can place it right under your scheduler for testing purposes. But don’t forget to change the default `height` value of the scheduler that is 100% initially.

For example:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:90%; margin-bottom: 10px'>

Here’s our testing button:

Export button

When you click it, the exportTo() function will be called. We’ll use the scheduler.exportToPDF() method within it. And this is where you can define the properties of the output file.

Here they are:

  • `name` is the output file name
  • `format` defines the output file format (e.g. ‘A0’, ‘A1’, ‘A2’, ‘A3’, ‘A4’, ‘A5’)
  • `orientation` specifies the screen orientation; there are two possible values: “portrait” and “landscape”
  • `zoom` contains the number that sets the zoom coefficient
  • `header` and `footer` are strings that will be added to the output file. HTML is allowed here

Using these properties you can define the export function:

function exportToPdf() {
        scheduler.exportToPDF({
                name: "my_schedule.pdf",
                format:"A4",
                orientation:"landscape",
                zoom:1,
                header:"<h1>August, 2015</h1>",
        });
};

That’s all you need to convert your data to PDF.

Conclusion

It was my choice of scheduler library, it’s free (though has paid version as well), simple and have modern look and feel. It wasn’t my intention to make you start using it, I just want to share my positive experience. dhtmlxScheduler allowed me to build an online time management application in a few easy steps.

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply