Getting Started

jqxScheduler

The jqxScheduler widget displays a set of Appointments in Day, Week, Month, Timeline Day, Timeline Week and Timeline Month views.

The first step is to create html page and add links to the javascript files and CSS dependencies to your project. The jqxScheduler plugin requires the following files:


The next step is to create a DIV element within the body of the html document.
The last step is to select the DIV element and to build the widget by calling the jqxScheduler constructor.

To set a property (option), you need to pass the property name and value(s) in the jqxScheduler's constructor. 
    $("#element").jqxScheduler({ showLegend: true });
To get a property(option), you need to pass the property name to the jqxScheduler's constructor. 
    var showLegend = $("#element").jqxScheduler('showLegend');

Working with jqxDate

jqxDate is a plug-in which is used by jqxScheduler for getting and setting dates.
There are several ways of instantiating a date:
var d = new $.jqx.date();
var d = new $.jqx.date(milliseconds);
var d = new $.jqx.date(dateString);
var d = new $.jqx.date('todayDate'); 
var d = new $.jqx.date(jsDate);
var d = new $.jqx.date(year, month, day, hours, minutes, seconds, milliseconds);

jqxDate Methods:

Working with Time Span

$.jqx.timeSpan is part of jqxdate.js.

Create from ticks

var milliseconds = 500;
var ticks = milliseconds * 10000;
var duration = $.jqx.timeSpan(ticks);

Create from {days, hours, minutes, seconds, milliseconds} object

var timeSpan = new $.jqx.timeSpan(1, 0, 0, 0);
$.jqx.timeSpan Methods:

Get the Total Days between two Dates

// to and from are $.jqx.date Objects
var milliseconds = to - from;
var ticks = milliseconds * 10000;
var timeSpan = new $.jqx.timeSpan(ticks);

Basic Scheduler Sample

The result of the above code is: