Sets or gets the appointments opacity.

Sets or gets the minimum height of appointments in the all day area, month view and timeline views.

Sets or gets the appointments data fields. A data field should match a field defined in the dataAdapter's source object. For example: If your have a data field called "start" in your source object, you should add 'from: "start"' in the appointmentDataFields definition.

• allDay - boolean field. Defines whether the appointment is all day appointment.
• background - string field. Expects Hex string. Defines the appointment's background.
• borderColor - string field. Expects Hex string. Defines the appointment's border color.
• color - string field. Expects Hex string. Defines the appointment's text color.
• description - string field. Defines the appointment's description.
• draggable - boolean field. Defines whether the user can drag the appointment.
• from - jqxDate field. Defines the appointment's start.
• hidden - boolean field. Defines whether the appointment is displayed.
• id - string/number field. Defines the Id of the appointment.
• location - string field. Defines the appointment's location.
• recurrencePattern - string field. Defines the appointment's recurrence rule. Ex: "FREQ=DAILY;". List of supported keywords:
  • FREQ - "DAILY" / "WEEKLY" / "MONTHLY" / "YEARLY". The FREQ rule part identifies the type of recurrence rule. This rule part MUST be specified in the recurrence rule.
  • COUNT - number. The Count rule part defines the number of occurrences at which to range-bound the recurrence.
  • UNTIL - string like "UNTIL=20160919T210000Z". The UNTIL rule part defines a date-time value where the recurrence ends.
  • BYDAY - string like "MO,TU". The BYDAY rule part specifies a COMMA character (US-ASCII decimal 44) separated list of days of the week; MO indicates Monday; TU indicates Tuesday; WE indicates Wednesday; TH indicates Thursday; FR indicates Friday; SA indicates Saturday; SU indicates Sunday. Each BYDAY value can also be preceded by a positive (+n) or negative (-n) integer. If present, this indicates the nth occurrence of the specific day within the MONTHLY or YEARLY RRULE. For example, within a MONTHLY rule, +1MO (or simply 1MO) represents the first Monday within the month, whereas -1MO represents the last Monday of the month.
  • BYMONTHDAY - string like 15, 30. The BYMONTHDAY rule part specifies a COMMA character (ASCII decimal 44) separated list of days of the month. Valid values are 1 to 31
  • BYMONTH - number like 1. The BYMONTH rule part specifies a month of the year. Valid values are 1 to 12.
  • INTERVAL - number like 1. The INTERVAL rule part contains a positive integer representing how often the recurrence rule repeats. The default value is "1",
  Examples: "FREQ=WEEKLY;BYDAY=MO,WE", "FREQ=MONTHLY;BYMONTHDAY=10,15;COUNT=20", "FREQ=DAILY;INTERVAL=3;COUNT=10", "FREQ=MONTHLY;BYDAY=-2FR;COUNT=7", "FREQ=YEARLY;COUNT=30;BYMONTH=3"
• recurrenceException - string field. Defines the exceptions of the recurrence rule. The bound value should be a string or comma separated list of Date strings. Example: "2016-11-24 09:00:00,2016-11-26 12:00:00"
• resizable - boolean field. Defines whether the user can resize the appointment.
• resourceId - string/number field. Defines the appointment's resource.
• readOnly - boolean field. Defines whether the appointment is editable.
• subject - string field. Defines the appointment's subject.
• style - string field. Expects Hex string. Defines the appointment's style. When defined it sets the background, border color and text color of the appointment.
• status - string field. Defines the appointment's status. See the statuses property for available statuses.
• to - jqxDate field. Defines the appointment's end.
• tooltip - string field. Defines the appointment's tooltip displayed on mouse hover.
• timeZone - string field. Defines the appointment's time zone. See timeZones for the list of timeZones.

Code example

Set the appointmentDataFields property.

$("#jqxScheduler").jqxScheduler({appointmentDataFields:
{
	from: "start",
	to: "end",
	id: "id",
	description: "description",
	location: "place",
	subject: "subject",
	style: "style",
	resourceId: "calendar"
}
});
						

Get the appointmentDataFields property.

const appointmentDataFields = $('#jqxScheduler').jqxScheduler('appointmentDataFields');

Sets or gets whether Scheduler appointments are with tooltips enabled.

Code example

Set the appointmentTooltips property.

$("#jqxScheduler").jqxScheduler({ appointmentTooltips: true });
						

Get the appointmentTooltips property.

const appointmentTooltips = $('#jqxScheduler').jqxScheduler('appointmentTooltips');

Sets or gets the Schedulers' columns height.

Code example

Set the columnsHeight property.

$("#jqxScheduler").jqxScheduler({ columnsHeight: 35 });
						

Get the columnsHeight property.

var columnsHeight = $('#jqxScheduler').jqxScheduler('columnsHeight');

Sets or gets whether the Scheduler's context menu is enabled.

Code example

Set the contextMenu property.

$("#jqxScheduler").jqxScheduler({ contextMenu: false });
						

Get the contextMenu property.

var contextMenu = $('#jqxScheduler').jqxScheduler('contextMenu');

Sets or gets a function called when the context menu is opened.

Code example

Set the contextMenuOpen property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const appointments = new Array();
            const appointment1 = {
                id: "id1",
                description: "George brings projector for presentations.",
                location: "",
                subject: "Quarterly Project Review Meeting",
                calendar: "Room 1",
                start: new Date(2016, 10, 23, 9, 0, 0),
                end: new Date(2016, 10, 23, 16, 0, 0)
            }
            const appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Group Mtg.",
                calendar: "Room 2",
                start: new Date(2016, 10, 24, 10, 0, 0),
                end: new Date(2016, 10, 24, 15, 0, 0)
            }
            const appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Course Social Media",
                calendar: "Room 3",
                start: new Date(2016, 10, 27, 11, 0, 0),
                end: new Date(2016, 10, 27, 13, 0, 0)
            }
            const appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                start: new Date(2016, 10, 23, 16, 0, 0),
                end: new Date(2016, 10, 23, 18, 0, 0)
            }
            const appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2016, 10, 25, 15, 0, 0),
                end: new Date(2016, 10, 25, 17, 0, 0)
            }
            const appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 4",
                start: new Date(2016, 10, 26, 14, 0, 0),
                end: new Date(2016, 10, 26, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);
            // prepare the data
            var source =
            {
                dataType: "array",
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                view: 1,
                showLegend: true,
                /**
                 * called when the context menu is created.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} settings - object with the menu's initialization settings.
                */
                contextMenuCreate: function(menu, settings)
                {
                    var source = settings.source;
                    source.push({ id: "delete", label: "Delete Appointment" });
                    source.push({
                        id: "status", label: "Set Status", items:
                            [
                                { label: "Free", id: "free" },
                                { label: "Out of Office", id: "outOfOffice" },
                                { label: "Tentative", id: "tentative" },
                                { label: "Busy", id: "busy" }
                            ]
                    });
                },
                /**
                 * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected appointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the jqxMenu's itemclick event object.
               */
                contextMenuItemClick: function (menu, appointment, event)
                {
                    var args = event.args;
                    switch (args.id) {
                        case "delete":
                            $("#scheduler").jqxScheduler('deleteAppointment', appointment.id);
                            return true;
                        case "free":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'free');
                            return true;
                        case "outOfOffice":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'outOfOffice');
                            return true;
                        case "tentative":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'tentative');
                            return true;
                        case "busy":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'busy');
                            return true;
                    }
                },
                /**
                 * called when the menu is opened.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected appointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the open event.
                */
                contextMenuOpen: function (menu, appointment, event) {
                    if (!appointment) {
                        menu.jqxMenu('hideItem', 'delete');
                        menu.jqxMenu('hideItem', 'status');
                    }
                    else {
                        menu.jqxMenu('showItem', 'delete');
                        menu.jqxMenu('showItem', 'status');
                    }
                },
                /**
                 * called when the menu is closed.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected appointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the close event.
               */
                contextMenuClose: function (menu, appointment, event) {
                },
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                },
                resources:
                {
                    colorScheme: "scheme02",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
</body>
</html>

Get the contextMenuOpen property.

var contextMenuOpen = $('#jqxScheduler').jqxScheduler('contextMenuOpen');

Sets or gets a function called when the context menu is closed.

Code example

Set the contextMenuClose property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const appointments = new Array();
            const appointment1 = {
                id: "id1",
                description: "George brings projector for presentations.",
                location: "",
                subject: "Quarterly Project Review Meeting",
                calendar: "Room 1",
                start: new Date(2016, 10, 23, 9, 0, 0),
                end: new Date(2016, 10, 23, 16, 0, 0)
            }
            const appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Group Mtg.",
                calendar: "Room 2",
                start: new Date(2016, 10, 24, 10, 0, 0),
                end: new Date(2016, 10, 24, 15, 0, 0)
            }
            const appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Course Social Media",
                calendar: "Room 3",
                start: new Date(2016, 10, 27, 11, 0, 0),
                end: new Date(2016, 10, 27, 13, 0, 0)
            }
            const appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                start: new Date(2016, 10, 23, 16, 0, 0),
                end: new Date(2016, 10, 23, 18, 0, 0)
            }
            const appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2016, 10, 25, 15, 0, 0),
                end: new Date(2016, 10, 25, 17, 0, 0)
            }
            const appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 4",
                start: new Date(2016, 10, 26, 14, 0, 0),
                end: new Date(2016, 10, 26, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);
            // prepare the data
            var source =
            {
                dataType: "array",
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                view: 1,
                showLegend: true,
                /**
                 * called when the context menu is created.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} settings - object with the menu's initialization settings.
                */
                contextMenuCreate: function(menu, settings)
                {
                    var source = settings.source;
                    source.push({ id: "delete", label: "Delete Appointment" });
                    source.push({
                        id: "status", label: "Set Status", items:
                            [
                                { label: "Free", id: "free" },
                                { label: "Out of Office", id: "outOfOffice" },
                                { label: "Tentative", id: "tentative" },
                                { label: "Busy", id: "busy" }
                            ]
                    });
                },
                /**
                 * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the jqxMenu's itemclick event object.
               */
                contextMenuItemClick: function (menu, appointment, event)
                {
                    var args = event.args;
                    switch (args.id) {
                        case "delete":
                            $("#scheduler").jqxScheduler('deleteAppointment', appointment.id);
                            return true;
                        case "free":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'free');
                            return true;
                        case "outOfOffice":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'outOfOffice');
                            return true;
                        case "tentative":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'tentative');
                            return true;
                        case "busy":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'busy');
                            return true;
                    }
                },
                /**
                 * called when the menu is opened.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the open event.
                */
                contextMenuOpen: function (menu, appointment, event) {
                    if (!appointment) {
                        menu.jqxMenu('hideItem', 'delete');
                        menu.jqxMenu('hideItem', 'status');
                    }
                    else {
                        menu.jqxMenu('showItem', 'delete');
                        menu.jqxMenu('showItem', 'status');
                    }
                },
                /**
                 * called when the menu is closed.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the close event.
               */
                contextMenuClose: function (menu, appointment, event) {
                },
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                },
                resources:
                {
                    colorScheme: "scheme02",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
</body>
</html>

Get the contextMenuClose property.

var contextMenuClose = $('#jqxScheduler').jqxScheduler('contextMenuClose');

Sets or gets a function called when a context menu item is clicked.

Code example

Set the contextMenuItemClick property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const appointments = new Array();
            const appointment1 = {
                id: "id1",
                description: "George brings projector for presentations.",
                location: "",
                subject: "Quarterly Project Review Meeting",
                calendar: "Room 1",
                start: new Date(2016, 10, 23, 9, 0, 0),
                end: new Date(2016, 10, 23, 16, 0, 0)
            }
            const appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Group Mtg.",
                calendar: "Room 2",
                start: new Date(2016, 10, 24, 10, 0, 0),
                end: new Date(2016, 10, 24, 15, 0, 0)
            }
            const appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Course Social Media",
                calendar: "Room 3",
                start: new Date(2016, 10, 27, 11, 0, 0),
                end: new Date(2016, 10, 27, 13, 0, 0)
            }
            const appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                start: new Date(2016, 10, 23, 16, 0, 0),
                end: new Date(2016, 10, 23, 18, 0, 0)
            }
            const appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2016, 10, 25, 15, 0, 0),
                end: new Date(2016, 10, 25, 17, 0, 0)
            }
            const appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 4",
                start: new Date(2016, 10, 26, 14, 0, 0),
                end: new Date(2016, 10, 26, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);
            // prepare the data
            var source =
            {
                dataType: "array",
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                view: 1,
                showLegend: true,
                /**
                 * called when the context menu is created.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} settings - object with the menu's initialization settings.
                */
                contextMenuCreate: function(menu, settings)
                {
                    var source = settings.source;
                    source.push({ id: "delete", label: "Delete Appointment" });
                    source.push({
                        id: "status", label: "Set Status", items:
                            [
                                { label: "Free", id: "free" },
                                { label: "Out of Office", id: "outOfOffice" },
                                { label: "Tentative", id: "tentative" },
                                { label: "Busy", id: "busy" }
                            ]
                    });
                },
                /**
                 * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the jqxMenu's itemclick event object.
               */
                contextMenuItemClick: function (menu, appointment, event)
                {
                    var args = event.args;
                    switch (args.id) {
                        case "delete":
                            $("#scheduler").jqxScheduler('deleteAppointment', appointment.id);
                            return true;
                        case "free":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'free');
                            return true;
                        case "outOfOffice":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'outOfOffice');
                            return true;
                        case "tentative":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'tentative');
                            return true;
                        case "busy":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'busy');
                            return true;
                    }
                },
                /**
                 * called when the menu is opened.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the open event.
                */
                contextMenuOpen: function (menu, appointment, event) {
                    if (!appointment) {
                        menu.jqxMenu('hideItem', 'delete');
                        menu.jqxMenu('hideItem', 'status');
                    }
                    else {
                        menu.jqxMenu('showItem', 'delete');
                        menu.jqxMenu('showItem', 'status');
                    }
                },
                /**
                 * called when the menu is closed.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the close event.
               */
                contextMenuClose: function (menu, appointment, event) {
                },
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                },
                resources:
                {
                    colorScheme: "scheme02",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
</body>
</html>

Get the contextMenuItemClick property.

var contextMenuItemClick = $('#jqxScheduler').jqxScheduler('contextMenuItemClick');

Sets or gets a function called when the context menu is created.

Code example

Set the contextMenuCreate property.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const appointments = new Array();
            const appointment1 = {
                id: "id1",
                description: "George brings projector for presentations.",
                location: "",
                subject: "Quarterly Project Review Meeting",
                calendar: "Room 1",
                start: new Date(2016, 10, 23, 9, 0, 0),
                end: new Date(2016, 10, 23, 16, 0, 0)
            }
            const appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Group Mtg.",
                calendar: "Room 2",
                start: new Date(2016, 10, 24, 10, 0, 0),
                end: new Date(2016, 10, 24, 15, 0, 0)
            }
            const appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Course Social Media",
                calendar: "Room 3",
                start: new Date(2016, 10, 27, 11, 0, 0),
                end: new Date(2016, 10, 27, 13, 0, 0)
            }
            const appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                start: new Date(2016, 10, 23, 16, 0, 0),
                end: new Date(2016, 10, 23, 18, 0, 0)
            }
            const appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2016, 10, 25, 15, 0, 0),
                end: new Date(2016, 10, 25, 17, 0, 0)
            }
            const appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 4",
                start: new Date(2016, 10, 26, 14, 0, 0),
                end: new Date(2016, 10, 26, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);
            // prepare the data
            var source =
            {
                dataType: "array",
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                view: 1,
                showLegend: true,
                /**
                 * called when the context menu is created.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} settings - object with the menu's initialization settings.
                */
                contextMenuCreate: function(menu, settings)
                {
                    var source = settings.source;
                    source.push({ id: "delete", label: "Delete Appointment" });
                    source.push({
                        id: "status", label: "Set Status", items:
                            [
                                { label: "Free", id: "free" },
                                { label: "Out of Office", id: "outOfOffice" },
                                { label: "Tentative", id: "tentative" },
                                { label: "Busy", id: "busy" }
                            ]
                    });
                },
                /**
                 * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the jqxMenu's itemclick event object.
               */
                contextMenuItemClick: function (menu, appointment, event)
                {
                    var args = event.args;
                    switch (args.id) {
                        case "delete":
                            $("#scheduler").jqxScheduler('deleteAppointment', appointment.id);
                            return true;
                        case "free":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'free');
                            return true;
                        case "outOfOffice":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'outOfOffice');
                            return true;
                        case "tentative":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'tentative');
                            return true;
                        case "busy":
                            $("#scheduler").jqxScheduler('setAppointmentProperty', appointment.id, 'status', 'busy');
                            return true;
                    }
                },
                /**
                 * called when the menu is opened.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the open event.
                */
                contextMenuOpen: function (menu, appointment, event) {
                    if (!appointment) {
                        menu.jqxMenu('hideItem', 'delete');
                        menu.jqxMenu('hideItem', 'status');
                    }
                    else {
                        menu.jqxMenu('showItem', 'delete');
                        menu.jqxMenu('showItem', 'status');
                    }
                },
                /**
                 * called when the menu is closed.
                 * @param {object} menu - jqxMenu's jQuery object.
                 * @param {object} the selected jqxAppointment instance or NULL when the menu is opened from cells selection.
                 * @param {jQuery.Event object} the close event.
               */
                contextMenuClose: function (menu, appointment, event) {
                },
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                },
                resources:
                {
                    colorScheme: "scheme02",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
</body>
</html>

Get the contextMenuCreate property.

var contextMenuCreate = $('#jqxScheduler').jqxScheduler('contextMenuCreate');

Gets an array with newly added, deleted or updated appointments. Each element in the Array is an object which has:

• type - "Update", "Delete", "Add".
• appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Get the changedAppointments property.

var changedAppointments = $('#jqxScheduler').jqxScheduler('changedAppointments');

Sets or gets whether the Scheduler is disabled.

Code example

Set the disabled property.

$("#jqxScheduler").jqxScheduler({ disabled: true });
						

Get the disabled property.

var disabled = $('#jqxScheduler').jqxScheduler('disabled');

Sets or gets the Scheduler's Date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

Code example

Set the date property.

$("#jqxScheduler").jqxScheduler({ date: new $.jqx.date('todayDate') });
						

Get the date property.

var date = $('#jqxScheduler').jqxScheduler('date');

Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.

Code example

Set the dayNameFormat property.

$("#jqxScheduler").jqxScheduler({ dayNameFormat: 'abbr') });
						

Get the dayNameFormat property.

var dayNameFormat = $('#jqxScheduler').jqxScheduler('dayNameFormat');

Sets or gets whether cells hover is enabled.

Code example

Set the enableHover property.

$("#jqxScheduler").jqxScheduler({ enableHover: false) });
						

Get the enableHover property.

var enableHover = $('#jqxScheduler').jqxScheduler('enableHover');

Sets or gets whether Edit Dialog is enabled.

Code example

Set the editDialog property.

$("#jqxScheduler").jqxScheduler({ editDialog: false) });
						

Get the editDialog property.

var editDialog = $('#jqxScheduler').jqxScheduler('editDialog');

Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is not allDay appointment.

Code example

Set the editDialogDateTimeFormatString property.

$("#jqxScheduler").jqxScheduler({ editDialogDateTimeFormatString: "dd/MM/yyyy hh:mm tt") });
						

Get the editDialogDateTimeFormatString property.

var editDialogDateTimeFormatString = $('#jqxScheduler').jqxScheduler('editDialogDateTimeFormatString');

Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is allDay appointment.

Code example

Set the editDialogDateFormatString property.

$("#jqxScheduler").jqxScheduler({ editDialogDateFormatString: "dd/MM/yyyy") });
						

Get the editDialogDateFormatString property.

var editDialogDateFormatString = $('#jqxScheduler').jqxScheduler('editDialogDateFormatString');

Determines the Data Export settings used by jqxScheduler when exportData is called. See also the exportData method.

• serverURL - determines the URL of the save-file.php.
• characterSet - determines the char set.
• fileName - determines the file's name. Set this to null if you want to export the data to a local variable.
• dateTimeFormatString - determines the dates formatting in the exported file.
• resourcesInMultipleICSFiles - determines whether multiple ICS files will be generated when the Scheduler has resources. Each file will include appointments only from a specific resource.

Sets or gets the Scheduler's height.

Code example

Set the height property.

$("#jqxScheduler").jqxScheduler({ height: 700});
						

Get the height property.

var height = $('#jqxScheduler').jqxScheduler('height');

Sets or gets the Scheduler's legendPosition. Possible values: "top" and "bottom".

Code example

Set the legendPosition property.

$("#jqxScheduler").jqxScheduler({ legendPosition: 'top'});
						

Get the legendPosition property.

var legendPosition = $('#jqxScheduler').jqxScheduler('legendPosition');

Sets or gets the Scheduler's legend height.

Code example

Set the legendHeight property.

$("#jqxScheduler").jqxScheduler({ legendHeight: 40});
						

Get the legendHeight property.

var legendHeight = $('#jqxScheduler').jqxScheduler('legendHeight');

Sets or gets the Scheduler's localization.

{
	// separator of parts of a date (e.g. '/' in 11/05/1955)
	'/': "/",
	// separator of parts of a time (e.g. ':' in 05:44 PM)
	':': ":",
	// the first day of the week (0 = Sunday, 1 = Monday, etc)
	firstDay: 0,
	days: {
		// full day names
		names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		// abbreviated day names
		namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		// shortest day names
		namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
	},
	months: {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
	},
	// AM and PM designators in one of these forms:
	// The usual view, and the upper and lower case versions
	//      [standard,lowercase,uppercase]
	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
	//      null
	AM: ["AM", "am", "AM"],
	PM: ["PM", "pm", "PM"],
	eras: [
	// eras in reverse chronological order.
	// name: the name of the era in this culture (e.g. A.D., C.E.)
	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
	// offset: offset in years from gregorian calendar
	{"name": "A.D.", "start": null, "offset": 0 }
	],
	twoDigitYearMax: 2029,
	patterns: {
		// short date pattern
		d: "M/d/yyyy",
		// long date pattern
		D: "dddd, MMMM dd, yyyy",
		// short time pattern
		t: "h:mm tt",
		// long time pattern
		T: "h:mm:ss tt",
		// long date, short time pattern
		f: "dddd, MMMM dd, yyyy h:mm tt",
		// long date, long time pattern
		F: "dddd, MMMM dd, yyyy h:mm:ss tt",
		// month/day pattern
		M: "MMMM dd",
		// month/year pattern
		Y: "yyyy MMMM",
		// S is a sortable format that does not vary by culture
		S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
		// formatting of dates in MySQL DataBases
		ISO: "yyyy-MM-dd hh:mm:ss",
		ISO2: "yyyy-MM-dd HH:mm:ss",
		d1: "dd.MM.yyyy",
		d2: "dd-MM-yyyy",
		d3: "dd-MMMM-yyyy",
		d4: "dd-MM-yy",
		d5: "H:mm",
		d6: "HH:mm",
		d7: "HH:mm tt",
		d8: "dd/MMMM/yyyy",
		d9: "MMMM-dd",
		d10: "MM-dd",
		d11: "MM-dd-yyyy"
	},
    agendaViewString: "Agenda",
    agendaAllDaystring: "all day",
    agendaDateColumn: "Date",
    agendaTimeColumn: "Time",
    agendaAppointmentColumn: "Appointment",
	backstring: "Back",
	forwardstring: "Forward",
	toolBarPreviousButtonstring: "previous",
	toolBarNextButtonstring: "next",
	emptyDatastring: "No data to display",
	loadstring: "Loading...",
	clearstring: "Clear",
	todaystring: "Today",
	dayViewstring: "Day",
	weekViewstring: "Week",
	monthViewstring: "Month",
	timelineDayViewstring: "Timeline Day",
	timelineWeekViewstring: "Timeline Week",
	timelineMonthViewstring: "Timeline Month",
	loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",
	editRecurringAppointmentDialogTitlestring: "Edit Recurring Appointment",
	editRecurringAppointmentDialogContentstring: "Do you want to edit only this occurrence or the series?",
	editRecurringAppointmentDialogOccurrencestring: "Edit Occurrence",
	editRecurringAppointmentDialogSeriesstring: "Edit The Series",
	editDialogTitlestring: "Edit Appointment",
	editDialogCreateTitlestring: "Create New Appointment",
	contextMenuEditAppointmentstring: "Edit Appointment",
	contextMenuCreateAppointmentstring: "Create New Appointment",
	editDialogSubjectstring: "Subject",
	editDialogLocationstring: "Location",
	editDialogFromstring: "From",
	editDialogTostring: "To",
	editDialogAllDaystring: "All day",
	editDialogExceptionsstring: "Exceptions",
	editDialogResetExceptionsstring: "Reset on Save",
	editDialogDescriptionstring: "Description",
	editDialogResourceIdstring: "Owner",
	editDialogStatusstring: "Status",
	editDialogColorstring: "Color",
	editDialogColorPlaceHolderstring: "Select Color",
	editDialogTimeZonestring: "Time Zone",
	editDialogSelectTimeZonestring: "Select Time Zone",
	editDialogSavestring: "Save",
	editDialogDeletestring: "Delete",
	editDialogCancelstring: "Cancel",
	editDialogRepeatstring: "Repeat",
	editDialogRepeatEverystring: "Repeat every",
	editDialogRepeatEveryWeekstring: "week(s)",
	editDialogRepeatEveryYearstring: "year(s)",
	editDialogRepeatEveryDaystring: "day(s)",
	editDialogRepeatNeverstring: "Never",
	editDialogRepeatDailystring: "Daily",
	editDialogRepeatWeeklystring: "Weekly",
	editDialogRepeatMonthlystring: "Monthly",
	editDialogRepeatYearlystring: "Yearly",
	editDialogRepeatEveryMonthstring: "month(s)",
	editDialogRepeatEveryMonthDaystring: "Day",
	editDialogRepeatFirststring: "first",
	editDialogRepeatSecondstring: "second",
	editDialogRepeatThirdstring: "third",
	editDialogRepeatFourthstring: "fourth",
	editDialogRepeatLaststring: "last",
	editDialogRepeatEndstring: "End",
	editDialogRepeatAfterstring: "After",
	editDialogRepeatOnstring: "On",
	editDialogRepeatOfstring: "of",
	editDialogRepeatOccurrencesstring: "occurrence(s)",
	editDialogRepeatSavestring: "Save Occurrence",
	editDialogRepeatSaveSeriesstring: "Save Series",
	editDialogRepeatDeletestring: "Delete Occurrence",
	editDialogRepeatDeleteSeriesstring: "Delete Series",
	editDialogStatuses:
	{
		free: "Free",
		tentative: "Tentative",
		busy: "Busy",
		outOfOffice: "Out of Office"
	},
    loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",	
}

Code example

