ejSchedule
11 Jul 201824 minutes to read
An Event calendar that manages the list of various activities like events/appointments.
Syntax
$(element).ejSchedule()Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule();
</script>Requires
- module:jQuery
- module:jquery.easing.min.js
- module:jsrender.min.js
- module:ej.globalize.min.js
- module:ej.core.js
- module:ej.data.js
- module:ej.scroller.js
- module:ej.touch.js
- module:ej.draggable.js
- module:ej.navigationdrawerbase.js
- module:ej.listviewbase.js
- module:ej.listview.js
- module:ej.radiobutton.js
- module:ej.editor.js
- module:ej.dropdownlist.js
- module:ej.autocomplete.js
- module:ej.menu.js
- module:ej.dialog.js
- module:ej.button.js
- module:ej.checkbox.js
- module:ej.datepicker.js
- module:ej.timepicker.js
- module:ej.navigationdrawer.js
- module:ej.recurrenceeditor.js
- module:ej.schedule.js
Members
allowDragAndDrop boolean
When set to true, Schedule allows the appointments to be dragged and dropped at required time.
Default Value
- true
Example - To disable the drag and drop functionality.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
allowDragAndDrop: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>allowInline boolean
When set to true, allows the user to create/edit appointments inline - simply through a single click made either on the Scheduler cells or on the existing appointment’s Subject text respectively. Pressing enter key after the new Subject text typed onto the inline created text box, will save/update the appointments appropriately.
Default Value
- false
Example - To create/edit appointments through inline.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
allowInline: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>allowDelete boolean
When set to false, disables the appointment delete option on the Scheduler.
Default Value
- true
Example - To disable deletion of appointments from the scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
allowDelete: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>allowKeyboardNavigation boolean
When set to true, Scheduler allows interaction through keyboard shortcut keys.
Default Value
- true
Example - To disable the Keyboard interaction with Schedule.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
allowKeyboardNavigation: false
});
});
</script>appointmentSettings Object
It includes the dataSource option and the fields related to Schedule appointments. The appointment fields within the appointmentSettings can accept both string and object type values. To apply validation rules on the appointment window fields, then the appointment fields needs to be defined with object type values.
Example – AppointmentSettings field mapped with string type values
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime"
}
});
});
</script>Example – AppointmentSettings field mapped with object type
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventSubject:"Play with pets",
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00),
EventDescription:"Pet Lovers!!!"
}],
id: "EventId",
subject: { field: "EventSubject", validationRules: { required: true } },
startTime: { field: "EventStartTime", validationRules: { required: true } },
endTime: { field: "EventEndTime", validationRules: { required: true } },
description: { field: "EventDescription", validationRules: { required: true, minlength: 5, maxlength: 500 } },
}
});
});
</script>appointmentSettings.dataSource Object|Array
The dataSource option accepts either JSON object collection or DataManager (ej.DataManager) instance that contains Schedule appointments.
Default Value
- []
Example - To set the dataSource with array of JSON object collection.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)
},
{
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00)
}]
}
});
});
</script>Example - To set the dataSource with data manager instance.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc/Events",
crossDomain: true
});
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: dataManager // passing remote url
}
});
});
</script>appointmentSettings.query string
It holds either the ej.Query() object or simply the query string that retrieves the specified records from the table.
Default Value
- null
Example - Query the data manager to fetch specific record count from the Events table.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc",
crossDomain: true
});
// Query creation
var query = ej.Query().from("Events").take(10);
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: dataManager, // passing remote url
query: query // query to retrieve the records from “Events” table
}
});
});
</script>appointmentSettings.tableName string
Assign the table name from where the records are to be fetched for the Schedule.
Default Value
- null
Example - Using tableName property to fetch all the records directly from it.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc",
crossDomain: true
});
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: dataManager, // passing remote url
tableName: "Events" // tableName to retrieve the records from it
}
});
});
</script>The following are the appointment fields that holds the appropriate column names from the dataSource. All its default values are
null.
appointmentSettings.applyTimeOffset boolean
When set to false, doesn’t consider the time difference offset calculation on appointment time.
Default Value
- true
Example - To set the timezone for schedule appointments or not.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
applyTimeOffset: false,
dataSource: [{
EventId: 101,
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime"
}
});
});
</script>appointmentSettings.editFutureEventsOnly boolean
When set to true, introduces a new option to edit only the future occurrences of the appointments in a recurrence series from the currently selected appointment’s date.
Default Value
- false
Example - To edit future appointments in recurrence series
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
editFutureEventsOnly: true,
dataSource: [{
EventId: 101,
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime"
}
});
});
</script>appointmentSettings.id string
Binds the id field name in dataSource to the id of Schedule appointments. It denotes the unique id assigned to appointments.
Default Value
- null
appointmentSettings.startTime string
Binds the name of startTime field in the dataSource with start time of the Schedule appointments. It indicates the date and Time when Schedule appointment actually starts.
Default Value
- null
appointmentSettings.endTime string
Binds the name of endTime field in dataSource with the end time of Schedule appointments. It indicates the date and time when Schedule appointment actually ends.
Default Value
- null
Example - To create a simple appointment with the fields id, startTime and endTime.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime"
}
});
});
</script>The fields startTime and endTime are mandatory fields to be specified to create an appointment.
appointmentSettings.subject string
Binds the name of subject field in the dataSource to appointment Subject. Indicates the Subject or title that gets displayed on Schedule appointments.
Default Value
- null
Example - To create an appointment with Subject.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00),
EventSubject: "Play with pets"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
</script>appointmentSettings.description string
Binds the description field name in dataSource. It indicates the appointment description.
Default Value
- null
Example - To create an appointment with Description.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00),
EventDescription: "Pet Lovers!!!"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
description: "EventDescription"
}
});
});
</script>Unlike Subject field that gets displayed over an appointment with corresponding time, the description doesn’t show up on it, by default. To display description over appointments, the appointment template can be used.
appointmentSettings.recurrence string
Binds the name of recurrence field in dataSource. It indicates whether the appointment is a recurrence appointment or not.
Default Value
- null
appointmentSettings.recurrenceRule string
Binds the name of recurrenceRule field in dataSource. It indicates the recurrence pattern associated with appointments.
Default Value
- null
Example - To create a recurrence appointment.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventSubject: "Play with Pets",
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00),
EventRecurrence: true,
EventRecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=10"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
recurrence: "EventRecurrence",
recurrenceRule: "EventRecurrenceRule"
}
});
});
</script>The recurrence and recurrenceRule fields are inter-dependent, as when the recurrence field is set to true, the recurrenceRule has to be defined mandatorily for an appointment.
appointmentSettings.allDay string
Binds the name of allDay field in dataSource. It indicates whether the appointment is an all-day appointment or not.
Default Value
- null
Example - To create an all-day appointment.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
appointmentSettings: {
dataSource: [{
EventId: 101,
EventSubject: "Play with Pets",
EventStartTime: new Date(2014, 4, 5, 10, 00),
EventEndTime: new Date(2014, 4, 5, 12, 00),
EventAllDay: true
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
allDay: "EventAllDay"
}
});
});
</script>appointmentSettings.resourceFields string
Binds one or more fields in resource collection dataSource. It maps the resource field names with appointments denoting the resource of appointments actually belongs.
Default Value
- null
Example - To create appointments in multiple resources scenario.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
group: {
resources: ["Owners"]
},
resources: [{
field: "ownerId", title: "Owner", name: "Owners",
allowMultiple: true,
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
ownerId: 2
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
// bind one or more resources fields separated by commas
resourceFields: "ownerId"
}
});
});
</script>appointmentSettings.categorize string
Binds the name of categorize field in dataSource. It indicates the categorize value, red categorize, green, yellow and so on applied to the appointments.
Default Value
- null
Example - To create appointments with categorize options.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
categorizeSettings: {
enable: true
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "6"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
categorize: "EventCategorize"
}
});
});
</script>There are six default Categorize colors available for appointments, Blue, Green, Orange, Purple, Red and Yellow that can be accessed by its default id values ranging from 1 to 6 respectively. The default Categorize collection can also be replaced with user-specified collection.
appointmentSettings.location string
Binds the name of location field in dataSource. It indicates the appointment location.
Default Value
- null
Example - To create appointments with categorize options.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
showLocationField: true,
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
EventLocation: "Hawaii"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
location: "EventLocation"
}
});
});
</script>To use the location field in Schedule, enable an additional API showLocationField that displays the location textbox on the default appointment window.
appointmentSettings.priority string
Binds the name of the priority field in dataSource. It indicates the priority, high, low, medium and none of the appointments.
Default Value
- null
Example - To create appointments with priority option.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
prioritySettings:{ enable:true },
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
EventPriority: "high"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
priority: "EventPriority"
}
});
});
</script>To use the priority field in Schedule, enable the prioritySettings that displays the priority textbox on the default appointment window.
appointmentSettings.startTimeZone string
Binds the name of start timezone field in dataSource. It indicates the timezone of appointment start date. When startTimeZone field is not mentioned, the appointment uses the Schedule timeZone or System timeZone.
Default Value
- null
appointmentSettings.endTimeZone string
Binds the name of end timezone field in dataSource. It indicates the timezone of appointment end date. When the endTimeZone field is not mentioned, the appointment uses the Schedule timeZone or System timeZone.
Default Value
- null
Example - To create appointments with StartTimeZone and EndTimeZone.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
prioritySettings: { enable: true },
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
EventStartTimeZone: "UTC +00:00",
EventEndTimeZone: "UTC +00:00"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
priority: "EventPriority",
startTimeZone: "EventStartTimeZone",
endTimeZone: "EventEndTimeZone"
}
});
});
</script>appointmentTemplateId string
Template design that applies on the Schedule appointments. All the field names that are mapped from dataSource to the appropriate field properties within the appointmentSettings can be used within the template.
Default Value
- null
Example - To set the appointment template.
<div id="Schedule"></div>
<script id="appTemplate" type="text/x-jsrender">
<div style="height:100%">
<div></div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
appointmentTemplateId: "#appTemplate",
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
Description: "Splendid Nature!!!"
}]
}
});
});
</script>cssClass string
Accepts the custom CSS class name that defines specific user-defined styles and themes to be applied for partial or complete elements of the Schedule.
Default Value
- ””
Example - To simply customize the background color of Scheduler header element by using custom CSS class name.
<div id="Schedule"></div>
<style type="text/css">
.customStyle .e-scheduleheader {
background-color: Teal;
}
</style>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
cssClass: "customStyle",
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>For more information on applying custom themes to Syncfusion controls, refer here.
categorizeSettings Object
Sets various categorize colors to the Schedule appointments to differentiate it.
categorizeSettings.allowMultiple boolean
When set to true, enables the multiple selection of categories to be applied for the appointments.
Default Value
- false
Example - To enable multiple selection of categories.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
categorizeSettings: {
enable: true,
allowMultiple: true
},
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "6,4,3"
}],
categorize: "EventCategorize"
}
});
});
</script>categorizeSettings.enable boolean
When set to true, enables the categories option to be applied for the appointments.
Default Value
- false
Example - To enable the categorize option.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
categorizeSettings: {
enable: true
},
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "6"
}],
categorize: "EventCategorize"
}
});
});
</script>categorizeSettings.dataSource Array|Object
The dataSource option accepts either the JSON object collection or DataManager [ej.DataManager] instance that contains the categorize data.
Default Value
[
{ text: "Blue Category", id: 1, color: "#43b496", fontColor: "#ffffff" },
{ text: "Green Category", id: 2, color: "#7f993e", fontColor: "#ffffff" },
{ text: "Orange Category", id: 3, color: "#cc8638", fontColor: "#ffffff" },
{ text: "Purple Category", id: 4, color: "#ab54a0", fontColor: "#ffffff" },
{ text: "Red Category", id: 5, color: "#dd654e", fontColor: "#ffffff" },
{ text: "Yellow Category", id: 6, color: "#d0af2b", fontColor: "#ffffff" }
]Example - To set the dataSource with array of JSON object collection.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
categorizeSettings: {
enable: true,
dataSource: [
{ text: "Good", id: 1, color: "#7499e1", fontColor: "red" },
{ text: "Excellent", id: 2, color: "#7cce6e", fontColor: "white" },
{ text: "Improve", id: 5, color: "#e04343", fontColor: "white" },
{ text: "Better", id: 6, color: "#f8f264", fontColor: "black"}]
},
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "6"
}],
categorize: "EventCategorize"
}
});
});
</script>The following are the category fields that holds appropriate column names from dataSource.
categorizeSettings.id string
Binds id field name in the dataSource to id of category data.
Default Value
- “id”
categorizeSettings.text string
Binds text field name in the dataSource to category text.
Default Value
- “text”
categorizeSettings.color string
Binds color field name in the dataSource to category color.
Default Value
- “color”
Example - To set the categorize options with id, text and color fields.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
categorizeSettings: {
enable: true,
dataSource: [
{ CategoryText: "Good", Id: 1, CategoryColor: "#7499e1" },
{ CategoryText: "Excellent", Id: 2, CategoryColor: "#7cce6e" },
{ CategoryText: "Improve", Id: 5, CategoryColor: "#e04343" },
{ CategoryText: "Better", Id: 6, CategoryColor: "#f8f264" }],
text: "CategoryText",
id: "Id",
color: "CategoryColor"
},
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "6"
}],
categorize: "EventCategorize"
}
});
});
</script>categorizeSettings.fontColor string
Binds fontColor field name in the dataSource to category font.
Default Value
- “fontColor”
Example - To set categorize options with fontColor.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
categorizeSettings: {
enable: true,
dataSource: [
{ text: "Good", id: 1, color: "#7499e1", fontColor: "red" },
{ text: "Excellent", id: 2, color: "#7cce6e", fontColor: "red" }]
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
EventCategorize: "2"
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
categorize: "EventCategorize"
}
});
});
</script>cellHeight string
Sets the height for Schedule cells.
Default Value
- “20px”
Example - To set cell height for Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
cellHeight: "35px",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>cellWidth string
Sets the width for Schedule cells.
Default Value
- ””
Example - To set the cell width for Schedule.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
cellWidth: "180px",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>contextMenuSettings Object
Holds all options related to the context menu settings of Scheduler.
contextMenuSettings.enable boolean
When set to true, enables the context menu options available for the Schedule cells and appointments.
Default Value
- false
Example - To enable the context menu options for Schedule control.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
contextMenuSettings: {
enable: true
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
</script>contextMenuSettings.menuItems Object
Contains all the default context menu options that are applicable for both Schedule cells and appointments. It also supports adding custom menu items to cells or appointment collection.
contextMenuSettings.menuItems.appointment Array
All the appointment related context menu items are grouped under this appointment menu collection.
Default Value
[
{ id: "open", text: "Open Appointment" },
{ id: "delete", text: "Delete Appointment" }
]contextMenuSettings.menuItems.cells Array
All the Scheduler cell related context menu items are grouped under this cells menu item collection.
Default Value
[
{ id: "new", text: "New Appointment" },
{ id: "recurrence", text: "New Recurring Appointment" },
{ id: "today", text: "Today" },
{ id: "gotoDate", text: "Go to date" },
{ id: "settings", text: "Settings" },
{ id: "view", text: "View", parentId: "settings" },
{ id: "timeMode", text: "TimeMode", parentId: "settings" },
{ id: "view_Day", text: "Day", parentId: "view" },
{ id: "view_Week", text: "Week", parentId: "view" },
{ id: "view_Workweek", text: "Workweek", parentId: "view" },
{ id: "view_Month", text: "Month", parentId: "view" },
{ id: "view_Agenda", text: "Agenda", parentId: "view" },
{ id: "timeMode_Hour12", text: "12 Hours", parentId: "timeMode" },
{ id: "timeMode_Hour24", text: "24 Hours", parentId: "timeMode" },
{ id: "workhours", text: "Work Hours", parentId: "settings" }
]Example - Default context menu options available for Schedule cells and appointments.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
contextMenuSettings: {
enable: true,
menuItems: {
appointment: [
{ id: "open", text: "Open Appointment" },
{ id: "delete", text: "Delete Appointment" }
],
cells: [
{ id: "new", text: "New Appointment" },
{ id: "recurrence", text: "New Recurring Appointment" },
{ id: "today", text: "Today" },
{ id: "gotoDate", text: "Go to date" },
{ id: "settings", text: "Settings" },
{ id: "view", text: "View", parentId: "settings" },
{ id: "timeMode", text: "TimeMode", parentId: "settings" },
{ id: "view_Day", text: "Day", parentId: "view" },
{ id: "view_Week", text: "Week", parentId: "view" },
{ id: "view_Workweek", text: "Workweek", parentId: "view" },
{ id: "view_Month", text: "Month", parentId: "view" },
{ id: "timeMode_Hour12", text: "12 Hours", parentId: "timeMode" },
{ id: "timeMode_Hour24", text: "24 Hours", parentId: "timeMode" },
{ id: "workhours", text: "Work Hours", parentId: "settings" }
]
}
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
</script>Example - To add custom context menu option to the Schedule appointments.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
contextMenuSettings: {
enable: true,
menuItems: {
appointment: [
{ id: "open", text: "Open Appointment" },
{ id: "delete", text: "Delete Appointment" },
{ id: "custom1", text: "Customize" }
],
cells: [
{ id: "new", text: "New Appointment" },
{ id: "recurrence", text: "New Recurring Appointment" },
{ id: "today", text: "Today" },
{ id: "gotoDate", text: "Go to date" }
]
}
},
menuItemClick: "onCustomMenuClick",
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
function onCustomMenuClick(args) {
if (args.events.ID == "custom1") {
$("#Appointment_" + args.targetInfo.EventId).find(".e-apptext").html("Custom Appointment");
$("#Appointment_" + args.targetInfo.EventId).css("background", "orange");
}
}
</script>In the above code example,
menuItemClickevent is defined that triggers when any of the menu options are selected. Here, the condition is checked as, when the id of selected menu item option contains custom1, then the target appointment’s text and its color gets modified.
currentDate Object
Sets current date of the Schedule. The Schedule displays initially with the date that is provided here.
Default Value
- new Date()
Example - To set current date for Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>currentView string|enum
Sets current view of the Schedule. Schedule renders initially with the view that is specified here. The available views are day, week, workweek, month, agenda and custom view - from which any one of the required view can be set to the Schedule. It accepts both string or enum values. The enum values that are accepted by currentView(ej.Schedule.CurrentView) are as follows,
| Name | Description |
|---|---|
| Day | Sets currentView of the Scheduler as Day |
| Week | Sets currentView of the Scheduler as Week |
| Workweek | Sets currentView of the Scheduler as WorkWeek |
| Month | Sets currentView of the Scheduler as Month |
| Agenda | Sets currentView of the Scheduler as Agenda |
| CustomView | Sets currentView of the Scheduler as CustomView with user-specified date range. |
Default Value
- ej.Schedule.CurrentView.Week
Example - To set the current view as Day for Schedule.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
currentView: ej.Schedule.CurrentView.Day,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>dateFormat string
Sets the date format for Schedule.
Default Value
- ””
Example - To set the date format for Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
dateFormat: "yyyy-MM-dd",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>showAppointmentNavigator boolean
When set to true, shows the previous/next appointment navigator button on the Scheduler.
Default Value
- true
Example - To hide the previous or next appointment navigator button.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
showAppointmentNavigator: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>enableAppointmentResize boolean
When set to true, enables the resize behavior of appointments within the Schedule.
Default Value
- true
Example - To disable appointment resizing.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
enableAppointmentResize: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>enableLoadOnDemand boolean
When set to true, enables the loading of Schedule appointments based on your demand. With this load on demand concept, the data consumption of the Schedule can be limited.
Default Value
- false
Example - To enable the load on demand functionality for Schedule.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
// To get the required appointments from service
url: "http://mvc.syncfusion.com/OdataServices/api/ScheduleData/",
crossDomain: true
});
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
// To enable Load on demand
enableLoadOnDemand: true,
appointmentSettings: {
dataSource: dataManager
}
});
});
</script>enablePersistence boolean
Saves the current model value to browser cookies for state maintenance. When the page gets refreshed, Schedule control values are retained.
Default Value
- false
Example - To enable persistence on Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
enablePersistence: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>enableRTL boolean
When set to true, the Schedule layout and behavior changes as per the common RTL conventions.
Default Value
- false
Example - To enable RTL in Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
enableRTL: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>endHour number
Sets the end hour time limit to be displayed on the Schedule.
Default Value
- 24
Example - To set end hour on the Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
endHour: 18,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>group Object
To configure resource grouping on the Schedule.
By default, group is assigned with null value.
group.resources Array
Holds the array of resource names to be grouped on the Schedule.
Example - To group the resources on Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 04, 05),
group: {
resources: ["Owners"]
},
appointmentSettings: {
resourceFields: "ResourceId",
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
ResourceId: 3
}]
},
resources: [
{
field: "ResourceId",
title: "Resource",
name: "Owners", allowMultiple: true,
resourceSettings: { dataSource: [
{ text: "Nancy", id: 1, groupId: 1, color: "#f8a398" },
{ text: "Steven", id: 3, groupId: 2, color: "#56ca85" },
{ text: "Michael", id: 5, groupId: 1, color: "#51a0ed" }],
text: "text", id: "id", groupId: "groupId", color: "color"
}
}]
});
});
</script>group.allowGroupEditing boolean
When set to true, allows performing CRUD actions simultaneously on all the grouped appointments of multiple resources.
Default Value
- false
Example - To set allowGroupEditing option,
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 04, 05),
group: {
resources: ["Owners"],
allowGroupEditing: true
},
appointmentSettings: {
resourceFields: "ResourceId",
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
ResourceId: 3
}]
},
resources: [
{
field: "ResourceId",
title: "Resource",
name: "Owners", allowMultiple: true,
resourceSettings: { dataSource: [
{ text: "Nancy", id: 1, groupId: 1, color: "#f8a398" },
{ text: "Steven", id: 3, groupId: 2, color: "#56ca85" },
{ text: "Michael", id: 5, groupId: 1, color: "#51a0ed" }],
text: "text", id: "id", groupId: "groupId", color: "color"
}
}]
});
});
</script>height string
Sets the height of the Schedule. Accepts both pixel and percentage values.
Default Value
- “1120px”
Example - To set the height of Scheduler in pixels.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
height: "500px",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>Example - To set height of Scheduler in percentage.
To set the percentage values for the Schedule height, define the parent element with some specific height that holds the Scheduler div. When the Schedule is not placed within any of the parent element, define the HTML and body tags explicitly with some height values either in pixel or percentage.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head>
<!--[CSS and SCRIPT reference section]-->
</head>
<body style="height:100%">
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
height: "500px",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>
</body>
</html>workHours Object
To define the work hours within the Schedule control.
workHours.highlight boolean
When set to true, highlights the work hours of the Schedule.
Default Value
- true
Example - To disable the highlighting of Schedule work hours.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
workHours:{
highlight:false
},
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>workHours.start number
Sets the start time to depict the start of working or business hour in a day.
Default Value
- 9
Example - To set the working start hour for Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
workHours:{
highlight:false,
start:7
},
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>workHours.end number
Sets the end time to depict the end of working or business hour in a day.
Default Value
- 18
Example - To set the working end hour for Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
workHours:{
highlight:false,
start:9,
end:20
},
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>isDST boolean
When set to true, enables the Schedule to observe Daylight Saving Time for supported timezones.
Default Value
- false
Example - To enable the Daylight Saving time in Schedule.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
isDST: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>isResponsive boolean
When set to true, adapts the Schedule layout to fit the screen size of devices on which it renders.
Default Value
- true
Example - To make the Scheduler adaptive.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
isResponsive: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>locale string
Sets the specific culture to the Schedule.
Default Value
- “en-US”
Example - To set the French culture on Schedule, set its locale as fr-FR.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
locale: "fr-FR",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>To set any culture for Schedule, refer to the required minified globalize files of the specific culture. For example, to use fr-FR culture in Schedule, refer to the globalize.culture.fr-FR.min.js script file. Also define the locale words of that specific culture properly. For example, define the locale words for fr-FR culture in a variable ej.Schedule.Locale[“fr-FR”] = { }; under script section.
maxDate Object
Sets the maximum date limit to display on the Schedule. Setting maxDate with specific date value disallows the Schedule to navigate beyond that date.
Default Value
- new Date(2099, 12, 31)
Example - To set the maximum date on the Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
maxDate: new Date(2014, 04, 06),
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>minDate Object
Sets the minimum date limit to display on the Schedule. Setting minDate with specific date value disallows the Schedule to navigate beyond that date.
Default Value
- new Date(1900, 01, 01)
Example - To set the minimum date on the Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
minDate: new Date(2014, 04, 03),
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>orientation string|enum
Sets the mode of Schedule rendering either in a vertical or horizontal direction. It accepts either string(“vertical” or “horizontal”) or enum values. The enum values that are accepted by orientation(ej.Schedule.Orientation) are as follows,
| Name | Description |
|---|---|
| Vertical | Set orientation as vertical to Scheduler |
| Horizontal | Set orientation as horizontal to Scheduler |
Default Value
- ej.Schedule.Orientation.Vertical
Example - To render the Scheduler in horizontal orientation.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
orientation: "horizontal",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>prioritySettings Object
Holds all the options related to priority settings of the Schedule.
prioritySettings.enable boolean
When set to true, enables the priority options available for the Schedule appointments.
Default Value
- false
Example - To enable the priority option in Schedule.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
prioritySettings: { enable: true },
appointmentSettings: {
priority: "Priority",
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
Priority: "high"
}]
}
});
});
</script>prioritySettings.dataSource Object|Array
The dataSource option can accept the JSON object collection that contains the priority related data.
Default Value
[
{ text: "None", value: "none" },
{ text: "High", value: "high" },
{ text: "Medium", value: "medium" },
{ text: "Low", value: "low" }
]Example - To set the dataSource with array of JSON object collection.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
prioritySettings: {
enable: true,
dataSource: [
{ text: "None", value: "none" },
{ text: "High", value: "high" },
{ text: "Medium", value: "medium" },
{ text: "Low", value: "low" }]
},
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventPriority: "low"
}],
priority: "EventPriority"
}
});
});
</script>The following are the priority fields that holds the appropriate column names from dataSource.
prioritySettings.text string
Binds text field name in the dataSource to prioritySettings text. These text gets listed out in priority field of the appointment window.
Default Value
- “text”
prioritySettings.value string
Binds value field name in the dataSource to prioritySettings value. These field names usually accepts four priority values by default, high, low, medium and none.
Default Value
- “value”
Example - To set the priority options with text and value fields.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
prioritySettings: {
enable: true,
dataSource: [
{ PriorityText: "None", PriorityValue: "none" },
{ PriorityText: "Important", PriorityValue: "high" },
{ PriorityText: "Normal", PriorityValue: "medium" },
{ PriorityText: "Least", PriorityValue: "low" }],
text: "PriorityText",
value: "PriorityValue"
},
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 4, 2, 9, 00),
EndTime: new Date(2014, 4, 2, 10, 30),
EventPriority: "low"
}],
priority: "EventPriority"
}
});
});
</script>prioritySettings.template string
Allows priority field customization in the appointment window to add custom icons denoting the priority level for the appointments.
Default Value
- null
Example - To set the template for priority option in Schedule.
<div id="Schedule"></div>
<style type="text/css">
.high,
.medium {
height: 13px;
width: 13px;
float: left;
margin-right: 4px;
background-repeat: no-repeat;
background-size: 60px;
padding: 1px;
margin-top: 2px;
}
.high {
/*background: url('Content/ej/web/images/critical.png');*/
background-color: orange;
background-position: -13px;
}
.medium {
/*background: url('Content/ej/web/images/ultracritical.png');*/
background-color: #56ca85;
background-position: -59px;
}
</style>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
prioritySettings: {
enable: true,
dataSource: [
{ text: "High", value: "high" },
{ text: "Normal", value: "medium" }],
text: "text", value: "value",
template: "<div class='${value}'></div>"
},
appointmentSettings: {
priority: "Priority",
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
Priority: "high"
}]
}
});
});
</script>Since the
prioritySettingscontains the default values in its dataSource like none, high, medium and low, the appropriate CSS classes has to be created with the same value names to apply it on the template.
readOnly boolean
When set to true, disables the interaction with the Schedule appointments, simply allowing the date and view navigation to occur.
Default Value
- false
Example - To make the Scheduler readOnly.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
readOnly: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>reminderSettings Object
Holds all the options related to reminder settings of the Schedule.
reminderSettings.enable boolean
When set to true, enables the reminder option available for the Schedule appointments.
Default Value
- false
Example - To enable the reminder option in Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
reminderSettings: { enable: true },
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>reminderSettings.alertBefore number
Sets the timing, when the reminders are to be alerted for the Schedule appointments.
Default Value
- 5
Example - To set the alert for Schedule appointments.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
reminderSettings: { enable: true, alertBefore: 7 },
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>renderDates Object
Defines the specific start and end dates to be rendered in the Schedule control. To render such user-specified custom date ranges in the Schedule control, set the currentView property to ej.Schedule.CurrentView.CustomView.
Default Value
- null
renderDates.start Object
Sets the start of custom date range to be rendered in the Schedule.
Default Value
- null
renderDates.end Object
Sets the end limit of the custom date range.
Default Value
- null
Example - To set the custom date range in Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
views: ["Day", "Week", "WorkWeek", "Month", "CustomView"],
currentView: ej.Schedule.CurrentView.CustomView,
renderDates: {
start: new Date(2014, 11, 7),
end: new Date(2014, 12, 10)
},
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>resourceHeaderTemplateId string
Template design that applies on the Schedule resource header.
All field names that are mapped from the dataSource to appropriate field properties within the resourceSettings can be used within the template.
Default Value
- null
Example - To set the resource header template.
<div id="Schedule"></div>
<script id="resTemplate" type="text/x-jsrender">
<div style="height:100%">
<div style="width:15px;height:15px;margin-left:25px;margin-top:3px;float:left;background:;"></div><div></div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resourceHeaderTemplateId: "#resTemplate",
group: {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",
title: "Room",
name: "Rooms", allowMultiple: false,
resourceSettings: { dataSource: [
{ text: "ROOM1", id: 1, color: "#cb6bb2" },
{ text: "ROOM2", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
resourceFields: "roomId",
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
roomId: 2
}]
}
});
});
</script>resources Array
Holds all the options related to the resources settings of the Schedule. It is a collection of one or more resource objects, where the levels of resources are rendered on the Schedule based on the order of the resource data provided within this collection.
Default Value
- null
resources.field string
It holds the name of the resource field to be bound to the Schedule appointments that contains the resource Id.
Default Value
- null
Example - To specify the resource field.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resources: [{
field: "ownerId", title: "Owner",
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2
}],
// bind one or more resources fields separated by commas
resourceFields: "ownerId"
}
});
});
</script>resources.title string
It holds the title name of the resource field to be displayed on the Schedule appointment window.
Default Value
- null
Example - To specify the resource title.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resources: [{
field: "ownerId", title: "Owner",
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2
}],
resourceFields: "ownerId"
}
});
});
</script>resources.name string
A unique resource name that is used for differentiating various resource objects while grouping it in various levels.
Default Value
- null
Example - To specify the resource name field.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
group: {
resources: ["Owners"],
},
resources: [{
field: "ownerId", title: "Owner",
name: "Owners",
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2
}],
// bind one or more resources fields separated by commas
resourceFields: "ownerId"
}
});
});
</script>resources.allowMultiple boolean
When set to true, allows multiple selection of resource names, thus creating multiple instances of same appointment for the selected resources.
Default Value
- false
Example - To set allowMultiple option for a resource object.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resources: [{
field: "ownerId", title: "Owner",
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca95"}],
text: "text", id: "id", color: "color"
}
},
{
field: "roomId", title: "Room(s)",
allowMultiple: true,
resourceSettings: {
dataSource: [
{ text: "Room1", id: 1, groupId: 1, color: "#f8a398" },
{ text: "Room2", id: 2, groupId: 2, color: "#56ca85"},
{ text: "Room3", id: 3, groupId: 2, color: "#56ac88"}],
text: "text", id: "id", color: "color", groupId: "groupId"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2,
roomId: 3
}],
resourceFields: "ownerId,roomId"
}
});
});
</script>resources.resourceSettings Object
It holds the field names of the resources to be bound to the Schedule and also the dataSource.
resources.resourceSettings.dataSource Object|Array
The dataSource option accepts either JSON object collection or DataManager (ejDataManager) instance that contains the resources related data.
Default Value
- []
Example - To set the dataSource with array of JSON object collection.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resources: [{
field: "ownerId", title: "Owner",
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2
}],
resourceFields: "ownerId"
}
});
});
</script>The following are the resourceSettings fields, that maps the appropriate column names from the dataSource.
resources.resourceSettings.text string
Binds text field name in the dataSource to resourceSettings text. These text gets listed out in resources field of the appointment window.
Default Value
- null
resources.resourceSettings.id string
Binds id field name in the dataSource to resourceSettings id.
Default Value
- null
resources.resourceSettings.groupId string
Binds groupId field name in the dataSource to resourceSettings groupId.
Default Value
- null
resources.resourceSettings.color string
Binds color field name in the dataSource to resourceSettings color. The color specified here gets applied to the Schedule appointments denoting to the resource it belongs.
Default Value
- null
resources.resourceSettings.start string
Binds the starting work hour field name in the dataSource. It’s optional, but providing it with some numeric value will set the starting work hour for specific resources.
Default Value
- null
resources.resourceSettings.end string
Binds the end work hour field name in the dataSource. It’s optional, but providing it with some numeric value will set the end work hour for specific resources.
Default Value
- null
resources.resourceSettings.workWeek string
Binds the resources working days field name in the dataSource. It’s optional, and accepts the array of strings (week day names). When provided with specific collection of days (array of day names), only those days will render for the specific resources.
Default Value
- null
Example - To set the resources options with id, text, groupId, color, start, end and workWeek fields.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resources: [{
field: "ownerId", title: "Owner",
resourceSettings: {
dataSource: [
{ OwnerText: "Nancy", id: 1, OwnerColor: "#f8a398" },
{ OwnerText: "Steven", id: 2, OwnerColor: "#56ca95"}],
text: "OwnerText", id: "id", color: "OwnerColor"
}
},
{
field: "roomId", title: "Room(s)",
resourceSettings: {
dataSource: [
// groupId groups the current resources under the previous level of resource object
{ text: "Room1", id: 1, groupId: 1, color: "#f8a398", start: "10", end: "15", workWeek: ["monday","wednesday","friday"] },
{ text: "Room2", id: 2, groupId: 2, color: "#56ca85", start: "10", end: "15", workWeek: ["tuesday","thursday"] },
{ text: "Room3", id: 3, groupId: 2, color: "#56ac88", start: "10", end: "15", workWeek: ["sunday","saturday"] }],
text: "text", id: "id", color: "color", groupId: "groupId", start: "start", end: "end", workWeek: "workWeek"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2,
roomId: 3
}],
resourceFields: "ownerId,roomId"
}
});
});
</script>resources.resourceSettings.appointmentClass string
Binds appointmentClass field name in the dataSource. It applies custom CSS class name to appointments depicting to the resource it belongs.
Default Value
- null
Example - To customize the styles of the appointments based on the resources it belongs, use the appointmentClass field with other resources options.
<div id="Schedule"></div>
<style type="text/css">
.e-schedule .e-appointcss1
{
background-color: Maroon;
color: Orange;
}
.e-schedule .e-appointcss2
{
background-color: Orange;
color: Maroon;
}
</style>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
resources: [{
field: "ownerId", title: "Owner",
resourceSettings: {
dataSource: [
{ OwnerText: "Nancy", id: 1, customClass: "e-appointcss1" },
{ OwnerText: "Steven", id: 2, customClass: "e-appointcss2"}],
text: "OwnerText", id: "id", appointmentClass: "customClass"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2014, 04, 05, 9, 00),
EndTime: new Date(2014, 04, 05, 10, 30),
ownerId: 2
},
{
Id: 101,
Subject: "Discovery of exoplanets",
StartTime: new Date(2014, 04, 07, 6, 00),
EndTime: new Date(2014, 04, 07, 9, 30),
ownerId: 1
}],
resourceFields: "ownerId"
}
});
});
</script>The custom CSS class names defined separately for each resources within ‘style’ tag are prefixed with the class name ‘.e-schedule’, only then it gets applied to the appointments.
showAllDayRow boolean
When set to true, displays the all-day row cells on the Schedule.
Default Value
- true
Example - To hide the all-day row cells.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showAllDayRow: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>showWeekend boolean
When set to false, hides the weekend days on all the Scheduler views.
Default Value
- true
Example - To hide the weekend days.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showWeekend: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>showCurrentTimeIndicator boolean
When set to true, displays the current time indicator on the Schedule.
Default Value
- true
Example - To hide the current time indicator.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showCurrentTimeIndicator: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>showHeaderBar boolean
When set to true, displays the header bar on the Schedule.
Default Value
- true
Example - To hide the Schedule header bar.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showHeaderBar: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>showLocationField boolean
When set to true, displays the location field additionally on Schedule appointment window.
Default Value
- false
Example - To show the location field.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showLocationField: true,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
Location: "Chicago"
}],
location: "Location"
}
});
});
</script>showTimeZoneFields boolean
When set to false, doesn’t render the start and end timezone fields on the Schedule appointment window.
Default Value
- true
Example - To show or hide the timezone field in appointment window.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showTimeZoneFields: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
Location: "Chicago"
}],
location: "Location"
}
});
});
</script>showQuickWindow boolean
When set to true, displays the quick window for every single click made on the Schedule cells or appointments.
Default Value
- true
Example - To hide the quick window.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
showQuickWindow: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>startHour number
Sets the start hour time range to be displayed on the Schedule.
Default Value
- 0
Example - To set the start hour on the Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
startHour: 9,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>timeMode string|enum
Sets either 12 or 24 hour time mode on the Schedule. It accepts either the string value(“12” or “24”) or the below mentioned enum values. The enum values that are accepted by timeMode(ej.Schedule.TimeMode) are as follows,
| Name | Description |
|---|---|
| Hour12 | Sets 12 hour time mode to Scheduler |
| Hour24 | Sets 24 hour time mode to Scheduler |
Default Value
- null
Example - To set the 24 hour time mode on the Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
timeMode: ej.Schedule.TimeMode.Hour24,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>timeZone string
Sets the timezone for the Schedule.
Default Value
- null
Example - To set the timezone in Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
timeZone: "UTC +2:00",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>timeZoneCollection Object
Sets the collection of timezone items to be bound to the Schedule. Only the items bound to this property gets listed out in the timezone field of the appointment window.
timeZoneCollection.dataSource Object
Sets the collection of timezone items to the dataSource that accepts either JSON object collection or DataManager (ej.DataManager) instance that contains Schedule timezones.
Default Value
[
{ text: "UTC -12:00", id: "1", value: "UTC -12:00" },
{ text: "UTC -11:00", id: "2", value: "UTC -11:00" },
{ text: "UTC -10:00", id: "3", value: "UTC -10:00" },
{ text: "UTC -09:00", id: "4", value: "UTC -09:00" },
{ text: "UTC -08:00", id: "5", value: "UTC -08:00" },
{ text: "UTC -07:00", id: "6", value: "UTC -07:00" },
{ text: "UTC -06:00", id: "7", value: "UTC -06:00" },
{ text: "UTC -05:00", id: "8", value: "UTC -05:00" },
{ text: "UTC -04:30", id: "9", value: "UTC -04:30" },
{ text: "UTC -04:00", id: "10", value: "UTC -04:00" },
{ text: "UTC -03:30", id: "11", value: "UTC -03:30" },
{ text: "UTC -03:00", id: "12", value: "UTC -03:00" },
{ text: "UTC -02:00", id: "13", value: "UTC -02:00" },
{ text: "UTC -01:00", id: "14", value: "UTC -01:00" },
{ text: "UTC +00:00", id: "15", value: "UTC +00:00" },
{ text: "UTC +01:00", id: "16", value: "UTC +01:00" },
{ text: "UTC +02:00", id: "17", value: "UTC +02:00" },
{ text: "UTC +03:00", id: "18", value: "UTC +03:00" },
{ text: "UTC +03:30", id: "19", value: "UTC +03:30" },
{ text: "UTC +04:00", id: "20", value: "UTC +04:00" },
{ text: "UTC +04:30", id: "21", value: "UTC +04:30" },
{ text: "UTC +05:00", id: "22", value: "UTC +05:00" },
{ text: "UTC +05:30", id: "23", value: "UTC +05:30" },
{ text: "UTC +05:45", id: "24", value: "UTC +05:45" },
{ text: "UTC +06:00", id: "25", value: "UTC +06:00" },
{ text: "UTC +06:30", id: "26", value: "UTC +06:30" },
{ text: "UTC +07:00", id: "27", value: "UTC +07:00" },
{ text: "UTC +08:00", id: "28", value: "UTC +08:00" },
{ text: "UTC +09:00", id: "29", value: "UTC +09:00" },
{ text: "UTC +09:30", id: "30", value: "UTC +09:30" },
{ text: "UTC +10:00", id: "31", value: "UTC +10:00" },
{ text: "UTC +11:00", id: "32", value: "UTC +11:00" },
{ text: "UTC +12:00", id: "33", value: "UTC +12:00" },
{ text: "UTC +13:00", id: "34", value: "UTC +13:00" }
]Example - To set the dataSource with array of JSON object collection.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
timeZoneCollection:{
dataSource: [
{ text: "UTC -12:00", id: "1", value: "UTC -12:00" },
{ text: "UTC -11:00", id: "2", value: "UTC -11:00" },
{ text: "UTC -10:00", id: "3", value: "UTC -10:00" },
{ text: "UTC -09:00", id: "4", value: "UTC -09:00" },
{ text: "UTC -08:00", id: "5", value: "UTC -08:00" },
{ text: "UTC -07:00", id: "6", value: "UTC -07:00" }]
},
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>The following are the timeZoneCollection fields that maps the appropriate column names from the dataSource.
timeZoneCollection.text string
Binds text field name in the dataSource to timeZoneCollection text. These text gets listed out in the timezone fields of the appointment window.
Default Value
- “text”
timeZoneCollection.id string
Binds id field name in the dataSource to timeZoneCollection id.
Default Value
- “id”
timeZoneCollection.value string
Binds value field name in the dataSource to timeZoneCollection value.
Default Value
- “value”
Example - To define the timeZoneCollection options by using all the above specified fields.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
timeZoneCollection:{
dataSource: [
{ text: "UTC -12:00", id: "1", value: "UTC -12:00" },
{ text: "UTC -11:00", id: "2", value: "UTC -11:00" },
{ text: "UTC -10:00", id: "3", value: "UTC -10:00" },
{ text: "UTC -09:00", id: "4", value: "UTC -09:00" },
{ text: "UTC -08:00", id: "5", value: "UTC -08:00" },
{ text: "UTC -07:00", id: "6", value: "UTC -07:00" }],
text: "text", id: "id", value: "value"
},
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>views Array
Defines the view collection to be displayed on the Schedule. By default, it displays all the views namely, Day, Week, WorkWeek and Month.
Default Value
- [“Day”, “Week”, “WorkWeek”, “Month”, “Agenda”]
Example - To display only the day and week view on the Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
views: ["Day", "Week"],
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>width string
Sets the width of the Schedule. Accepts both pixel and percentage values.
Default Value
- “100%”
Example - To set the width of the Schedule in pixels.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 04, 05),
width: "600px",
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>enableRecurrenceValidation boolean
When set to true, Schedule allows the validation of recurrence pattern to take place before it is being assigned to the appointments. For example, when one of the instance of recurrence appointment is dragged beyond the next or previous instance of the same recurrence appointment, a pop-up is displayed with the validation message disallowing the drag functionality.
Default Value
- true
Example - To disable the RecurrenceValidation for Schedule appointments.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
enableRecurrenceValidation: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00),
Recurrence: true,
RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=10"
}]
}
});
});
</script>agendaViewSettings Object
Sets the week to display more than one week appointment summary.
agendaViewSettings.daysInAgenda number
You can display the summary of multiple week’s appointment by setting this value.
Default Value
- 7
Example - To set the daysInAgenda of agendaViewSettings.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
agendaViewSettings: {
daysInAgenda: 10
}
});
});
</script>agendaViewSettings.dateColumnTemplateId string
You can customize the Date column display based on the requirement.
Default Value
- null
Example - To display the StartTime value in the date column of agenda View.
<div id="Schedule"></div>
<script id="dateColumnTemplate" type="text/x-jsrender">
<div style="height:100%">
<div>
<div></div>
</div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
agendaViewSettings: {
daysInAgenda: 7,
dateColumnTemplateId: "#dateColumnTemplate"
},
});
});
</script>agendaViewSettings.timeColumnTemplateId string
You can customize the time column display based on the requirement.
Default Value
- null
Example - To display the StartTime value in the time column of agenda View.
<div id="Schedule"></div>
<script id="timeColumnTemplate" type="text/x-jsrender">
<div style="height:100%">
<div>
<div></div>
</div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
agendaViewSettings: {
daysInAgenda: 7,
timeColumnTemplateId: "#timeColumnTemplate"
}
});
});
</script>firstDayOfWeek string
Sets specific day as the starting day of the week.
Default Value
- null
Example - To set Saturday as starting day of the week.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
firstDayOfWeek:"Saturday",
});
});
</script>workWeek Array
Sets different day collection within workWeek view.
Default Value
- [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”]
Example - To set Tuesday to Saturday as workWeek days.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
workWeek: ["Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]
});
});
</script>tooltipSettings Object
Allows to pop-up appointment details in a tooltip while hovering over the appointments.
tooltipSettings.enable boolean
Enables or disables the tooltip display.
Default Value
- false
Example - To enable the tooltip display.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
tooltipSettings: {
enable: true
}
});
});
</script>tooltipSettings.templateId string
Template design that customizes the tooltip. All the field names that are mapped from dataSource to the appropriate field properties within the appointmentSettings can be accessed within the template.
Default Value
- null
Example - To display the customized tooltip.
<div id="Schedule"></div>
<script id="tooltip" type="text/x-jsrender">
<div>
<div>Subject: </div>
<div>StartTime: </div>
<div>EndTime: </div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
tooltipSettings:{
enable: true,
templateId:"#tooltip"
},
});
});
</script>timeScale Object
Holds all the options related to the time scale of Scheduler. The timeslots either major or minor slots can be customized with this property.
timeScale.enable boolean
When set to true, displays the time slots on the Scheduler.
Default Value
- true
Example – To display the timescale on Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
timeScale: {
enable: true
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
</script>timeScale.minorSlotCount number
When set with some specific value, defines the number of time divisions split per hour(as per value given for the majorTimeSlot). Those time divisions are meant to be the minor slots.
Default Value
- 2
timeScale.majorSlot number
Accepts the value in minutes. When provided with specific value, displays the appropriate time interval on the Scheduler
Default Value
- 60
Example – To set the specific major and minor slots for Scheduler.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
timeScale: {
enable: true,
minorSlotCount: 2,
majorSlot: 60,
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
</script>NOTE
When
majorTimeSlotis provided with the value 60 andminorTimeSlotCountis given as 2, then the Scheduler splits each hour into 2 timeslots with half an hour time difference for each row, which means that 30 minutes time interval is actually set to the Scheduler.
timeScale.minorSlotTemplateId string
Template design that customizes the timecells (minor slots) that are partitioned based on minorSlotCount. Accepts id value of the template defined for minor time slots.
Default Value
- null
timeScale.majorSlotTemplateId string
Template design that customizes the timecells (major slots). Accepts id value of the template defined for major time slots.
Default Value
- null
Example – To set the template for minor slots and major slots.
<div id="Schedule"></div>
<script id="timeMinorTemplate" type="text/x-jsrender">
<div style='font-size:9px !important;'></div>
</script>
<script id="timeMajorTemplate" type="text/x-jsrender">
<div style='font-size:9px !important;'></div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
timeScale: {
enable: true,
minorSlotCount: 2,
majorSlot: 60,
majorSlotTemplate:"#timeMinorTemplate",
minorSlotTemplate:"#timeMajorTemplate"
},
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
function _timeMinorFormat(date) {
var tFormat = Globalize.format(new Date(date),"hh:mm:ss tt");
return tFormat;
}
$.views.helpers({ timeMinorTemp: _timeMinorFormat });
function _timeMajorFormat(date) {
var tFormat = Globalize.format(new Date(date), "mm:ss ");
return tFormat;
}
$.views.helpers({ timeMajorTemp: _timeMajorFormat });
</script>showDeleteConfirmationDialog boolean
When set to true, shows the delete confirmation dialog before deleting an appointment.
Default Value
- true
Example – To hide the display of delete confirmation dialog.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
showDeleteConfirmationDialog: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>allDayCellsTemplateId string
Accepts the id value of the template layout defined for the all-day cells and customizes it.
Default Value
- null
Example - To display the customized all-day cells.
<div id="Schedule"></div>
<script id="dateColumnTemplate" type="text/x-jsrender">
<div style="height:100%">
<div></div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
allDayCellsTemplateId: "#dateColumnTemplate"
});
});
</script>workCellsTemplateId string
Accepts the id value of the template layout defined for the work cells and month cells.
Default Value
- null
Example - To display the customized Scheduler cells.
<div id="Schedule"></div>
<script id="dateColumnTemplate" type="text/x-jsrender">
<div style="height:100%">
<div></div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
workCellsTemplateId: "#dateColumnTemplate"
});
});
</script>dateHeaderTemplateId string
Accepts the id value of the template layout defined for the date header cells and customizes it.
Default Value
- null
Example - To display the customized header cells.
<div id="Schedule"></div>
<script id="dateColumnTemplate" type="text/x-jsrender">
<div style="height:100%">
<div></div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
dateHeaderTemplateId: "#dateColumnTemplate"
});
});
</script>showOverflowButton boolean
when set to false, allows the height of the work-cells to adjust automatically (either expand or collapse) based on the number of appointment count it has.
Default Value
- true
Example – To auto adjust cell height, set showOverflowButton to false.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
showOverflowButton:false,
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30)
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject"
}
});
});
</script>appointmentDragArea string
Allows setting draggable area for the Scheduler appointments. Also, turns on the external drag and drop, when set with some specific external drag area name.
Default Value
- ””
Example - To enable external drag and drop support.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
appointmentDragArea:"body"
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>showNextPrevMonth boolean
When set to true, displays the other months days from the current month on the Schedule.
Default Value
- true
Example - To hide the other months days from the current month.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
width: "100%",
currentDate: new Date(2014, 04, 05),
currentView: "month",
showNextPrevMonth: false,
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>blockoutSettings Object
Blocks the user-specific time interval on the Scheduler, so that no appointments can be created on that particular time slots. It includes the dataSource option and also the fields related to block intervals.
blockoutSettings.enable boolean
When set to true, enables the blockout option to be applied on the Scheduler cells.
Default Value
- false
Example - To enable the block intervals option.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable:true,
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)
}]
}
});
});
</script>blockoutSettings.templateId string
Template design that applies on the Schedule block intervals. All the field names that are mapped from dataSource to the appropriate field properties within the blockoutSettings can be used within the template.
Default Value
- null
Example - To set the block intervals template.
<div id="Schedule"></div>
<script id="blockTemplate" type="text/x-jsrender">
<div style="height:100%">
<div></div>
</div>
</script>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
blockoutSettings: {
enable: true,
templateId: "#blockTemplate",
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 11, 00)
}]
}
});
});
</script>blockoutSettings.dataSource Object|Array
The dataSource option accepts either JSON object collection or DataManager (ej.DataManager) instance that contains Schedule block intervals.
Default Value
- []
Example - To set the dataSource with array of JSON object collection.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate:new Date(2014,4,5),
blockoutSettings: {
enable:true,
dataSource: [{
Id: 101,
Subject: "Service",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00)
},
{
Id: 102,
Subject: "Bad Monsoon",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00)
}]
}
});
});
</script>Example - To set the dataSource with data manager instance.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc/Events",
crossDomain: true
});
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
dataSource: dataManager // passing remote url
}
});
});
</script>blockoutSettings.query string
It holds either the ej.Query() object or simply the query string that retrieves the specified records from the table.
Default Value
- null
Example - Query the data manager to fetch specific record count from the Events table.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc",
crossDomain: true
});
// Query creation
var query = ej.Query().from("Events").take(10);
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable:true,
dataSource: dataManager, // passing remote url
query: query // query to retrieve the records from “Events” table
}
});
});
</script>blockoutSettings.tableName string
Assign the table name from where the records are to be fetched for the Schedule.
Default Value
- null
Example - Using tableName property to fetch all the records directly from it.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
// DataManager creation
var dataManager = ej.DataManager({
url: "http://mvc.syncfusion.com/OdataServices/Northwnd.svc",
crossDomain: true
});
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable: true,
dataSource: dataManager, // passing remote url
tableName: "Events" // tableName to retrieve the records from it
}
});
});
</script>The following are the block time fields that holds the appropriate column names from the dataSource. All its default values are
null.
blockoutSettings.id string
Binds the id field name in dataSource to the id of block time interval. It denotes the unique id assigned to each of the block records.
Default Value
- null
blockoutSettings.startTime string
Binds the name of startTime field in the dataSource with start time of block time interval. It indicates the date and time, when the block interval actually starts in the Scheduler.
Default Value
- null
blockoutSettings.endTime string
Binds the name of endTime field in dataSource with the end time of block time interval. It indicates the date and time, when the block interval actually ends in the Scheduler.
Default Value
- null
Example - To create a block intervals with the fields id, startTime and endTime.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 5, 10, 00),
BlockEndTime: new Date(2014, 4, 5, 11, 00)
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime"
}
});
});
</script>The fields startTime and endTime are mandatory fields to create the block intervals.
blockoutSettings.subject string
Binds the name of subject field in the dataSource to block time Subject. Indicates the Subject or title that gets displayed on the Schedule block intervals.
Default Value
- null
Example - The block intervals with Subject.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 5, 10, 00),
BlockEndTime: new Date(2014, 4, 5, 11, 00),
BlockSubject: "Holiday"
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject"
}
});
});
</script>blockoutSettings.isBlockAppointment string
Binds the name of isBlockAppointment field in dataSource. When set to true, disables the appointments that lies on the blocked area and restrict to perform CRUD operations in it.
Default Value
- null
Example - To restrict the CRUD operations on the appointments that lies behind the blocked intervals.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 5, 10, 00),
BlockEndTime: new Date(2014, 4, 5, 11, 00),
BlockSubject: "Holiday",
IsBlockAppointment: true
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject",
isBlockAppointment: "IsBlockAppointment"
}
});
});
</script>blockoutSettings.isAllDay string
Binds the name of isAllDay field in dataSource. It indicates whether an entire day is blocked or not.
Default Value
- null
Example - To limits the entire day
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 5, 10, 00),
BlockEndTime: new Date(2014, 4, 5, 11, 00),
BlockSubject: "Holiday",
IsBlockAppointment: true,
FullDay: true
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject",
isBlockAppointment: "IsBlockAppointment",
isAllDay: "FullDay"
}
});
});
</script>blockoutSettings.resourceId string
Binds the name of resourceId field in dataSource. Specifies the id of the resources, to which the time intervals are needed to be blocked.
Default Value
- null
Example - Block intervals for multiple resources scenario.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
group: {
resources: ["Owners"]
},
resources: [{
field: "ownerId", title: "Owner", name: "Owners",
allowMultiple: true,
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, color: "#f8a398" },
{ text: "Steven", id: 2, color: "#56ca85"}],
text: "text", id: "id", color: "color"
}
}],
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
ownerId: 2
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
resourceFields: "ownerId"
},
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 1, 10, 00),
BlockEndTime: new Date(2014, 4, 1, 11, 00),
BlockSubject: "Travel",
IsBlockAppointment: true,
BlockResId: 2
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject",
isBlockAppointment: "IsBlockAppointment",
resourceId: "BlockResId"
}
});
});
</script>blockoutSettings.groupId string
Binds the name of groupId field in dataSource. Specifies the id of the resource group, to which the time intervals are needed to be blocked.
Default Value
- null
Example - Block intervals for multiple resources scenario.
<div id="Schedule"></div>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 2),
group: {
resources: ["Owners", "Rooms"]
},
resources: [{
field: "ownerId",
title: "Owner",
name: "Owners",
resourceSettings: {
dataSource: [{
OwnerText: "Nancy",
id: 1,
OwnerColor: "#f8a398"
}, {
OwnerText: "Steven",
id: 2,
OwnerColor: "#56ca95"
}],
text: "OwnerText", id: "id", color: "OwnerColor"
}
}, {
field: "roomId",
title: "Room(s)",
name: "Rooms",
resourceSettings: {
dataSource: [{
text: "Room1",
id: 1,
groupId: 1,
color: "#f8a398"
}, {
text: "Room2",
id: 2,
groupId: 2,
color: "#56ca85"
}, {
text: "Room3", id: 3, groupId: 2, color: "#56ac88"
}],
text: "text", id: "id", color: "color", groupId: "groupId"
}
}],
appointmentSettings: {
dataSource: [{
EventId: 100,
EventSubject: "Research on Sky Miracles",
EventStartTime: new Date(2014, 4, 2, 9, 00),
EventEndTime: new Date(2014, 4, 2, 10, 30),
ownerId: 2,
roomId: 1
}],
id: "EventId",
startTime: "EventStartTime",
endTime: "EventEndTime",
subject: "EventSubject",
resourceFields: "ownerId,roomId"
},
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 1, 10, 00),
BlockEndTime: new Date(2014, 4, 1, 11, 00),
BlockSubject: "Travel",
IsBlockAppointment: true,
BlockResId: 2,
BlockGrpId: 1,
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject",
isBlockAppointment: "IsBlockAppointment",
resourceId: "BlockResId",
groupId: "BlockGrpId",
}
});
});
</script>blockoutSettings.customStyle string
Binds the name of customStyle field in dataSource. It applies the custom CSS to the block intervals.
Default Value
- null
Example - The block intervals with custom style.
<div id="Schedule"></div>
<style type="text/css">
.custom-css
{
background-color: Teal !important;
}
</style>
<script type="text/javascript">
$(function () {
$("#Schedule").ejSchedule({
currentDate: new Date(2014, 4, 5),
blockoutSettings: {
enable: true,
dataSource: [{
BlockId: 101,
BlockStartTime: new Date(2014, 4, 5, 10, 00),
BlockEndTime: new Date(2014, 4, 5, 11, 00),
BlockSubject: "Service",
IsBlockAppointment: true,
BlockStyle: "custom-css"
}],
id: "BlockId",
startTime: "BlockStartTime",
endTime: "BlockEndTime",
subject: "BlockSubject",
isBlockAppointment: "IsBlockAppointment",
customStyle: "BlockStyle"
}
});
});
</script>Methods
addResource(resourceObject,name,index)
It is used to add the resources dynamically in the scheduler. It renders the resource based on the index if it is available or else it renders this resource at end of all resources.
| Name | Type | Description |
|---|---|---|
| resourceObject | Object | Resource object which can be defined with all the available options of resources. |
| name | string | Defines the name of the resource collection to which this object needs to be added. |
| index | number | It is optional. If it is available, this render the resource at the given specified index location. Else render at end of the all resources. |
Returns:
Void
Example
<!--Container for ejScheduler widget-->
<div id="Schedule1"></div>
<script type="text/javascript">
$(function() {
$("#Schedule1").ejSchedule({
width: "100%",
currentDate: new Date(2015, 04, 05),
group: {
resources: ["Owners"]
},
resources: [{
field: "ownerId",
title: "Owner",
name: "Owners",
resourceSettings: {
dataSource: [{
text: "Nancy",
id: 1,
color: "#f8a398"
}, {
text: "Steven",
id: 2,
color: "#56ca85"
}],
text: "text",
id: "id",
color: "color"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2015, 04, 05, 9, 00),
EndTime: new Date(2015, 04, 05, 10, 30),
ownerId: 2
}, {
Id: 101,
Subject: "Discovery of Exoplanets",
StartTime: new Date(2015, 04, 07, 6, 00),
EndTime: new Date(2015, 04, 07, 9, 30),
ownerId: 1
}],
resourceFields: "ownerId"
}
});
var Obj = {text: "Adams", id: 10, groupId: 3, color: "#51a0ed"};
var schObj = $("#Schedule1").data("ejSchedule");
schObj.addResource(Obj ,"Owners",2); // with index
schObj.addResource(Obj ,"Owners"); // without index
});
</script>deleteAppointment(data)
This method is used to delete the appointment based on the guid value or the appointment data passed to it.
| Name | Type | Description |
|---|---|---|
| data | string|Object | GUID value of an appointment element or an appointment object |
Returns:
void
Example - Using GUID Value
The following code snippet explain how to delete an appointment by using the GUID, while clicking an appointment.
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
currentDate: new Date(2015, 11, 7),
appointmentSettings: {
//Array of JSON data configure in dataSource
dataSource: [{
Id: 1,
Subject: "Music Class",
StartTime: new Date("2015/11/7 06:00 AM"),
EndTime: new Date("2015/11/7 07:00 AM")
},
{
Id: 2,
Subject: "School",
StartTime: new Date("2015/11/7 9:00 AM"),
EndTime: new Date("2015/11/7 02:30 PM")
}]
},
appointmentClick: "onAppointmentClick"
});
function onAppointmentClick(args) {
var schObj = $("#schedule").data("ejSchedule");
schObj.deleteAppointment(args.appointment.Guid);
// $($(".e-appointment")[0]).attr("guid") --> To get the guid attribute value of an element directly.
}
</script>Example - Using Appointment Object
The following code snippet explain how to delete an appointment by passing appointment object, while clicking an appointment.
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
currentDate: new Date(2015, 11, 7),
appointmentSettings: {
//Array of JSON data configure in dataSource
dataSource: [{
Id: 1,
Subject: "Music Class",
StartTime: new Date("2015/11/7 06:00 AM"),
EndTime: new Date("2015/11/7 07:00 AM")
},
{
Id: 2,
Subject: "School",
StartTime: new Date("2015/11/7 9:00 AM"),
EndTime: new Date("2015/11/7 02:30 PM")
}]
},
appointmentClick: "onAppointmentClick"
});
function onAppointmentClick(args) {
var schObj = $("#schedule").data("ejSchedule");
schObj.deleteAppointment(args.appointment);
}
</script>destroy()
Destroys the Schedule widget. All the events bound using this._on are unbound automatically and the control is moved to pre-init state.
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule();
var schObj = $("#Schedule").data("ejSchedule");
schObj.destroy(); // destroy the schedule
</script>exportSchedule(action, serverEvent, id)
Exports the appointments from the Schedule control.
| Name | Type | Description |
|---|---|---|
| action | string | It refers the controller action name to redirect. (For MVC) |
| serverEvent | string | It refers the server event name.(For ASP) |
| id | string|number | Pass the id of an appointment, in case if a single appointment needs to be exported. Otherwise, it takes the null value. |
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
}
});
var schObj = $("#Schedule").data("ejSchedule");
schObj.exportSchedule("ActionName","ExportToICS", null); // To Export all the Appointments
schObj.exportSchedule("ActionName","ExportToICS", 101); // To Export a single appointment with an id "101"
</script>exportToExcel(action, serverEvent, type)
Exports the appointments from the Schedule control and saves it in a Excel file.
| Name | Type | Description |
|---|---|---|
| action | string | It refers the controller action name to redirect. (For MVC) |
| serverEvent | string | It refers the server event name.(For ASP) |
| type | boolean | Indicates whether to export all the appointments including or excluding the individual occurrences of the recurrence appointments. |
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [
{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}, {
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00),
Recurrence: true,
RecurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=10",
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}
],
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
}
});
var schObj = $("#Schedule").data("ejSchedule");
schObj.exportToExcel("ActionName", null, true); // To Export all the appointments including occurrences by considering it as an individual objects.
schObj.exportToExcel("ActionName", null, false); // To Export all the appointments with usual parent data for recurrence objects excluding the individual occurrences.
</script>filterAppointments(filterConditions)
Searches and filters the appointments from appointment list of Schedule control.
| Name | Type | Description |
|---|---|---|
| filterConditions | Array | Holds array of one or more conditional objects for filtering the appointments based on it. |
Returns:
Array
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 103,
Subject: "Reading books",
StartTime: new Date(2014, 4, 5, 08, 00),
EndTime: new Date(2014, 4, 5, 09, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
}
});
var schObj = $("#Schedule").data("ejSchedule");
var filter=[{
field: "Subject",
operator: "contains",
value: "with",
predicate: "or"
}];
var appointments=schObj.filterAppointments(filter); // filters the appointments list of Schedule control
</script>getAppointments()
Gets the complete appointment list of Schedule control.
Returns:
Array
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 103,
Subject: "Reading books",
StartTime: new Date(2014, 4, 5, 08, 00),
EndTime: new Date(2014, 4, 5, 09, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
}
});
var schObj = $("#Schedule").data("ejSchedule");
var appointments=schObj.getAppointments(); // Gets the appointments list of Schedule control
</script>print(data)
Prints the entire Scheduler or a single appointment based on the appointment data passed as an argument to it. Simply calling the print() method, without passing any argument will print the entire Scheduler.
| Name | Type | Description |
|---|---|---|
| data | Object | Either accepts no arguments at all or else accepts an appointment object. |
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00),
Recurrence:true,
RecurrenceRule:"FREQ=DAILY;INTERVAL=1;COUNT=10",
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
appointmentClick: "onAppointmentClick"
});
function onAppointmentClick(args) {
var schObj = $("#Schedule").data("ejSchedule");
schObj.print(args.appointment); //Print specific appointment
}
// Use the below 2 lines of code within any particular action like button click to print the entire Scheduler.
var schObj = $("#Schedule").data("ejSchedule");
schObj.print(); // Prints entire Scheduler with all appointments
</script>refreshScroller()
Refreshes the Scroller of Scheduler while using it within some other controls or application.
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule();
var schObj = $("#Schedule").data("ejSchedule");
schObj.refreshScroller(); // To refresh scroller while using Schedule control in some other control
</script>removeResource(resourceId,name)
It is used to remove the resources dynamically from the scheduler. It removed the resource based on the resource id with the given resource collection name.
| Name | Type | Description |
|---|---|---|
| resourceId | String|number | Defines the Id of the resource. |
| name | string | Defines the name of the resource collection which this resource id belongs. |
Returns:
Void
Example
<!--Container for ejScheduler widget-->
<div id="Schedule1"></div>
<script type="text/javascript">
$(function() {
$("#Schedule1").ejSchedule({
width: "100%",
currentDate: new Date(2015, 04, 05),
group: {
resources: ["Owners"]
},
resources: [{
field: "ownerId",
title: "Owner",
name: "Owners",
resourceSettings: {
dataSource: [{
text: "Nancy",
id: 1,
color: "#f8a398"
}, {
text: "Steven",
id: 2,
color: "#56ca85"
}],
text: "text",
id: "id",
color: "color"
}
}],
appointmentSettings: {
dataSource: [{
Id: 100,
Subject: "Research on Sky Miracles",
StartTime: new Date(2015, 04, 05, 9, 00),
EndTime: new Date(2015, 04, 05, 10, 30),
ownerId: 2
}, {
Id: 101,
Subject: "Discovery of Exoplanets",
StartTime: new Date(2015, 04, 07, 6, 00),
EndTime: new Date(2015, 04, 07, 9, 30),
ownerId: 1
}],
resourceFields: "ownerId"
}
});
var schObj = $("#Schedule1").data("ejSchedule");
schObj.removeResource(2,"Owners");
});
</script>saveAppointment(appointmentObject)
It is used to save the appointment. The appointment object is based on the argument passed to this method.
| Name | Type | Description |
|---|---|---|
| appointmentObject | Object | appointment object which includes appointment details |
Returns:
Void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
}
});
var obj = {
Id: 108,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
};
var schObj = $("#Schedule").data("ejSchedule");
schObj.saveAppointment(obj); //obj contains collection of appointment.
</script>getRecurrenceRule()
Generate the recurrence rule as a string, based on the repeat options selected.
Returns:
string
Example
<div id="RecurrenceEditor"></div>
<script>
$('#RecurrenceEditor').ejRecurrenceEditor();
var obj = $("#RecurrenceEditor").data("ejRecurrenceEditor");
alert( obj.getRecurrenceRule()); // Display the recurrence rule
</script>getSlotByElement(element)
Retrieves the time slot information (start/end time and resource details) of the given element. The parameter is optional - as when no element is passed to it, the currently selected cell information will be retrieved. When multiple cells are selected in the Scheduler, it is not necessary to provide the parameter.
| Name | Type | Description |
|---|---|---|
| element | Object | TD element object rendered as Scheduler work cell |
Returns:
Object
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule();
var obj = $("#Schedule").data("ejSchedule");
var $td = $(".e-draggableworkarea table tr td").first();
var slotDetails = obj.getSlotByElement($td);
console.log("Start Date: " + slotDetails.startTime);
console.log("End Date: " + slotDetails.endTime);
console.log("Resource details: " + slotDetails.resources);
</script>searchAppointments(searchString, field, operator, ignoreCase)
Searches the appointments from the appointment list of Schedule control based on the provided search string in its argument list.
| Name | Type | Description |
|---|---|---|
| searchString | Object|string | Defines the search word or the filter condition, based on which the appointments are filtered from the list. |
| field | string | Defines the field name on which the search is to be made. |
| operator | enum|string |
Defines the filterOperator value for the search operation. |
| ignoreCase | boolean | Defines the ignoreCase value for performing the search operation. |
Returns:
Array
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with pets",
StartTime: new Date(2014, 4, 5, 05, 00),
EndTime: new Date(2014, 4, 5, 07, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 103,
Subject: "Reading books",
StartTime: new Date(2014, 4, 5, 08, 00),
EndTime: new Date(2014, 4, 5, 09, 00),
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
}
});
var schObj = $("#Schedule").data("ejSchedule");
var appointments=schObj.searchAppointments("with"); // Searches the appointments list of Schedule control for the appointments containing the word "with"
</script>refresh()
Refreshes the entire Schedule control.
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule();
var schObj = $("#Schedule").data("ejSchedule");
schObj.refresh(); // To refresh the Schedule control within the client side event
</script>refreshAppointments()
Refreshes only the appointment elements within the Schedule control.
Returns:
void
Example
<div id="Schedule"></div>
<script>
$('#Schedule').ejSchedule();
var schObj = $("#Schedule").data("ejSchedule");
schObj.refreshAppointments(); // To refresh all the appointments within Scheduler
</script>notifyChanges(action, data)
Passes the server-side action and data to the client-side for rendering the modified appointment list on the Schedule control.
Returns:
void
Example
<div id="Schedule"></div>
<script>
$(function () {
window.signalR = $.signalR.scheduleHub;
window.signalR.client.modify = function (action, data) {
$("#Schedule").ejSchedule('instance').notifyChanges(action, data);
};
$.signalR.hub.start({ jsonp: true }).done(function () {
window.actionComplete = function (args) {
if (args.methodType != "public" && (args.type == "beforeAppointmentCreate" || args.type == "beforeAppointmentChange" || args.type == "beforeAppointmentRemove")) {
window.signalR.server.modify(args.type, args.appointment);
}
};
});
});
</script>Events
actionBegin
Triggers on the beginning of every action that starts within the Schedule.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters when view change action starts:
|
|||||||||||||||||||||
| argument | Object | Event parameters when date navigate action starts:
|
|||||||||||||||||||||
| argument | Object | Event parameters when date changed through Scheduler calendar:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment save action starts:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment edit action starts:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment delete action starts:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment drag action starts:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment resize action starts:
|
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
actionBegin: function (args) {}
});
</script>actionComplete
Triggers after the completion of every action within the Schedule.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters when view change action completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when date navigate action completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when date change action through Scheduler calendar completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment save action completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment edit action completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment delete action completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment dragging action completes:
|
|||||||||||||||||||||
| argument | Object | Event parameters when appointment resizing action completes:
|
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
actionComplete: function (args) {}
});
</script>appointmentClick
Triggers after an appointment is clicked.
| Name | Type | Description |
|---|---|---|
| object | Object | Returns the object of appointmentClick event. |
| appointment | Object | Returns the clicked appointment object. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
appointmentClick: function (args) {}
});
</script>beforeAppointmentRemove
Triggers before the appointment is being removed from the Scheduler.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the deleted appointment object. |
| cancel | boolean | Returns the cancel option value. |
| currentAction | string | Returns the name of the CRUD action performed. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with Pets",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
beforeAppointmentRemove: function (args) {}
});
</script>beforeAppointmentChange
Triggers before the edited appointment is being saved.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the edited appointment object. |
| cancel | boolean | Returns the cancel option value. |
| currentAction | string | Returns the name of the CRUD action performed. |
| model |
|
Returns the Schedule model. |
| requestType | string | Returns the name of the Scheduler event. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with Pets",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
beforeAppointmentChange: function (args) {}
});
</script>appointmentHover
Triggers on hovering the mouse over the appointments.
| Name | Type | Description |
|---|---|---|
| object | Object | Returns the object of appointmentHover event. |
| appointment | Object | Returns the hovered appointment object. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
appointmentHover: function (args) {}
});
</script>beforeAppointmentCreate
Triggers before the new appointment gets saved.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the appointment object. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
beforeAppointmentCreate: function (args) {}
});
</script>appointmentWindowOpen
Triggers before the appointment window opens.
| Name | Type | Description |
|---|---|---|
| object | Object | returns the object of appointmentWindowOpen event while selecting the detail option from quick window or edit appointment or edit series option. |
| cancel | boolean | Returns the cancel option value. |
| endTime | Object | Returns the end time of the double clicked cell. |
| model |
|
Returns the Schedule model. |
| originalEventType | string | Returns the action name that triggers window open. |
| startTime | Object | Returns the start time of the double clicked cell. |
| target | Object | Returns the target of the double clicked cell. |
| type | string | Returns the name of the event. |
| appointment | Object | Returns the edit appointment object. |
| edit | boolean | Returns the edit occurrence option value. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentWindowOpen: function (args) {}
});
</script>beforeContextMenuOpen
Triggers before the context menu opens.
| Name | Type | Description |
|---|---|---|
| object | Object | Returns the object of beforeContextMenuOpen event. |
| cancel | boolean | Returns the cancel option value. |
| cellIndex | number | Returns the current cell index value. |
| currentDate | Object | Returns the current date value. |
| resources | Object | Returns the current resource details, when multiple resources are present, otherwise returns null. |
| appointment | Object | Returns the current appointment details while opening the menu from appointment. |
| events | Object | Returns the object of before opening menu target. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
beforeContextMenuOpen: function (args) {}
});
</script>cellClick
Triggers after the cell is clicked.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| cellIndex | number | Returns the index of the cell. |
| endTime | Object | Returns the end time of the clicked cell. |
| model |
|
Returns the Schedule model. |
| quickString | string | Returns day, date and time information. |
| resources | Object | Returns the object of the resource. |
| startTime | Object | Returns the start time of the clicked cell. |
| target | Object | Returns the target of the clicked cell. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
cellClick: function (args) {}
});
</script>cellDoubleClick
Triggers after the cell is clicked twice.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| endTime | Object | Returns the end time of the double clicked cell. |
| model |
|
Returns the Schedule model. |
| resources | Object | Returns the object of the resource. |
| startTime | Object | Returns the start time of the double clicked cell. |
| target | Object | Returns the target of the double clicked cell. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
cellDoubleClick: function (args) {}
});
</script>cellHover
Triggers on hovering the mouse overs the cells.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| cellIndex | number | Returns the index of the hovered cell. |
| endTime | Object | Returns the end time of the clicked cell. |
| model |
|
Returns the Schedule model. |
| resources | Object | Returns the object of the resource. |
| startTime | Object | Returns the start time of the clicked cell. |
| target | Object | Returns the target of the clicked cell. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
cellHover: function (args) {}
});
</script>create
Triggers when the Scheduler completely renders on the page.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
create: function (args) {}
});
</script>destroy
Triggers when the Scheduler and all its sub-components gets destroyed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
destroy: function (args) {}
});
</script>drag
Triggers while the appointment is being dragged over the work cells.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| target | Object | Returns the target of the drag over appointment. |
| type | string | Returns the name of the event. |
| interval | number | Returns the default dragging interval range in minutes |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 102,
Subject: "Play with Pets",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
drag: function (args) {}
});
</script>dragStart
Triggers when the appointment dragging begins.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the dragged appointment. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| target | Object | Returns the target of the dragging appointment. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
dragStart: function (args) {}
});
</script>dragStop
Triggers when the appointment is dropped.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the dropped appointment object. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with Pets",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
dragStop: function (args) {}
});
</script>menuItemClick
Triggers after the menu/sub-menu items within the context menu is clicked.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| events | Object | Returns the object of menu item event. |
| model |
|
Returns the Schedule model. |
| targetInfo | Object | Returns the right clicked cell details. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
menuItemClick: function (args) {}
});
</script>navigation
Triggers after the Schedule view or date is navigated.
| Name | Type | Description | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters when view changes:
Returns the object of Schedule view navigation event.
|
|||||||||||||||||||||||||||
| argument | Object | Returns the object of previous or next date navigation event:
|
|||||||||||||||||||||||||||
| argument | Object | Returns the navigation event while changing the date by using calendar in Schedule.
|
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
navigation: function (args) {}
});
</script>queryCellInfo
Triggers every time before the elements of the scheduler such as work cells, time cells or header cells and so on renders or re-renders on a page.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| appointment | Object | Returns the current appointment data. |
| element | Object | Returns the currently rendering DOM element. |
| requestType | string | Returns the name of the currently rendering element on the scheduler. |
| cellType | string | Returns the cell type which is currently rendering on the Scheduler. |
| currentAppointmentDate | Object | Returns the start date of the currently rendering appointment. |
| cell | Object | Returns the currently rendering cell information. |
| resource | Object | Returns the currently rendering resource details. |
| currentDay | Object | Returns the currently rendering date information. |
Example
<div id="Schedule">
</div>
<script>
$("#Schedule").ejSchedule({ queryCellInfo: function (args){
switch (args.requestType) {
case "workcells":
args.element.css("background-color", "#dcf1f8");
break;
case "monthcells":
args.element.css("background-color", "#dcf1f8");
break;
case "alldaycells":
args.element.css("background-color", "#dcf1f8");
break;
} }});
</script>reminder
Triggers when the reminder is raised for an appointment based on the alertBefore value.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
| reminderAppointment | Object | Returns the appointment object for which the reminder is raised. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
reminder: function (args) {}
});
</script>resize
Triggers while resizing the appointment.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| element | Object | Returns the resize element value. |
| interval | number | Returns the default appointment resizing range . |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 102,
Subject: "Play With Friends",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
resize: function (args) {}
});
</script>resizeStart
Triggers when the appointment resizing begins.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the object of the resized appointment. |
| cancel | boolean | Returns the cancel option value. |
| element | Object | Returns the resize element value. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Lecturers",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
resizeStart: function (args) {}
});
</script>resizeStop
Triggers when an appointment resizing stops.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the resized appointment value. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| target | Object | Returns the target of the resized appointment. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Helping to Dad",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
resizeStop: function (args) {}
});
</script>overflowButtonClick
Triggers when the overflow button is clicked.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| Datas | Object | Returns the icon rendered cell information. |
| events | Object | Returns the object of menu item event. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
overflowButtonClick: function (args) {}
});
</script>overflowButtonHover
Triggers while mouse hovering on the overflow button.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| datas | Object | Returns the icon rendered cell information. |
| event | Object | Returns the object of menu item event. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
overflowButtonHover: function (args) {}
});
</script>keyDown
Triggers when any of the keyboard keys are pressed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| events | Object | Returns the object of menu item event. |
| model |
|
Returns the Schedule model. |
| type | string | Returns the name of the event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
keyDown: function (args) {}
});
</script>appointmentCreated
Triggers after the new appointment is saved.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the appointment object. |
| cancel | boolean | Returns the cancel option value. |
| model |
|
Returns the Schedule model. |
| requestType | string | Returns the name of the Scheduler event. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentCreated: function (args) {}
});
</script>appointmentChanged
Triggers after an existing appointment is edited.
| Name | Type | Description |
|---|---|---|
| appointment | Object | Returns the edited appointment object. |
| cancel | boolean | Returns the cancel option value. |
| currentAction | string | Returns the name of the CRUD action performed. |
| model |
|
Returns the Schedule model. |
| requestType | string | Returns the name of the Scheduler event. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with Pets",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
appointmentChanged: function (args) {}
});
</script>appointmentRemoved
Triggers after the appointment is deleted.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| appointment | Object | Returns the deleted appointment object. |
| currentAction | string | Returns the name of the CRDU action performed. |
| model |
|
Returns the Schedule model. |
| requestType | string | Returns the name of the Scheduler event. |
| type | string | Returns the name of the Scheduler event. |
Example
<div id="Schedule"></div>
<script>
$("#Schedule").ejSchedule({
appointmentSettings: {
dataSource: [{
Id: 101,
Subject: "Talk with Nature",
StartTime: new Date(2014, 4, 5, 10, 00),
EndTime: new Date(2014, 4, 5, 12, 00),
AllDay:true,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
},
{
Id: 102,
Subject: "Play with Pets",
StartTime: new Date(2014, 4, 6, 10, 00),
EndTime: new Date(2014, 4, 6, 12, 00),
AllDay:false,
Recurrence:false,
RecurrenceRule:null,
StartTimeZone: "UTC +00:00",
EndTimeZone: "UTC +00:00"
}]
id: "Id",
startTime: "StartTime",
endTime: "EndTime",
subject: "Subject",
allDay:"AllDay",
recurrence:"Recurrence",
recurrenceRule:"RecurrenceRule",
startTimeZone: "StartTimeZone",
endTimeZone: "EndTimeZone"
},
appointmentRemoved: function (args) {}
});
</script>