Getting Started with JavaScript Schedule

6 Dec 20236 minutes to read

To render the Schedule control, the following list of external dependencies are needed,

jQuery - 1.7.1 and later versions
jsRender - to render the templates
jQuery.easing - to support animation effects in the components

The other required internal dependencies are tabulated below,

File	Description/Usage
ej.core.min.js	Must be referred always first before using all the JS controls.
ej.data.min.js	Used to handle data operation and should be used while binding data to JS controls.
ej.globalize.min.js	Must be referred to localize any of the JS control's text and content.
ej.schedule.min.js	Schedule core script file which includes schedule related scripts files such as ej.schedule.render.js, ej.schedule.resources.js and ej.schedule.horizontal.js
ej.scroller.js ej.touch.js ej.draggable.js ej.navigationdrawerbase.js ej.listviewbase.js ej.listview.js ej.recurrenceeditor.js ej.dropdownlist.js ej.radiobutton.js ej.dialog.js ej.button.js ej.autocomplete.js ej.datepicker.js ej.timepicker.js ej.checkbox.js ej.editor.js ej.menu.js ej.navigationdrawer.js ej.tooltip.js	These files are referred for proper working of the sub-controls used within Scheduler.

NOTE

Scheduler uses one or more sub-controls, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the Scheduler, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Script/CSS Reference

Create a new HTML file and include the below initial code.

HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title> </title>
    </head>
    <body>
    </body>
</html>

Refer the CSS file from the specific theme folder to your HTML file within the head section. Refer the built-in available themes from here.

HTML

<head>
    <meta charset="utf-8" />
    <title>Getting Started - Schedule</title>
    <link href="http://cdn.syncfusion.com/20.4.0.38/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
</head>

Add links to the CDN Script files with other required external dependencies.

HTML

<head>
    <meta charset="utf-8" />
    <title>Getting Started - Schedule</title>
    <link href="http://cdn.syncfusion.com/20.4.0.38/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/20.4.0.38/js/web/ej.web.all.min.js"></script>
</head>

NOTE

Uncompressed version of library files are also available which is used for development or debugging purpose and can be generated from the custom script here.

Control Initialization

Create a Div element within the body section of the HTML document, where the Scheduler needs to be rendered.

HTML

<body>
	<div id="schedule"></div>
</body>

Initialize the Schedule control by adding the following script code to the body section of the HTML document.

HTML

<body>
    <!-- div for Scheduler creation -->    
    <div id="schedule"></div>
	
    <script type="text/javascript">
        // To initialize Scheduler
        $(function () {
            $("#schedule").ejSchedule();
        });
    </script>
</body>

Data Binding

Scheduler uses ejDataManager which supports both RESTful JSON data services binding and local JSON array binding. The dataSource property of the Scheduler can be assigned either with the instance of ejDataManger or JSON data array collection.

For demo purpose, remote data URL is used here and the code example is as follows.

HTML

<!--Container for ejScheduler widget-->
<div id="schedule"></div>

<script type="text/javascript">
$(function() { // document ready function.
    //DataManager with remote URL
    var dataManager = new ej.DataManager("http://js.syncfusion.com/demos/ejServices/api/Schedule/LoadData");
    $("#schedule").ejSchedule({
        width: "100%",
        height: "600px",
        currentDate: new Date(2014, 4, 5),
        appointmentSettings: {
            dataSource: dataManager
        }
    });
});
</script>

NOTE

While binding Scheduler dataSource to other web services, proper data adaptor needs to be set for adaptor option of DataManager.

Mapper Fields

The appointment fields are needed to be mapped with the appropriate column names from the dataSource as shown below.

HTML

<!--Container for ejScheduler widget-->
<div id="schedule"></div>

<script type="text/javascript">
$(function() { // Document is ready
    //DataManager with remote URL
    var dataManager = new ej.DataManager("http://js.syncfusion.com/demos/ejServices/api/Schedule/LoadData");
    $("#schedule").ejSchedule({
        width: "100%",
        height: "600px",
        currentDate: new Date(2014, 4, 5),
        appointmentSettings: {
            dataSource: dataManager,
            id: "Id",
            subject: "Subject",
            startTime: "StartTime",
            endTime: "EndTime",
            allDay: "AllDay",
            recurrence: "Recurrence",
            recurrenceRule: "RecurrenceRule"
        }
    });
});	
</script>

JavaScript Schedule Mapper Fields.