Set the localization property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxScheduler first demo.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const appointments = new Array();
            const appointment1 = {
                id: "id1",
                description: "",
                location: "",
                subject: "Projektsitzung",
                calendar: "Zimmer 1",
                start: new Date(2016, 10, 23, 9, 0, 0),
                end: new Date(2016, 10, 23, 16, 0, 0)
            }
            const appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Gruppentreffen",
                calendar: "Zimmer 2",
                start: new Date(2016, 10, 24, 10, 0, 0),
                end: new Date(2016, 10, 24, 15, 0, 0)
            }
            const appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Soziale Treffen",
                calendar: "Zimmer 3",
                start: new Date(2016, 10, 27, 11, 0, 0),
                end: new Date(2016, 10, 27, 13, 0, 0)
            }
            const appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "Projekte Planung",
                calendar: "Zimmer 2",
                start: new Date(2016, 10, 23, 16, 0, 0),
                end: new Date(2016, 10, 23, 18, 0, 0)
            }
            const appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interveiw mit Jan",
                calendar: "Zimmer 1",
                start: new Date(2016, 10, 25, 15, 0, 0),
                end: new Date(2016, 10, 25, 17, 0, 0)
            }
            const appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interveiw mit Alberta",
                calendar: "Zimmer 4",
                start: new Date(2016, 10, 26, 14, 0, 0),
                end: new Date(2016, 10, 26, 16, 0, 0)
            }
            appointments.push(appointment1);
            appointments.push(appointment2);
            appointments.push(appointment3);
            appointments.push(appointment4);
            appointments.push(appointment5);
            appointments.push(appointment6);
            // prepare the data
            var source =
            {
                dataType: "array",
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2016, 11, 23),
                width: 850,
                height: 600,
                source: adapter,
                showLegend: true,
                // called when the dialog is craeted.
                editDialogCreate: function (dialog, fields, editAppointment) {
                    fields.timeZoneContainer.hide();
                },
                localization: {
                    // separator of parts of a date (e.g. '/' in 11/05/1955)
                    '/': "/",
                    // separator of parts of a time (e.g. ':' in 05:44 PM)
                    ':': ":",
                    // the first day of the week (0 = Sunday, 1 = Monday, etc)
                    firstDay: 1,
                    days: {
                        // full day names
                        names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                        // abbreviated day names
                        namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
                        // shortest day names
                        namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
                    },
                    months: {
                        // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
                        names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
                        // abbreviated month names
                        namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
                    },
                    // AM and PM designators in one of these forms:
                    // The usual view, and the upper and lower case versions
                    //      [standard,lowercase,uppercase]
                    // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
                    //      null
                    AM: ["AM", "am", "AM"],
                    PM: ["PM", "pm", "PM"],
                    eras: [
                    // eras in reverse chronological order.
                    // name: the name of the era in this culture (e.g. A.D., C.E.)
                    // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
                    // offset: offset in years from gregorian calendar
                    { "name": "A.D.", "start": null, "offset": 0 }
                    ],
                    twoDigitYearMax: 2029,
                    patterns: {
                        // short date pattern
                        d: "M/d/yyyy",
                        // long date pattern
                        D: "dddd, MMMM dd, yyyy",
                        // short time pattern
                        t: "h:mm tt",
                        // long time pattern
                        T: "h:mm:ss tt",
                        // long date, short time pattern
                        f: "dddd, MMMM dd, yyyy h:mm tt",
                        // long date, long time pattern
                        F: "dddd, MMMM dd, yyyy h:mm:ss tt",
                        // month/day pattern
                        M: "MMMM dd",
                        // month/year pattern
                        Y: "yyyy MMMM",
                        // S is a sortable format that does not vary by culture
                        S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
                        // formatting of dates in MySQL DataBases
                        ISO: "yyyy-MM-dd hh:mm:ss",
                        ISO2: "yyyy-MM-dd HH:mm:ss",
                        d1: "dd.MM.yyyy",
                        d2: "dd-MM-yyyy",
                        d3: "dd-MMMM-yyyy",
                        d4: "dd-MM-yy",
                        d5: "H:mm",
                        d6: "HH:mm",
                        d7: "HH:mm tt",
                        d8: "dd/MMMM/yyyy",
                        d9: "MMMM-dd",
                        d10: "MM-dd",
                        d11: "MM-dd-yyyy"
                    },
                    backstring: "Vorhergehende",
                    forwardstring: "Nächster",
                    toolBarPreviousButtonstring: "Vorhergehende",
                    toolBarNextButtonstring: "Nächster",
                    emptyDatastring: "Nokeine Daten angezeigt",
                    loadstring: "Loading...",
                    clearstring: "Löschen",
                    todaystring: "Heute",
                    dayViewstring: "Tag",
                    weekViewstring: "Woche",
                    monthViewstring: "Monat",
                    timelineDayViewstring: "Zeitleiste Day",
                    timelineWeekViewstring: "Zeitleiste Woche",
                    timelineMonthViewstring: "Zeitleiste Monat",
                    loadingErrorMessage: "Die Daten werden noch geladen und Sie können eine Eigenschaft nicht festgelegt oder eine Methode aufrufen . Sie können tun, dass, sobald die Datenbindung abgeschlossen ist. jqxScheduler wirft die ' bindingComplete ' Ereignis, wenn die Bindung abgeschlossen ist.",
                    editRecurringAppointmentDialogTitlestring: "Bearbeiten Sie wiederkehrenden Termin",
                    editRecurringAppointmentDialogContentstring: "Wollen Sie nur dieses eine Vorkommen oder die Serie zu bearbeiten ?",
                    editRecurringAppointmentDialogOccurrencestring: "Vorkommen bearbeiten",
                    editRecurringAppointmentDialogSeriesstring: "Bearbeiten Die Serie",
                    editDialogTitlestring: "Termin bearbeiten",
                    editDialogCreateTitlestring: "Erstellen Sie Neuer Termin",
                    contextMenuEditAppointmentstring: "Termin bearbeiten",
                    contextMenuCreateAppointmentstring: "Erstellen Sie Neuer Termin",
                    editDialogSubjectstring: "Subjekt",
                    editDialogLocationstring: "Ort",
                    editDialogFromstring: "Von",
                    editDialogTostring: "Bis",
                    editDialogAllDaystring: "Den ganzen Tag",
                    editDialogExceptionsstring: "Ausnahmen",
                    editDialogResetExceptionsstring: "Zurücksetzen auf Speichern",
                    editDialogDescriptionstring: "Bezeichnung",
                    editDialogResourceIdstring: "Kalender",
                    editDialogStatusstring: "Status",
                    editDialogColorstring: "Farbe",
                    editDialogColorPlaceHolderstring: "Farbe wählen",
                    editDialogTimeZonestring: "Zeitzone",
                    editDialogSelectTimeZonestring: "Wählen Sie Zeitzone",
                    editDialogSavestring: "Sparen",
                    editDialogDeletestring: "Löschen",
                    editDialogCancelstring: "Abbrechen",
                    editDialogRepeatstring: "Wiederholen",
                    editDialogRepeatEverystring: "Wiederholen alle",
                    editDialogRepeatEveryWeekstring: "woche(n)",
                    editDialogRepeatEveryYearstring: "Jahr (en)",
                    editDialogRepeatEveryDaystring: "Tag (e)",
                    editDialogRepeatNeverstring: "Nie",
                    editDialogRepeatDailystring: "Täglich",
                    editDialogRepeatWeeklystring: "Wöchentlich",
                    editDialogRepeatMonthlystring: "Monatlich",
                    editDialogRepeatYearlystring: "Jährlich",
                    editDialogRepeatEveryMonthstring: "Monate (n)",
                    editDialogRepeatEveryMonthDaystring: "Day",
                    editDialogRepeatFirststring: "erste",
                    editDialogRepeatSecondstring: "zweite",
                    editDialogRepeatThirdstring: "dritte",
                    editDialogRepeatFourthstring: "vierte",
                    editDialogRepeatLaststring: "letzte",
                    editDialogRepeatEndstring: "Ende",
                    editDialogRepeatAfterstring: "Nach",
                    editDialogRepeatOnstring: "Am",
                    editDialogRepeatOfstring: "von",
                    editDialogRepeatOccurrencesstring: "Eintritt (e)",
                    editDialogRepeatSavestring: "Vorkommen Speichern",
                    editDialogRepeatSaveSeriesstring: "Save Series",
                    editDialogRepeatDeletestring: "Vorkommen löschen",
                    editDialogRepeatDeleteSeriesstring: "Series löschen",
                    editDialogStatuses:
                    {
                        free: "Frei",
                        tentative: "Versuchsweise",
                        busy: "Beschäftigt",
                        outOfOffice: "Ausserhaus"
                    }
                },
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                },
                resources:
                {
                    colorScheme: "scheme05",
                    dataField: "calendar",
                    source:  new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                view: 'weekView',
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="scheduler"></div>
</body>
</html>

Get the localization property.

var localization = $('#jqxScheduler').jqxScheduler('localization');

Sets or gets the Scheduler's minimum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

Code example

Set the min property.

$("#jqxScheduler").jqxScheduler({ min: new $.jqx.date(0) });
						

Get the min property.

var min = $('#jqxScheduler').jqxScheduler('min');

Sets or gets the Scheduler's maximum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

Code example

Set the max property.

$("#jqxScheduler").jqxScheduler({ max: new $.jqx.date(9999, 12, 31) });
						

Get the max property.

var max = $('#jqxScheduler').jqxScheduler('max');

Sets a function called when the Scheduler is rendered and ready for usage.

Code example

Set the ready property.

// prepare the data
var source =
{
	dataType: 'json',
	dataFields: [
		{ name: 'id', type: 'string' },
		{ name: 'status', type: 'string' },
		{ name: 'about', type: 'string' },
		{ name: 'address', type: 'string' },
		{ name: 'company', type: 'string'},
		{ name: 'name', type: 'string' },
		{ name: 'style', type: 'string' },
		{ name: 'calendar', type: 'string' },
		{ name: 'start', type: 'date', format: "yyyy-MM-dd HH:mm" },
		{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" }
	],
	id: 'id',
	url: 'appointments.json'
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
	date: new $.jqx.date(2016, 11, 23),
	width: 850,
	height: 600,
	rowsHeight: 40,
	source: adapter,
	ready: function () {
		// gets scrollbable height.
		var scrollHeight = $("#scheduler").jqxScheduler('scrollHeight');
		// scroll 700px.
		$("#scheduler").jqxScheduler('scrollTop', 700);
	},
	appointmentDataFields:
	{
		from: "start",
		to: "end",
		id: "id",
		description: "about",
		location: "address",
		subject: "name",
		style: "style",
		status: "status"
	},
	view: 'weekView',
	views:
	[
		"dayView",
		"weekView"
	]
});
						

Sets a function called when the Scheduler is rendering its appointments. The function has one parameter which is object with the following members:

• appointment - object which has the appointmentDataFields. See appointmentDataFields property.
• width - integer. Gets the appointment's width.
• height- integer. Gets the appointment's height.
• textColor - hex string. Gets or sets the appointment's text color.
• background - hex string. Gets or sets the appointment's background color.
• borderColor - hex string. Gets or sets the appointment's border color.
• style - hex string. Gets or sets the appointment's style. This is alternative to textColr, background and borderColor, because it sets them all depending on the HEX string you set.
• cssClass - string. This can be used for adding CSS Class to the appointment.
• html - html string. This can be used for replacing the appointment's HTML Content.
• view - string. Gets the current view - 'dayView', 'weekView', 'monthView', timelineDayView', 'timelineWeekView', 'timelineMonthView'

Code example

Set the renderAppointment property.

$("#scheduler").jqxScheduler({
	date: new $.jqx.date(2016, 11, 23),
	width: 850,
	height: 600,
	source: adapter,
	renderAppointment: function(data)
	{
		// data object properties
		// appointment - object with the properties from the Scheduler.s source object.
		// width - int
		// height- int
		// textColor - hex
		// background - hex
		// borderColor - hex
		// style - string
		// cssClass - string
		// html - html string
		// view - string
		var img = "<  img style='top: 2px; position: relative;' src='../../images/person.png' />  ";
		if (data.appointment.subject == "Nancy") {
			var img = "<  img style='top: 2px; position: relative;' src='../../images/woman.png' /> ";
		}
		else if (data.appointment.subject == "Peter") {
			var img = "<  img style='top: 2px; position: relative;' src='../../images/boss.png' /> ";
		}
		else if (data.appointment.subject == "Antony") {
			var img = "<  img style='top: 2px; position: relative;' src='../../images/oldboss.png' /> ";
		}
		else if (data.appointment.subject == "John") {
			var img = "<  img style='top: 2px; position: relative;' src='../../images/asian.png' /> ";
		}
		if (data.view == "weekView" || data.view == "dayView" || data.view == "monthView") {
			data.html =  img + "<i> " + data.appointment.subject + "</i/> ";
			if (data.appointment.id == "id1") {
				data.style = "#AA4643";
			}
			else if (data.appointment.id == "id2" || data.appointment.id == "id6") {
				data.style = "#309B46";
			}
			else if (data.appointment.id == "id3") {
				data.style = "#447F6E";
			}
	}
		return data;
	},
	ready: function () {
		$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
	},
	appointmentDataFields:
	{
		from: "start",
		to: "end",
		id: "id",
		description: "description",
		location: "location",
		subject: "subject",
		style: "style",
		color: "color",
		background: "background",
		borderColor: "borderColor"
	},
	view: 'weekView',
	appointmentsMinHeight: 20,
	views:
	[
		'dayView',
		'weekView',
		'monthView'
	]
});
						

Sets a function called by the Scheduler when the Scheduler's rendering function is called.

Code example

Set the rendering property.

$("#jqxScheduler").jqxScheduler({ rendering: function(){} });
						

Sets a function called by the Scheduler when the Scheduler is rendered.

Code example

Set the rendered property.

$("#jqxScheduler").jqxScheduler({ rendered: function(){} });
						

Sets or gets whether the Scheduler is displayed with Right to Left layout.

Code example

Set the rtl property.

$("#jqxScheduler").jqxScheduler({ rtl: true });
						

Get the rtl property.

var rtl = $('#jqxScheduler').jqxScheduler('rtl');

Sets or gets the Scheduler's resource object. The object can have the following members:

• source - dataAdapter or Array.
• colorScheme - string which defines the appoinment's style depending on its resourceId. Values from 'scheme01' to 'scheme27'.
• orientation - string which defines the resources representation. Values - 'none', 'horizontal', 'vertical'.
• dataField - string which defines the resourceId. If your appointment's resource field is 'calendar', this dataField should be set to 'calendar'.
• resourceColumnWidth - Integer which defines the Scheduler columns width when 'orientation' is 'horizontal'.
• resourceRowHeight - Integer which defines the Scheduler resource group row height when 'orientation' is 'vertical'.

Code example

Set the resources property.

var source =
{
	dataType: "array",
	dataFields: [
		{ name: 'id', type: 'string' },
		{ name: 'description', type: 'string' },
		{ name: 'location', type: 'string' },
		{ name: 'subject', type: 'string' },
		{ name: 'calendar', type: 'string' },
		{ name: 'start', type: 'date' },
		{ name: 'end', type: 'date' }
	],
	id: 'id',
	localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
	date: new $.jqx.date(2016, 11, 23),
	width: 850,
	height: 600,
	dayNameFormat: "abbr",
	source: adapter,
	showLegend: true,
	ready: function () {
		$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
	},
	resources:
	{
		colorScheme: "scheme05",
		dataField: "calendar",
		orientation: "horizontal",
		source:  new $.jqx.dataAdapter(source)
	},
	appointmentDataFields:
	{
		from: "start",
		to: "end",
		id: "id",
		description: "description",
		location: "place",
		subject: "subject",
		resourceId: "calendar"
	},
	view: 'weekView',
	views:
	[
		'dayView',
		'weekView',
		'monthView'
	]
});						
						

Get the resource property.

var resources = $('#jqxScheduler').jqxScheduler('resources');

Sets or gets the Scheduler rows height.

Code example

Set the rowsHeight property. The minimum value is 25.

$('#jqxScheduler').jqxScheduler({rowsHeight: 40});			
						

Get the rowsHeight property.

var rowsHeight = $('#jqxScheduler').jqxScheduler('rowsHeight');

Sets or gets whether the Scheduler's navigation toolbar is displayed.

Code example

Set the showToolbar property.

$('#jqxScheduler').jqxScheduler({showToolbar: false});			
						

Get the showToolbar property.

var showToolbar = $('#jqxScheduler').jqxScheduler('showToolbar');

Sets or gets whether the Scheduler's legend bar is displayed.

Code example

Set the showLegend property.

$('#jqxScheduler').jqxScheduler({showLegend: false});			
						

Get the showLegend property.

var showLegend = $('#jqxScheduler').jqxScheduler('showLegend');

Sets or gets the scrollbars size.

Code example

Set the scrollBarSize property.

$('#jqxScheduler').jqxScheduler({scrollBarSize: 20});			
						

Get the scrollBarSize property.

var scrollBarSize = $('#jqxScheduler').jqxScheduler('scrollBarSize');

Sets or gets the Scheduler appointments data source. The property should point to dataAdapter instance.

Code example

Set the source property.

const appointments = new Array();
const appointment1 = {
	id: "id1",
	description: "George brings projector for presentations.",
	location: "",
	subject: "Quarterly Project Review Meeting",
	calendar: "Room 1",
	start: new Date(2016, 10, 23, 9, 0, 0),
	end: new Date(2016, 10, 23, 16, 0, 0)
}
const appointment2 = {
	id: "id2",
	description: "",
	location: "",
	subject: "IT Group Mtg.",
	calendar: "Room 2",
	start: new Date(2016, 10, 24, 10, 0, 0),
	end: new Date(2016, 10, 24, 15, 0, 0)
}
const appointment3 = {
	id: "id3",
	description: "",
	location: "",
	subject: "Course Social Media",
	calendar: "Room 1",
	start: new Date(2016, 10, 27, 11, 0, 0),
	end: new Date(2016, 10, 27, 13, 0, 0)
}
const appointment4 = {
	id: "id4",
	description: "",
	location: "",
	subject: "New Projects Planning",
	calendar: "Room 2",
	start: new Date(2016, 10, 23, 0, 0, 0),
	end: new Date(2016, 10, 25, 23, 59, 59)
}
const appointment5 = {
	id: "id5",
	description: "",
	location: "",
	subject: "Interview with James",
	calendar: "Room 1",
	start: new Date(2016, 10, 25, 15, 0, 0),
	end: new Date(2016, 10, 25, 17, 0, 0)
}
const appointment6 = {
	id: "id6",
	description: "",
	location: "",
	subject: "Interview with Nancy",
	calendar: "Room 2",
	start: new Date(2016, 10, 26, 14, 0, 0),
	end: new Date(2016, 10, 26, 16, 0, 0)
}
appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);
// prepare the data
var source =
{
	dataType: "array",
	dataFields: [
		{ name: 'id', type: 'string' },
		{ name: 'description', type: 'string' },
		{ name: 'location', type: 'string' },
		{ name: 'subject', type: 'string' },
		{ name: 'calendar', type: 'string' },
		{ name: 'start', type: 'date' },
		{ name: 'end', type: 'date' }
	],
	id: 'id',
	localData: appointments
};
var adapter = new $.jqx.dataAdapter(source);
$("#scheduler").jqxScheduler({
	date: new $.jqx.date(2016, 11, 23),
	width: 850,
	height: 600,
	dayNameFormat: "abbr",
	source: adapter,
	showLegend: true,
	ready: function () {
		$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
	},
	resources:
	{
		colorScheme: "scheme05",
		dataField: "calendar",
		orientation: "horizontal",
		source:  new $.jqx.dataAdapter(source)
	},
	appointmentDataFields:
	{
		from: "start",
		to: "end",
		id: "id",
		description: "description",
		location: "place",
		subject: "subject",
		resourceId: "calendar"
	},
	view: 'weekView',
	views:
	[
		'dayView',
		'weekView',
		'monthView'
	]
});		
						

Get the source property.

var source = $('#jqxScheduler').jqxScheduler('source');

Sets or gets the Scheduler appointments statuses.

Code example

Set the statuses property.

$('#jqxScheduler').jqxScheduler({statuses: {
	free: "green",
	tentative: "tentative",
	busy: "transparent",
	doNotDisturb: "orange",
	outOfOffice: "#800080"
 } });
						

Get the statuses property.

var statuses = $('#jqxScheduler').jqxScheduler('statuses');

Sets or gets the Scheduler rows height on touch device.

Code example

Set the touchRowsHeight property.

$('#jqxScheduler').jqxScheduler({touchRowsHeight: 40});
						

Get the touchRowsHeight property.

var touchRowsHeight = $('#jqxScheduler').jqxScheduler('touchRowsHeight');

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

Sets or gets the minimum height of appointments on touch devices in the all day area, month view and timeline views.

Code example

Set the touchAppointmentsMinHeight property.

$('#jqxScheduler').jqxScheduler({touchAppointmentsMinHeight: 40});
						

Get the touchAppointmentsMinHeight property.

var touchAppointmentsMinHeight = $('#jqxScheduler').jqxScheduler('touchAppointmentsMinHeight');

Sets or gets the scrollbars size on touch devices.

Code example

Set the touchScrollBarSize property.

$('#jqxScheduler').jqxScheduler({touchScrollBarSize: 25});
						

Get the touchScrollBarSize property.

var touchScrollBarSize = $('#jqxScheduler').jqxScheduler('touchScrollBarSize');

Sets or gets the Scheduler's Time Zone. Possible values:

'Dateline Standard Time' - (offsetMinutes: -720, offsetHours: -12, text: '(UTC-12:00) International Date Line West')
'UTC-11' - (offsetMinutes: -660, offsetHours: -11, text: '(UTC-11:00) Coordinated Universal Time-11')
'Hawaiteratoran Standard Time' - (offsetMinutes: -600, offsetHours: -10, text: '(UTC-10:00) Hawaiterator')
'Alaskan Standard Time' - (offsetMinutes: -540, offsetHours: -9, text: '(UTC-09:00) Alaska' ,
'Pacific Standard Time (Mexico)' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Baja California' ,
'Pacific Standard Time' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Pacific Time (US & Canada)' ,
'US Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Arizona')
'Mountain Standard Time (Mexico)' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Chihuahua, La Paz, Mazatlan' ,
'Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Mountain Time (US & Canada)' ,
'Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central Time (US & Canada)' ,
'Central America Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central America')
'Canada Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Saskatchewan')
'Central Standard Time (Mexico)' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Guadalajara, Mexico City, Monterrey' ,
'SA Pacific Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Bogota, Lima, Quito, Rio Branco')
'Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Eastern Time (US & Canada)' ,
'US Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Indiana (East)' ,
'Venezuela Standard Time' - (offsetMinutes: -270, offsetHours: -4.5, text: '(UTC-04:30) Caracas')
'Atlantic Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Atlantic Time (Canada)' ,
'Paraguay Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Asuncion' ,
'Central Brazilian Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Cuiaba' ,
'Pacific SA Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Santiago' ,
'SA Western Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Georgetown, La Paz, Manaus')
'Newfoundland Standard Time' - (offsetMinutes: -210, offsetHours: -3.5, text: '(UTC-03:30) Newfoundland' ,
'SA Eastern Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Cayenne, Fortaleza')
'Argentina Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Buenos Aires' ,
'E. South America Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Brasilia' ,
'Bahia Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Salvador' ,
'Montevideo Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Montevideo' ,
'Greenland Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Greenland' ,
'UTC-02' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Coordinated Universal Time-02')
'Mid-Atlantic Standard Time' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Mid-Atlantic - Old' ,
'Azores Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Azores' ,
'Cape Verde Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Cape Verde Is.')
'Morocco Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Casablanca' ,
'UTC' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Coordinated Universal Time')
'GMT Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Dublin, Edinburgh, Lisbon, London' ,
'Greenwich Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Monrovia, Reykjavik')
'Central European Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb' ,
'Namibia Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Windhoek' ,
'W. Central Africa Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) West Central Africa')
'W. Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Amsterdam, Berlin, Rome' ,
'Central Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Belgrade, Budapest, Prague' ,
'Romance Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Brussels, Copenhagen, Madrid, Paris' ,
'FLE Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Helsinki, Kyiv, Riga, Sofia' ,
'South Africa Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Harare, Pretoria')
'Turkey Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Istanbul' ,
'GTB Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Athens, Bucharest' ,
'Libya Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Tripoli' ,
'E. Europe Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) E. Europe' ,
'Jordan Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Amman' ,
'Middle East Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Beirut' ,
'Egypt Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Cairo' ,
'Syria Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Damascus' ,
'Israel Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Jerusalem' ,
'Arab Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kuwait, Riyadh')
'E. Africa Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Nairobi')
'Arabic Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Baghdad' ,
'Kaliningrad Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kaliningrad, Minsk' ,
'Iran Standard Time' - (offsetMinutes: 210, offsetHours: 3.5, text: '(UTC+03:30) Tehran' ,
'Mauritius Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Port Louis' ,
'Georgian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Tbilisi')
'Caucasus Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Yerevan' ,
'Arabian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Abu Dhabi, Muscat')
'Azerbaijan Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Baku' ,
'Russian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Moscow, St. Petersburg, Volgograd' ,
'Afghanistan Standard Time' - (offsetMinutes: 270, offsetHours: 4.5, text: '(UTC+04:30) Kabul')
'Pakistan Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Islamabad, Karachi' ,
'West Asia Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Ashgabat, Tashkent')
'India Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi')
'Sri Lanka Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Sri Jayawardenepura')
'Nepal Standard Time' - (offsetMinutes: 345, offsetHours: 5.75, text: '(UTC+05:45) Kathmandu')
'Central Asia Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Astana')
'Bangladesh Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Dhaka' ,
'Ekaterinburg Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Ekaterinburg' ,
'Myanmar Standard Time' - (offsetMinutes: 390, offsetHours: 6.5, text: '(UTC+06:30) Yangon (Rangoon)')
'SE Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Bangkok, Hanoi, Jakarta')
'N. Central Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Novosibirsk' ,
'Ulaanbaatar Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Ulaanbaatar')
'China Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Beijing, Chongqing, Hong Kong')
'Singapore Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Kuala Lumpur, Singapore')
'North Asia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Krasnoyarsk' ,
'Taipei Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Taipei')
'W. Australia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Perth' ,
'Korea Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Seoul')
'North Asia East Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Irkutsk' ,
'Tokyo Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Osaka, Sapporo, Tokyo')
'AUS Central Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Darwin')
'Cen. Australia Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Adelaide' ,
'West Pacific Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Guam, Port Moresby')
'Tasmania Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Hobart' ,
'E. Australia Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Brisbane')
'AUS Eastern Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Canberra, Melbourne, Sydney' ,
'Yakutsk Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Yakutsk' ,
'Vladivostok Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Vladivostok' ,
'Central Pacific Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Solomon Is., New Caledonia')
'Magadan Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Magadan' ,
'Kamchatka Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Petropavlovsk-Kamchatsky - Old' ,
'Fiji Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Fiji' ,
'New Zealand Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Auckland, Wellington' ,
'UTC+12' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Coordinated Universal Time+12')
'Tonga Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Nuku\'alofa')
'Samoa Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Samoa')
						   

Code example

Set the timeZone property.

$('#jqxScheduler').jqxScheduler({timeZone: 'UTC'});
						

Get the timeZone property.

var timeZone = $('#jqxScheduler').jqxScheduler('timeZone');

Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.

Code example

Set the touchDayNameFormat property.

$("#jqxScheduler").jqxScheduler({ touchDayNameFormat: 'abbr') });
						

Get the touchDayNameFormat property.

var touchDayNameFormat = $('#jqxScheduler').jqxScheduler('touchDayNameFormat');

Sets or gets the toolbar's date format.

Code example

Set the toolBarRangeFormat property.

$('#jqxScheduler').jqxScheduler({toolBarRangeFormat: 'dd MM yyyy'});
						

Get the toolBarRangeFormat property.

var toolBarRangeFormat = $('#jqxScheduler').jqxScheduler('toolBarRangeFormat');

Sets or gets the toolbar's date format when the Scheduler's width is not enough for displaying the full format.

Code example

Set the toolBarRangeFormatAbbr property.

$('#jqxScheduler').jqxScheduler({toolBarRangeFormatAbbr: 'dd MM yy'});
						

Get the toolBarRangeFormatAbbr property.

var toolBarRangeFormatAbbr = $('#jqxScheduler').jqxScheduler('toolBarRangeFormatAbbr');

Sets or gets the Scheduler toolbar's height.

Code example

Set the toolbarHeight property.

$('#jqxScheduler').jqxScheduler({toolbarHeight: 60});
						

Get the toolbarHeight property.

var toolbarHeight = $('#jqxScheduler').jqxScheduler('toolbarHeight');

Sets or gets the Scheduler's views. Each view in the Array can be string or object. strings are: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView', 'agendaView'. If it is an object it can have the following members:

• appointmentColumnWidth - number which defines the Appointment column width in the Agenda view.
• appointmentHeight - Sets the minimum height of an appointment in All Day Row, Month View or Timeline Views. Default is automatically calculated.
• appointmentsRenderMode - Sets the appointments rendering mode. Possible value: "exactTime". In the "exactTime" mode, appointments may render partially in the cells.
• allDayRowHeight - number which defines the all day row's height. Default is automatically calculated.
• dayViewNavigation - boolean which is taken into account in Month View. It defines whether clicking on month cell header navigates to Day View. Default is false.
• days - number which defines the number of days in the Agenda view. Default is 7.
• dateColumnWidth - number which defines the Date column width in the Agenda view.
• monthRowAutoHeight - boolean which defines whether row height in month view is automatic. Default is false.
• rowHeight - number which defines the rows height in the view. Default is null.
• showWeekends - boolean which defines whether weekens will be displayed. Default is true.
• showWorkTime - boolean which defines whether the work time is displayed in Day View, Week View, Timeline Day View and Timeline Week View. Default is true.
• showWeeknumbers - boolean which defines whether the week numbers are dispalyed in Month View. Default is false.
• showTimeRangeStatus - boolean which defines whether the time range status of appointments which have duration >= 1 day and are not all day appointments is displayed in Month View and Day/Week views all day area.
• type - string which sets the view's type. Values: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView'.
• timeRuler - object which can have the following members:
  • width - number which sets the width of the time ruler. Default is 60.
  • hidden - Sets whether the time ruler is displayed.
  • timeZones - Sets an Array of time zones. Example: [{ id: "UTC", text: "UTC" }, { id: "Pacific Standard Time", text: "PST" }].
  • text - Sets the text of the time ruler column.
  • scale - Sets the time ruler's scale. Values: 'hour', 'halfHour', 'quarterHour', 'tenMinutes', 'fiveMinutes'
  • scaleStartHour - Sets the scale's start hour.
  • scaleEndHour - Sets the scale's end hour.
  • formatstring - Sets the Hours and Minutes format string. Example: "hh:mm".
  • position - Sets the time ruler's position. Possible values: 'left' or 'right'.
• text - Sets the view's display text in the Scheduler's Toolbar. Default is automatically set and defined in Scheduler's localization.
• timeSlotWidth - number which defines the width of a time slot in Timeline views. The minimum value is 30.
• timeColumnWidth - number which defines the Time column width in the Agenda view.
• weekViewNavigation - boolean which is taken into account in Month View. It defines whether clicking on week number cell header navigates to Week View. Default is false.
• workTime - object which defines the Scheduler's work time. Example: { fromDayOfWeek: 1, toDayOfWeek: 5, fromHour: 7, toHour: 19 }

Code example

Set the views property.

$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
ready: function () {
},
appointmentDataFields:
{
	from: "start",
	to: "end",
	id: "id",
	description: "about",
	location: "address",
	subject: "name",
	style: "style",
	status: "status"
},
view: 'weekView',
views:
[
	{ type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
	{ type: "weekView", workTime:
	{
		fromDayOfWeek: 1,
		toDayOfWeek: 5,
		fromHour: 7,
		toHour: 19
	}
	}
]
});
						

Get the views property.

var views = $('#jqxScheduler').jqxScheduler('views');

Sets or gets the Scheduler's view. Possible vales: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView' and 'timelineMonthView' or the view's Index in the views object.

Code example

Set the view property.

$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
ready: function () {
},
appointmentDataFields:
{
	from: "start",
	to: "end",
	id: "id",
	description: "about",
	location: "address",
	subject: "name",
	style: "style",
	status: "status"
},
view: 'weekView',
views:
[
	{ type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
	{ type: "weekView", workTime:
	{
		fromDayOfWeek: 1,
		toDayOfWeek: 5,
		fromHour: 7,
		toHour: 19
	}
	}
]
});
						

Get the view property.

var view = $('#jqxScheduler').jqxScheduler('view');

Sets or gets the Scheduler's width.

Code example

Set the width property.

$("#scheduler").jqxScheduler({
date: new $.jqx.date(2016, 11, 23),
width: 850,
height: 600,
source: adapter,
ready: function () {
},
appointmentDataFields:
{
	from: "start",
	to: "end",
	id: "id",
	description: "about",
	location: "address",
	subject: "name",
	style: "style",
	status: "status"
},
view: 'weekView',
views:
[
	{ type: "dayView", showWeekends: false, timeRuler: { hidden: false } },
	{ type: "weekView", workTime:
	{
		fromDayOfWeek: 1,
		toDayOfWeek: 5,
		fromHour: 7,
		toHour: 19
	}
	}
]
});
						

Get the width property.

var width = $('#jqxScheduler').jqxScheduler('width');

This event is triggered when an appointment is changed. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentChange event by type: jqxScheduler.

This event is triggered when an appointment is clicked. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentClick event by type: jqxScheduler.

This event is triggered when an appointment is double clicked. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentDoubleClick event by type: jqxScheduler.

This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentDelete event by type: jqxScheduler.

This event is triggered when an appointment is added. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code example

Bind to the appointmentAdd event by type: jqxScheduler.

This event is triggered when the binding is completed.

Code example

Bind to the bindingComplete event by type: jqxScheduler.

This event is triggered when a cell is clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.

Code example

Bind to the cellClick event by type: jqxScheduler.

This event is triggered when a cell is double clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.

Code example

Bind to the cellDoubleClick event by type: jqxScheduler.

This event is triggered when the context menu is opened. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the contextMenuOpen event by type: jqxScheduler.

This event is triggered when the context menu is closed. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the contextMenuClose event by type: jqxScheduler.

This event is triggered when the context menu item is clicked. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• item - the clicked menu item.

Code example

Bind to the contextMenuItemClick event by type: jqxScheduler.

This event is triggered when the context menu item is created. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the contextMenuCreate event by type: jqxScheduler.

This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects.

Code example

Bind to the dateChange event by type: jqxScheduler.

This event is triggered when the recurrence dialog is opened. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the editRecurrenceDialogOpen event by type: jqxScheduler.

This event is triggered when the recurrence dialog is closed. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code example

Bind to the editRecurrenceDialogClose event by type: jqxScheduler.

This event is triggered when the edit dialog is created. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• fields - object with the following members:
  • subject - Subject input field.
  • subjectLabel - Subject label.
  • subjectContainer - Input and label HTML div container element.
  • location - Location input field.
  • locationLabel - Location label.
  • locationContainer - Input and label HTML div container element.
  • from - From datetime input field.
  • fromLabel - From label.
  • fromContainer - Input and label HTML div container element.
  • to - To Datetimeinput field.
  • toLabel - To label.
  • toContainer - Input and label HTML div container element.
  • allDay - AllDay checkbox field.
  • allDayLabel - AllDay label.
  • allDayContainer - Checkbox and label HTML div container element.
  • timeZone - Timezone DropDownList field.
  • timeZoneLabel - TimeZone label.
  • timeZoneContainer - DropDownList and label HTML div container element.
  • description - Description input field.
  • descriptionLabel - Description label.
  • descriptionContainer - Input and label HTML div container element.
  • color - Color DropDownList field.
  • colorLabel - Subject label.
  • colorContainer - DropDownList and label container element.
  • status - Status DropDownList field.
  • statusLabel - Status label.
  • statustContainer - DropDownList and label container element.
  • resource - Resource DropDownList field.
  • resourceLabel - Resource label.
  • resourceContainer - DropDownList and label container element.
  • buttonsField - buttons HTML div container HTML Element.
  • saveButton - Save button.
  • deleteButton - Delete button.
  • cancelButton - Cancel button.
  • daily.repeatDayInterval - numberInput for daily repeat pattern.
  • daily.repeatDayLabel - Label HTML Element.
  • daily.panel - Daily repeat pattern HTML div container element.
  • weekly.repeatWeekInterval - numberInput for weekly repeat pattern.
  • weekly.repeatWeekIntervalLabel - Label element.
  • weekly.repeatDaysLabel - Label element.
  • weekly.repeatDays - Array of Checkboxes.
  • weekly.panel - Weekly repeat pattern HTML div container element.
  • monthly.repeatMonth - numberInput for monthly repeat pattern.
  • monthly.repeatMonthLabel - Label element.
  • monthly.repeatMonthDay - numberInput for the month day in the pattern.
  • monthly.repeatMonthDayBool - RadioButton element.
  • monthly.repeatMonthDayLabel - Label element.
  • monthly.repeatDayOfWeekBool - RadioButton element.
  • monthly.repeatDayOfWeek - DropDownList element.
  • monthly.repeatDayOfWeekLabel - Label element.
  • monthly.repeatDayOfWeekType - DropDownList element.
  • monthly.panel - Monthly repeat pattern HTML div container element.
  • yearly.repeatYear - numberInput for yearly repeat pattern.
  • yearly.repeatYearLabel - Label element.
  • yearly.repeatYearBool - RadioButton element.
  • yearly.repeatYearBoolLabel - Label element.
  • yearly.repeatYearMonth - DropDownList element.
  • yearly.repeatYearDay - numberInput element.
  • yearly.repeatDayOfWeekBool - RadioButton element.
  • yearly.repeatDayOfWeekType - DropDownList element.
  • yearly.repeatDayOfWeekLabel - Label element.
  • yearly.repeatDayOfWeekMonth - DropDownList element.
  • yearly.panel - Yearly repeat pattern HTML div container element.
  • resetExceptions - Checkbox element.
  • resetExceptionsLabel - Label element.
  • resetExceptionsContainer - Checkbox and Label container element.
  • repeat - DropDownList element.
  • repeatLabel - Label element.
  • repeatContainer - DropDownList and Label container element.
  • repeatPanel - HTML div container element for repeat patterns.
  • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
  • repeatEndPanel.repeatEndNever - RadioButton element.
  • repeatEndPanel.repeatEndNeverLabel - Label element.
  • repeatEndPanel.repeatEndAfter - RadioButton element.
  • repeatEndPanel.repeatEndAfterValue - numberInput element.
  • repeatEndPanel.repeatEndAfterLabel - Label element.
  • repeatEndPanel.repeatEndOn - RadioButton element.
  • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
  • repeatEndPanel.repeatEndOnLabel - Label element.

Code example

Bind to the editDialogCreate event by type: jqxScheduler.

This event is triggered when the edit dialog is opened. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• fields - object with the following members:
  • subject - Subject input field.
  • subjectLabel - Subject label.
  • subjectContainer - Input and label HTML div container element.
  • location - Location input field.
  • locationLabel - Location label.
  • locationContainer - Input and label HTML div container element.
  • from - From datetime input field.
  • fromLabel - From label.
  • fromContainer - Input and label HTML div container element.
  • to - To Datetimeinput field.
  • toLabel - To label.
  • toContainer - Input and label HTML div container element.
  • allDay - AllDay checkbox field.
  • allDayLabel - AllDay label.
  • allDayContainer - Checkbox and label HTML div container element.
  • timeZone - Timezone DropDownList field.
  • timeZoneLabel - TimeZone label.
  • timeZoneContainer - DropDownList and label HTML div container element.
  • description - Description input field.
  • descriptionLabel - Description label.
  • descriptionContainer - Input and label HTML div container element.
  • color - Color DropDownList field.
  • colorLabel - Subject label.
  • colorContainer - DropDownList and label container element.
  • status - Status DropDownList field.
  • statusLabel - Status label.
  • statustContainer - DropDownList and label container element.
  • resource - Resource DropDownList field.
  • resourceLabel - Resource label.
  • resourceContainer - DropDownList and label container element.
  • buttonsField - buttons HTML div container HTML Element.
  • saveButton - Save button.
  • deleteButton - Delete button.
  • cancelButton - Cancel button.
  • daily.repeatDayInterval - numberInput for daily repeat pattern.
  • daily.repeatDayLabel - Label HTML Element.
  • daily.panel - Daily repeat pattern HTML div container element.
  • weekly.repeatWeekInterval - numberInput for weekly repeat pattern.
  • weekly.repeatWeekIntervalLabel - Label element.
  • weekly.repeatDaysLabel - Label element.
  • weekly.repeatDays - Array of Checkboxes.
  • weekly.panel - Weekly repeat pattern HTML div container element.
  • monthly.repeatMonth - numberInput for monthly repeat pattern.
  • monthly.repeatMonthLabel - Label element.
  • monthly.repeatMonthDay - numberInput for the month day in the pattern.
  • monthly.repeatMonthDayBool - RadioButton element.
  • monthly.repeatMonthDayLabel - Label element.
  • monthly.repeatDayOfWeekBool - RadioButton element.
  • monthly.repeatDayOfWeek - DropDownList element.
  • monthly.repeatDayOfWeekLabel - Label element.
  • monthly.repeatDayOfWeekType - DropDownList element.
  • monthly.panel - Monthly repeat pattern HTML div container element.
  • yearly.repeatYear - numberInput for yearly repeat pattern.
  • yearly.repeatYearLabel - Label element.
  • yearly.repeatYearBool - RadioButton element.
  • yearly.repeatYearBoolLabel - Label element.
  • yearly.repeatYearMonth - DropDownList element.
  • yearly.repeatYearDay - numberInput element.
  • yearly.repeatDayOfWeekBool - RadioButton element.
  • yearly.repeatDayOfWeekType - DropDownList element.
  • yearly.repeatDayOfWeekLabel - Label element.
  • yearly.repeatDayOfWeekMonth - DropDownList element.
  • yearly.panel - Yearly repeat pattern HTML div container element.
  • resetExceptions - Checkbox element.
  • resetExceptionsLabel - Label element.
  • resetExceptionsContainer - Checkbox and Label container element.
  • repeat - DropDownList element.
  • repeatLabel - Label element.
  • repeatContainer - DropDownList and Label container element.
  • repeatPanel - HTML div container element for repeat patterns.
  • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
  • repeatEndPanel.repeatEndNever - RadioButton element.
  • repeatEndPanel.repeatEndNeverLabel - Label element.
  • repeatEndPanel.repeatEndAfter - RadioButton element.
  • repeatEndPanel.repeatEndAfterValue - numberInput element.
  • repeatEndPanel.repeatEndAfterLabel - Label element.
  • repeatEndPanel.repeatEndOn - RadioButton element.
  • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
  • repeatEndPanel.repeatEndOnLabel - Label element.

Code example

Bind to the editDialogOpen event by type: jqxScheduler.

This event is triggered when the edit dialog is closed. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• fields - object with the following members:
  • subject - Subject input field.
  • subjectLabel - Subject label.
  • subjectContainer - Input and label HTML div container element.
  • location - Location input field.
  • locationLabel - Location label.
  • locationContainer - Input and label HTML div container element.
  • from - From datetime input field.
  • fromLabel - From label.
  • fromContainer - Input and label HTML div container element.
  • to - To Datetimeinput field.
  • toLabel - To label.
  • toContainer - Input and label HTML div container element.
  • allDay - AllDay checkbox field.
  • allDayLabel - AllDay label.
  • allDayContainer - Checkbox and label HTML div container element.
  • timeZone - Timezone DropDownList field.
  • timeZoneLabel - TimeZone label.
  • timeZoneContainer - DropDownList and label HTML div container element.
  • description - Description input field.
  • descriptionLabel - Description label.
  • descriptionContainer - Input and label HTML div container element.
  • color - Color DropDownList field.
  • colorLabel - Subject label.
  • colorContainer - DropDownList and label container element.
  • status - Status DropDownList field.
  • statusLabel - Status label.
  • statustContainer - DropDownList and label container element.
  • resource - Resource DropDownList field.
  • resourceLabel - Resource label.
  • resourceContainer - DropDownList and label container element.
  • buttonsField - buttons HTML div container HTML Element.
  • saveButton - Save button.
  • deleteButton - Delete button.
  • cancelButton - Cancel button.
  • daily.repeatDayInterval - numberInput for daily repeat pattern.
  • daily.repeatDayLabel - Label HTML Element.
  • daily.panel - Daily repeat pattern HTML div container element.
  • weekly.repeatWeekInterval - numberInput for weekly repeat pattern.
  • weekly.repeatWeekIntervalLabel - Label element.
  • weekly.repeatDaysLabel - Label element.
  • weekly.repeatDays - Array of Checkboxes.
  • weekly.panel - Weekly repeat pattern HTML div container element.
  • monthly.repeatMonth - numberInput for monthly repeat pattern.
  • monthly.repeatMonthLabel - Label element.
  • monthly.repeatMonthDay - numberInput for the month day in the pattern.
  • monthly.repeatMonthDayBool - RadioButton element.
  • monthly.repeatMonthDayLabel - Label element.
  • monthly.repeatDayOfWeekBool - RadioButton element.
  • monthly.repeatDayOfWeek - DropDownList element.
  • monthly.repeatDayOfWeekLabel - Label element.
  • monthly.repeatDayOfWeekType - DropDownList element.
  • monthly.panel - Monthly repeat pattern HTML div container element.
  • yearly.repeatYear - numberInput for yearly repeat pattern.
  • yearly.repeatYearLabel - Label element.
  • yearly.repeatYearBool - RadioButton element.
  • yearly.repeatYearBoolLabel - Label element.
  • yearly.repeatYearMonth - DropDownList element.
  • yearly.repeatYearDay - numberInput element.
  • yearly.repeatDayOfWeekBool - RadioButton element.
  • yearly.repeatDayOfWeekType - DropDownList element.
  • yearly.repeatDayOfWeekLabel - Label element.
  • yearly.repeatDayOfWeekMonth - DropDownList element.
  • yearly.panel - Yearly repeat pattern HTML div container element.
  • resetExceptions - Checkbox element.
  • resetExceptionsLabel - Label element.
  • resetExceptionsContainer - Checkbox and Label container element.
  • repeat - DropDownList element.
  • repeatLabel - Label element.
  • repeatContainer - DropDownList and Label container element.
  • repeatPanel - HTML div container element for repeat patterns.
  • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
  • repeatEndPanel.repeatEndNever - RadioButton element.
  • repeatEndPanel.repeatEndNeverLabel - Label element.
  • repeatEndPanel.repeatEndAfter - RadioButton element.
  • repeatEndPanel.repeatEndAfterValue - numberInput element.
  • repeatEndPanel.repeatEndAfterLabel - Label element.
  • repeatEndPanel.repeatEndOn - RadioButton element.
  • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
  • repeatEndPanel.repeatEndOnLabel - Label element.

Code example

Bind to the editDialogClose event by type: jqxScheduler.

This event is triggered when the view type is changed. This event has five arguments: date, from and to - jqxDate objects, oldViewType and newViewType - strings.

Code example

Bind to the viewChange event by type: jqxScheduler.

Adds a new appointment.

Begins an update process and stops the Scheduler's rendering and appointments rendering.

Clears the appointments selection.

Clears cells selection.

Closes the context menu.

Closes the edit dialog.

Deletes an appointment.

Destroys the Scheduler and removes it from the DOM.

Ends the update process and resumes the Scheduler's rendering. The method works together with the beginAppointmentsUpdate.

Scrolls to an appointment if it is out of the visible area.

Scrolls to a Date.

Exports jqxScheduler's data to ICS, Excel, HTML, XML, JSON, CSV or TSV. See also the exportSettings property

Focuses the Scheduler.

Gets the value of an Appointment property.

Gets the cells selection. Returns an object with the following members:

• from - jqxDate which represents the selection's start.
• to - jqxDate which represents the selection's end.
• resourceId - selection's resource Id if resources are enabled.

Gets the appointments loaded in jqxScheduler. The return value is an Array of objects. Each object has the appointmentDataFields. See appointmentDataFields property.

Gets the appointments loaded in jqxScheduler. The return value is an Array of objects. Each object has the fields defined in the dataAdapter's source object.

Hides appointments by given resourceId.

Opens the context menu.

Opens the edit dialog.

Selects an appointment.

Sets the value of an appointment's property.

Selects a cell.

Shows appointments by given resourceId.

Returns the scrollbable width.

Returns the scrollbable height.

Scrolls horizontally to a given position.

Scrolls vertically to a given position.