Working with Appointments

20 Jun 201824 minutes to read

An appointment represents a certain time interval in a schedule cell depicting a plan made for the specified time interval.

Appointment Types

The types of appointments available within Scheduler can be categorized as follows

Normal

Represents an appointment that is created for a certain time interval in one or more number of days. If the normal appointment is created for more than 24 hours, then those longer appointments will be rendered on the all-day row.

NOTE

If the normal appointment is to be created for two days (say from November 25, 2015 – 11.00 PM to November 26, 2015 2.00 AM) but less than 24 hour time interval, then the appointment is split into two partitions and will be displayed appropriately on both the days.

All-Day

Represents an appointment that is created for an entire day such as holiday events. It renders separately in an All-day row, a separate place for all-day appointments. In Timeline (horizontal) view, all-day appointment renders in the usual work cells, as no all-day cells are present in that view.

NOTE

An all-day row is normally visible on the Scheduler, as the showAllDayRow property is set to true by default.

Recurrence

Represents an appointment that is created for a certain time interval that occurs repeatedly in a daily, weekly, monthly, yearly or every weekday basis at the same time interval based on the recurrence rule. The other available options and validations that can be performed on recurrence appointments can be referred from here.

CRUD operation

Appointments play a dynamic role within the Schedule control with which the users mostly interact. You can manipulate (add/edit/delete/drag/resize) the required appointments that reveals one of the main purpose of the Schedule control.

Add/Edit Appointments

The appointments can be added/edited in the Scheduler using any one of the following ways,

  • Quick window
  • Inline creation/editing
  • Default appointment window
  • Context menu
  • Through programmatically

Quick Window

The Quick window usually pops out while single clicking on the Scheduler cells or appointments. It requires the user to enter the Subject to proceed with the appointment creation. It also includes an Edit Appointment option displayed at the bottom left corner – on selection which opens up the normal appointment window.

On single clicking the scheduler appointments, the pop-up that shows up contains the appointment information along with the other options that are listed below,

  • Edit Appointment
  • Edit Series (only for the recurrence appointments)
  • Delete icon

The quick window option can be enabled/disabled by using showQuickWindow API, whereas its default value is set to true.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            //disables the quick window 
            showQuickWindow: false,
            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")
                }]
            }
        });
    });
    </script>

    NOTE

    Select multiple cells either using mouse or keyboard access keys (shift+arrow keys) and press enter key, so that the quick window opens up for the selected date/time range.

    Another way to disable the quick window option at dynamic time can be achieved through the cellClick and appointmentClick events. The below code example shows the way to disable the quick appointment window only while clicking on the cells, but displays for appointments.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            currentDate: new Date(2015, 11, 7),
            showQuickWindow: true,
            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")
                }]
            },
            cellClick: "onCellClick"
        });
    });
    
    function onCellClick(args) {
        args.cancel = true; // Prevents the display of quick window on clicking the cells.
    }	
    </script>

    Inline Appointment Creation/Editing

    Another easier way, for adding or editing the appointment’s subject alone can be achieved using inline Add/Edit support. It allows the user to add and edit the appointments inline.

    To get familiar with inline Add mode, single click on any of the Scheduler cells or press enter key on the selected cells. When the inline adding mode is ON, a text box will get created within the clicked Scheduler cells with a blinking cursor in it, requiring the user to enter the subject of an appointment. Once the subject is entered, the appointment will be saved on pressing the enter key.

    To enable inline edit mode, single click on any of the existing appointment’s subject, so that the user can edit the subject of that appointment. The edited subject of that appointment is then updated on pressing the enter key.

    The inline option can be enabled/disabled on Scheduler by using the allowInline API, whereas its default value is set to false.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            //enables the inline adding/editing on Scheduler 
            allowInline: true, 
            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")
                }]
            }
        });
    });
    </script>

    Enabling Inline Edit alone

    It is possible to disable the inline appointment creation and enabling only the editing mode of inline by making use of the cellClick event. The below code example shows the way to disable the inline appointment creation while clicking on the cells, but appointments can be edited while clicking on it’s subject.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            currentDate: new Date(2015, 11, 7),
            showQuickWindow: true,
            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")
                }]
            },
            cellClick: "onCellClick"
        });
    });
    
    function onCellClick(args) {
        args.cancel = true; // Prevents inline appointment creation on clicking the cells.
    }	
    </script>

    Default Appointment Window

    The default appointment window is availed with options like

    • Subject
    • Start and End Time
    • All-Day
    • TimeZone (for both Start and End time)
    • Repeat options
    • Description

    The other additional options available are listed below for which the appropriate API’s are needed to be configured to display these options on the appointment window.

    The appointments can be created by double-clicking the Scheduler cells across the required time slots, which makes the Create Appointment window to pop-up. The start and end time fields will get automatically populated, according to the time-slot selection. Clicking on the done button in an appointment window will create the appointment for the selected time cells.

    NOTE

    Select multiple cells both using mouse or keyboard access keys (shift+arrow keys) and press Alt+N key, so that the default appointment window opens up for the selected date/time range with the Start and End time fields automatically filled in.

    To prevent the display of default appointment window on double clicking the Scheduler cells, either the appointmentWindowOpen or cellDoubleClick event can be used, within which the args.cancel needs to be set to true. This behavior is depicted in the below code example.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="Schedule1"></div>
    
    <script>
    $(function() {
        // defining Schedule control
        $("#Schedule1").ejSchedule({
            width: "100%",
            height: "525px",
            currentDate: new Date(2015, 11, 5),
            appointmentSettings: {
                dataSource: [{
                    Id: 101,
                    Subject: "Talk with Nature",
                    StartTime: new Date(2015, 11, 5, 10, 00),
                    EndTime: new Date(2015, 11, 5, 11, 00)
                }]
            },
            appointmentWindowOpen: "onAppointmentWindowOpen"
        });
    });
    
    function onAppointmentWindowOpen(args) {
        args.cancel = true; // prevents the display of default appointment window
    }	
    </script>

    Through Programmatically

    You can add/edit the appointments dynamically through the public method saveAppointment. It accepts the JSON Object data (either a new or updated appointment object) as its argument.

  • HTML
  • <button id="btnAdd" value="Add" onclick="addAppointment()">Add</button>
    
    <!--Container for ejScheduler widget-->
    <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")
            }]
        }
    });
    
    //addAppointment is a function, gets called on clicking the Add button
    function addAppointment() {
        //appointment details 
        var appointment = {
            Subject: "Gym",
            StartTime: new Date("2015/11/7 03:30 AM"),
            EndTime: new Date("2015/11/7 04:30 AM")
        };
    
        //create the schedule object 
        var schObj = $("#schedule").data("ejSchedule");
        //pass the JSON object in the public method 
        schObj.saveAppointment(appointment);
    }	
    </script>

    Delete Appointments

    The appointments can be deleted in either of the following ways,

    • Selecting an appointment and clicking the delete icon in the quick appointment window.
    • Hovering the mouse over appointments and clicking on Inline delete option which is enabled by default for all the appointments.
    • Selecting an appointment and pressing Delete key.
    • Through Programmatically.

    A pop-up with a confirmation message will get displayed before deleting an appointment, which can be either switched on/off using the API showDeleteConfirmationDialog. Also, the confirmation text in that pop-up can be customized as mentioned here.

    For example, to localize only the delete confirmation message in the delete window -

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    var deleteCustomizationMessage = {
        // customize the confirmation message
        DeleteConfirmation: "Do you want to delete this Event?",
        // customize the delete window title
        MouseOverDeleteTitle: "Delete Event",
        // customize the recurrence delete window title
        RecurrenceDeleteTitle: "Delete Repeat Event"
    };
    
    // Extend only the required changes to the original locale collection
    $.extend(ej.Schedule.Locale["en-US"], deleteCustomizationMessage);
    
    $(function() {
        // defining Schedule control
        $("#schedule").ejSchedule({
            width: "100%",
            height: "525px",
            currentDate: new Date(2015, 11, 5),
            showDeleteConfirmationDialog: true,
            appointmentSettings: {
                dataSource: [{
                    Id: 101,
                    Subject: "Talk with Nature",
                    StartTime: new Date(2015, 11, 5, 10, 00),
                    EndTime: new Date(2015, 11, 5, 11, 00)
                }]
            }
        });
    });	
    </script>

    NOTE

    All these CRUD operations on appointments (add/edit/delete) can also be done through the default context menu options Add Appointment, Edit Appointment and Delete Appointment which is available, when context menu settings is enabled within Scheduler.

    Through Programmatically

    You can delete the appointments dynamically using the method deleteAppointment, which accepts the Guid of the appointment or complete appointment data as its argument. The Guid is availed as one of the appointment element’s attribute.

    Example 1 - Using GUID

    The below code example depicts the way to delete the appointments using GUID programmatically by calling the deleteAppointment function within the appointmentClick event, which triggers whenever the user clicks on an appointment.

  • HTML
  • <!--Container for ejScheduler widget-->
        <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 2 - Using Appointment object

    The below code example depicts the way to delete the appointments using appointment data programmatically by calling the deleteAppointment function within the appointmentClick event, which triggers whenever the user clicks on an appointment.

  • HTML
  • <!--Container for ejScheduler widget-->
        <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>

    Handling Appointment Actions

    It is possible to define some specific actions to take place before the CRUD operation occurs on the Scheduler appointments through the following available client-side events,

    beforeAppointmentCreate – Triggers before saving a new appointment.

    beforeAppointmentChange – Triggers when an appointment is edited and before it is being updated to the dataSource.

    beforeAppointmentRemove – Triggers before deleting an existing appointment.

    To stop the save, edit and delete actions on the Scheduler appointments, following code example can be used.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        // defining Schedule control
        $("#Schedule1").ejSchedule({
            width: "100%",
            height: "525px",
            currentDate: new Date(2015, 11, 5),
            appointmentSettings: {
                dataSource: [{
                    Id: 101,
                    Subject: "Talk with Nature",
                    StartTime: new Date(2015, 11, 5, 10, 00),
                    EndTime: new Date(2015, 11, 5, 11, 00)
                }]
            },
            beforeAppointmentCreate: "onAppointmentSave",
            beforeAppointmentChange: "onAppointmentEdit",
            beforeAppointmentRemove: "onAppointmentDelete"
        });
    });
    
    function onAppointmentSave(args) {
        args.cancel = true; // cancels the save action on appointments.
    }
    
    function onAppointmentEdit(args) {
        args.cancel = true; // cancels the edit action on appointments.
    }
    
    function onAppointmentDelete(args) {
        args.cancel = true; // cancels the delete action on appointments.
    }	
    </script>

    Read Only

    An interaction with the appointments of the Scheduler can be enabled/disabled through the readOnly property. When the readOnly property is set to true, it is not possible to do any actions on the appointments, but you can navigate between the schedule dates, views and can also be able to see the appointment details in the quick window. By default, this property is set to false.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            //set the Schedule as read only,
            readOnly: true,
            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 09:00 AM"),
                    EndTime: new Date("2015/11/7 10:00 AM")
                }, {
                    Id: 2,
                    Subject: "School",
                    StartTime: new Date("2015/11/7 02:00 PM"),
                    EndTime: new Date("2015/11/7 06:30 PM")
                }]
            }
        });
    });	
    </script>

    NOTE

    When the readOnly property is set to true – double clicking the cells will open the appointment window filled with appointment details, which can be allowed to view but cannot be edited or saved.

    Drag and Drop

    The appointment time can be modified through the drag and drop behavior, by dragging and dropping it to the new location, so that the start time and end time of the appointment gets changed automatically. We can enable/disable the drag and drop functionality through the allowDragAndDrop property. By default, it is set to true.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            //disable appointment drag and drop,
            allowDragAndDrop: false,
            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 09:00 AM"),
                    EndTime: new Date("2015/11/7 10:00 AM")
                }, {
                    Id: 2,
                    Subject: "School",
                    StartTime: new Date("2015/11/7 02:00 PM"),
                    EndTime: new Date("2015/11/7 06:30 PM")
                }]
            }
        });
    });	
    </script>

    Handling Drag Actions Dynamically

    The drag and drop functionality can be handled with the following three events,

    dragStart – Triggers when the appointments are started to drag from its source location.

    drag – Triggers when the appointments are being dragged over.

    dragStop – Triggers when the appointments are dropped on a destined location.

    The following code example shows how to cancel the dragging functionality with the help of one of these events.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        // defining Schedule control
        $("#schedule").ejSchedule({
            width: "100%",
            height: "525px",
            currentDate: new Date(2015, 11, 5),
            appointmentSettings: {
                dataSource: [{
                    Id: 101,
                    Subject: "Talk with Nature",
                    StartTime: new Date(2015, 11, 5, 10, 00),
                    EndTime: new Date(2015, 11, 5, 11, 00)
                }]
            },
            dragStop: "onDragStop"
        });
    });
    
    function onDragStop(args) {
        args.cancel = true; // cancels the drag action on appointments.
    }	
    </script>

    External Drag and Drop

    It is possible to drag and drop the external items to and fro the Scheduler control. This action is handled through the property appointmentDragArea,
    which specifies the draggable area name stating whether the appointments can be dragged outside of the control or within it.

    The following code example lets you drag and drop the external items from the tree view control to the Scheduler.

  • HTML
  • <!-- Treeview List -->
    <div class="col-md-2">
        <span class=""><b>Tutorials </b> </span>
        <ul id="treeViewDrag">
            <li class="expanded">
                HTML
                <ul>
                    <li>Introduction</li>
                    <li>Editors</li>
                    <li>Styles</li>
                    <li>Formatting</li>
                    <li>Tables</li>
                </ul>
            </li>
        </ul>
    </div>
    
    <!--Container for ejScheduler widget-->
    <div id="Schedule1"></div>
    
    <div id="customWindow" style="display: none">
        <form id="custom">
            <table width="100%" cellpadding="5">
                <tbody>
                    <tr>
                        <td>Subject:</td>
                        <td colspan="2">
                            <input id="subject" type="text" value="" name="Subject" style="width: 100%" readonly />
                        </td>
                    </tr>
                    <tr>
                        <td>Description:</td>
                        <td colspan="2">
                            <textarea id="customDescription" name="Description" rows="3" cols="50" style="width: 100%; resize: vertical"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>StartTime:</td>
                        <td>
                           <input id="StartTime" type="text" value="" name="StartTime" />
                        </td>
                    </tr>
                    <tr>
                        <td>EndTime:</td>
                        <td>
                           <input id="EndTime" type="text" value="" name="EndTime" />
                        </td>
                    </tr>
                    <tr>
                        <td>Resource:</td>
                        <td colspan="2">
                           <input id="resource" type="text" value="" name="Resource" style="width: 100%" readonly />
                        </td>
                    </tr>
                    <tr style="display: none">
                        <td>ownerId:</td>
                        <td colspan="2">
                           <input id="ownerId" type="text" name="ownerId" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        <div>
            <button type="submit" onclick="cancel()" id="buttonCancel" style="float:right;margin-right:20px;margin-bottom:10px;">Cancel</button>
            <button type="submit" onclick="save()" id="buttonSubmit" style="float:right;margin-right:20px;margin-bottom:10px;">Save</button>
        </div>
    </div>
    
    <script type="text/javascript">
            $(function () {
                $("#treeViewDrag").ejTreeView(
                    {
                        allowDragAndDrop: true,
                        width: 170,
                        allowDropChild: false,
                        allowDropSibling: false,
                        allowDragAndDropAcrossControl: true,
                        nodeDragStart: "onDragStart",
                        nodeDropped: "onDropped",
                    });
                var dManager = ej.DataManager(window.HorizontalResourcesTutorials).executeLocal(ej.Query().take(10));
                $("#Schedule1").ejSchedule({
                    width: "100%",
                    height: "525px", cellWidth: "40px",
                    showCurrentTimeIndicator: false, orientation: "horizontal",
                    views: ["Day", "Week", "WorkWeek", "Month"],
                    currentDate: new Date(2014, 4, 5),
                    currentView: ej.Schedule.CurrentView.Workweek,
                    group: {
                        resources: ["Owners"]
                    },
                    resources: [
                       {
                           field: "ownerId",
                           title: "Owner",
                           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: "Milan", id: 13, groupId: 3, color: "#99ff99" },
    						   { text: "Paul", id: 15, groupId: 3, color: "#cc99ff" }
                               ],
                               text: "text", id: "id", groupId: "groupId", color: "color"
                           }
                       }],
                    appointmentSettings: {
                        dataSource: dManager,
                        id: "Id",
                        subject: "Subject",
                        startTime: "StartTime",
                        endTime: "EndTime",
                        description: "Description",
                        allDay: "AllDay",
                        recurrence: "Recurrence",
                        recurrenceRule: "RecurrenceRule",
                        resourceFields: "ownerId"
                    },
                    dragStop: "onDragStop",
                });
                $("#buttonCancel").ejButton({ width: '85px' });
                $("#buttonSubmit").ejButton({ width: '85px' });
                $("#StartTime").ejDateTimePicker({ width: "150px" });
                $("#EndTime").ejDateTimePicker({ width: "150px" });
                $("#customWindow").ejDialog({
                    width: 600,
                    height: "auto",
                    position: { X: 200, Y: 100 },
                    showOnInit: false,
                    enableModal: true,
                    title: "Create Appointment",
                    enableResize: false,
                    allowKeyboardNavigation: false,
                    close: "clearFields"
                });
            });
    </script>
  • JAVASCRIPT
  • function onDragStart(e) {
        if (e.targetElementData.parentId == "") return false;
    }
    
    function onDropped(e) {
        if ($(e.target).parents(".e-schedule").length != 0) {
            var scheduleObj = $("#Schedule1").data("ejSchedule");
            var index = $($(e.target).context).hasClass("e-workcells") || $($(e.target).context).hasClass("e-alldaycells") ? $($(e.target).context).index() : $($(e.target).context).hasClass("e-alldaycells") ? $($(e.target).context).index() : 7 - ((parseInt($($(e.target).context).index() / 7) + 1) * 7 - $($(e.target).context).index()) + ($($(e.target).context).parent().index() * 7);
            if (scheduleObj.model.orientation == "horizontal") {
                index = scheduleObj.model.showTimeScale ? scheduleObj.currentView() !== "month" && !(scheduleObj._isCustomView()) ? Math.floor(index / ((scheduleObj.model.endHour - scheduleObj.model.startHour) * 2)) : index : $(e.event.target).index();
            }
            var renderDate = (scheduleObj.model.orientation == "horizontal" && scheduleObj.currentView() == "month") ? scheduleObj.monthDays : scheduleObj.model.orientation == "vertical" ? scheduleObj.dateRender : scheduleObj._dateRender;
            renderDate = scheduleObj.model.orientation == "horizontal" && scheduleObj.currentView() == "customview" && scheduleObj._dateRender.length <= 7 ? scheduleObj._dateRender : renderDate;
            var curDate = new Date(renderDate[index]);
            var _target = $($(e.target).context);
            if ($(_target).hasClass("e-workcells") && (scheduleObj.model.showTimeScale) && scheduleObj.currentView() !== "month" && !(scheduleObj._isCustomView())) {
                var time = scheduleObj.model.orientation == "vertical" ? scheduleObj.model.startHour + ($(e.event.target).parent().index() / 2) : scheduleObj.model.startHour + (($(e.event.target).index() - (((scheduleObj.model.endHour - scheduleObj.model.startHour) * 2) * index)) / 2);
                var timeMin = time.toString().split(".");
                var cur_StartTime = new Date(curDate).setHours(parseInt(timeMin[0]), parseInt(timeMin[1]) == 5 ? 30 : 00);
                var min = (parseInt(new Date(cur_StartTime).getHours()) == 23 && parseInt(new Date(cur_StartTime).getMinutes()) == 30) ? new Date(cur_StartTime).getMinutes() + 29 : new Date(cur_StartTime).getMinutes() + 30;
                var cur_EndTime = new Date(new Date(cur_StartTime).setMinutes(min));
            }
            else if ($(_target).hasClass("e-workcells") && scheduleObj.model.orientation == "horizontal" && scheduleObj.currentView() == "month") {
                var cur_StartTime = new Date(new Date(curDate).setHours(0, 0));
                var cur_EndTime = new Date(new Date(curDate).setHours(23, 59));
            }
            else {
                var cur_StartTime = new Date(new Date(curDate).setHours(0, 0));
                var cur_EndTime = new Date(new Date(curDate).setHours(23, 59));
                scheduleObj._appointmentAddWindow.find(".allday").ejCheckBox({ checked: true });
            }
            
            var StartDate = new Date(cur_StartTime);
            var StartTime = new Date(cur_StartTime);
            var endTime = cur_EndTime;
            
            // To find the resource details
            var resource = scheduleObj._getResourceValue($($(e.target).context));
           
            // custom appointment window
            $("#subject").val(e.droppedElementData.text);
            $("#customDescription").val(e.droppedElementData.text);
            $("#StartTime").ejDateTimePicker({ value: new Date(StartTime) });
            $("#EndTime").ejDateTimePicker({ value: new Date(endTime) });
            $("#resource").val(resource.text);
            $("#ownerId").val(resource.id);
            $("#customWindow").ejDialog("open");
        }
    }
    
    function save() {
        var obj = {};
        var formElement = $("#customWindow").find("#custom").get(0);
        for (var index = 0; index < formElement.length; index++) {
            var columnName = formElement[index].name, $element = $(formElement[index]);
            if (columnName != undefined) {
                if (columnName == "Subject") var value = formElement[index].value;
                if (columnName == "Description") value = formElement[index].value;
                if (columnName == "StartTime") value = new Date(formElement[index].value);
                if (columnName == "EndTime") value = new Date(formElement[index].value);
                if (columnName == "ownerId") value = parseInt(formElement[index].value);
                if (columnName != "Resource") obj[columnName] = value;
            }
        }
        $("#customWindow").ejDialog("close");
        var object = $("#Schedule1").data("ejSchedule");
        object.saveAppointment(obj);
    }
    
    function cancel() {
        $("#customWindow").ejDialog("close");
    }

    Resize

    Resizing an appointment is another way to change its start and end time. Mouse hover on the appointments, so that the resizing handlers gets displayed on either sides of the appointment which allows resizing. The resizing functionality can be enabled/disabled by setting the enableAppointmentResize property. By default it is set to true.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            //disable appointment resizes,
            enableAppointmentResize: false,
            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 09:00 AM"),
                    EndTime: new Date("2015/11/7 10:00 AM")
                }, {
                    Id: 2,
                    Subject: "School",
                    StartTime: new Date("2015/11/7 02:00 PM"),
                    EndTime: new Date("2015/11/7 06:30 PM")
                }]
            }
        });
    });	
    </script>

    Handling Resize Actions Dynamically

    The appointment resizing functionality can be handled through the following three events,

    resizeStart – Triggers when the appointments are started resizing from its original time.

    resize – Triggers when the appointment resizing is in progress.

    resizeStop – Triggers when the appointment resizing is done.

    The following code example shows how to cancel the resizing functionality with the help of one of these events.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        // defining Schedule control
        $("#Schedule1").ejSchedule({
            width: "100%",
            height: "525px",
            currentDate: new Date(2015, 11, 5),
            appointmentSettings: {
                dataSource: [{
                    Id: 101,
                    Subject: "Talk with Nature",
                    StartTime: new Date(2015, 11, 5, 10, 00),
                    EndTime: new Date(2015, 11, 5, 11, 00)
                }]
            },
            resizeStart: "onResizeStart"
        });
    });
    
    function onResizeStart(args) {
        args.cancel = true; // Blocks the resize action on appointments.
    }	
    </script>

    Categorization

    It allows to differentiate the appointments with various categorize options and individual colors. You can also denote the status of the appointments using this categorize option and can specify your own user-defined category collection. It is also possible to select multiple categorize for a single appointment.

    Categorize Settings

    The categorizeSettings holds the below categorize related properties such as,

    • enable - It accepts true or false value, denoting whether to enable/disable the categorize option. Its default value is false.
    • allowMultiple – It enables or disables the multiple selection of categories for each appointments in the appointment window as well as in the context menu. Its default value is false.
    • dataSource – Binds the categorize dataSource collection. This property should be assigned with the JSON data array collection or instance of ej.DataManger.

    We have below 6 default values for Categorize dataSource collection.

  • JAVASCRIPT
  • categorizeSettings: {
        dataSource: [{
            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"
        }]
    }

    The below categorize fields holds the appropriate column names from the dataSource -

    Field name

    Description

    id

    It holds the binding name for id field in the categorize dataSource

    text

    It holds the binding name for text field in the categorize dataSource

    color

    It holds the binding name for color field in the categorize dataSource.

    fontColor

    It holds the binding name for fontColor field in the categorize dataSource. This font color applies for the appointment.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            currentDate: new Date(2015, 11, 7),
            //Configure the categorize settings
            categorizeSettings: {
                //Enable the categorize options
                enable: true,
                //enable multiple selection options
                allowMultiple: true,
                //data source collection binding
                dataSource: [{
                    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"
                }],
                //text mapper field
                text: "text",
                //id mapper field 
                id: "id",
                //categorize color mapper field
                color: "color",
                //categorize appointment font color mapper field.
                fontColor: "fontColor"
            },
            appointmentSettings: {
                categorize: "categorize",
                //Array of JSON data configure in dataSource
                dataSource: [{
                    Id: 1,
                    Subject: "Music Class",
                    StartTime: new Date("2015/11/7 09:00 AM"),
                    EndTime: new Date("2015/11/7 10:00 AM"),
                    categorize: "3",
                }, {
                    Id: 2,
                    Subject: "School",
                    StartTime: new Date("2015/11/7 02:00 PM"),
                    EndTime: new Date("2015/11/7 06:30 PM"),
                    categorize: "1,2,6" // Multiple categorize id passing 
                }]
            }
        });
    });	
    </script>

    Priority

    This option prioritize the appointments based on its importance and it can be differentiated with each individual icons/images. By default, there are some specific set of default priority collection and you can also customize it with your own priority collection.

    Priority Settings

    The prioritySettings holds the below priority related properties such as,

    • enable - It accepts true or false value, denoting whether to enable/disable the priority option. Its default value is false.
    • template – Customize the priority icon/images using template options.
    • dataSource – binds the priority dataSource collection. This property should be assigned with the JSON data array collection or instance of ej.DataManger.

    We have below 4 default values for priority dataSource collection.

  • JAVASCRIPT
  • prioritySettings: {
        dataSource: [{
            text: "None",
            value: "none"
        }, {
            text: "High",
            value: "high"
        }, {
            text: "Medium",
            value: "medium"
        }, {
            text: "Low",
            value: "low"
        }]
    }

    The below priority fields holds the appropriate column names from the dataSource,

    Field name

    Description

    text

    It holds the binding name for text field in the priority dataSource

    value

    It holds the binding name for value field in the priority dataSource.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            currentDate: new Date(2015, 11, 7),
            //Configure the categorize settings
            prioritySettings: {
                //enable the priority option
                enable: true,
                //Configure the priority data source 
                dataSource: [{
                    text: "None",
                    value: "none"
                }, {
                    text: "High",
                    value: "high"
                }, {
                    text: "Low",
                    value: "low"
                }],
                //mapper field for text 
                text: "text",
                //mapper field for value 
                value: "value"
            },
            appointmentSettings: {
                //set the priority mapper field for appointment data collection
                priority: "priority",
                //Array of JSON data configure in dataSource
                dataSource: [{
                    Id: 1,
                    Subject: "Music Class",
                    StartTime: new Date("2015/11/7 09:00 AM"),
                    EndTime: new Date("2015/11/7 10:00 AM"),
                    priority: "low", //pass the priority value
                }, {
                    Id: 2,
                    Subject: "School",
                    StartTime: new Date("2015/11/7 02:00 PM"),
                    EndTime: new Date("2015/11/7 06:30 PM"),
                    priority: "high" //pass the priority value
                }]
            }
        });
    });	
    </script>

    Search or Filter Appointments

    The public method searchAppointments is used to search the appointments in the Scheduler dataSource. It contains the below four arguments such as search string, search field, filter operator and ignore case.

    searchString - It is used to search the given word/sentence within the appointment data.

    fields - It is the field with which the search operation takes place. It’s an optional argument.

    filterOperator – It denotes the filter type like contains, greaterthan or lessthan. It’s an optional argument.

    ignoreCase – It is a boolean value to set the search string as case sensitive or not. It’s an optional argument.

  • HTML
  • <input id="txtSearch" type="text" />
    <input id="btnSearch" class="searchApp" type="button" value="Search" />
    <div id="grid1" />
    
    <!--Container for ejScheduler widget-->
    <div style="float: left" id="schedule" />  
    
    <script>
    $(function() {
        var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));
        $("#Schedule1").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")
                }]
            }
        });
    
        // To bind the click event to the button
        $('.searchApp').bind("click", function() {
            var _searchString = $("#txtSearch").val();
            var schObj = $("#Schedule1").data("ejSchedule");
            // method to retrieve the appointment based on search string
            var result = schObj.searchAppointments(_searchString);
            showResult(result, _searchString);
        });
    });
    
    // method to show the result in a grid
    function showResult(list, _searchString) {
        if (!ej.isNullOrUndefined(list) && list.length != 0 && _searchString != "") {
            $("#grid1").show();
            $("#grid1").data("ejGrid") && $("#grid1").ejGrid("destroy");
            $("#grid1").ejGrid({
                allowScrolling: true,
                dataSource: list,
                allowPaging: true
            });
        }
    }	
    </script>

    Appointment Filters

    The appointments can be filtered or shortlisted based on the simple or complex conditions with four available properties such as field, operator, value and predicate which is passed to the public method filterAppointments.

    field - It is the field, with which the search operation takes place. It’s an optional argument.

    operator – It is generally used to specify the filter type.

    value – It is the filter keyword based on which the records are filtered.

    predicate – To add more than one conditional query, need to use and, or predicates.

  • HTML
  • <input id="btnSearch" class="searchApp" type="button" value="Filter" />
    <div id="grid1" />
    <!--Container for ejScheduler widget-->
    <div style="float: left" id="Schedule1" />
    
    <script>
    $(function() {
        var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));
        $("#Schedule1").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")
                }]
            }
        });
    
        // Method to bind the button click event
        $('.searchApp').bind("click", function() {
            // Add the filter data as like in the below format
            var filter = [{
                field: "Subject", // field configure
                operator: "contains",
                value: "Music",
                predicate: "or" // predicate 
            }, {
                field: "Subject", // field configure
                operator: "contains",
                value: "School",
                predicate: "or" // predicate
            }];
    
            var schObj = $("#Schedule1").data("ejSchedule");
            // Method to get the Filtered appointment
            var result = schObj.filterAppointments(filter);
            showResult(result);
        });
    });
    
    // method to show the result in a grid
    function showResult(list) {
        if (!ej.isNullOrUndefined(list) && list.length != 0) {
            $("#grid1").show();
            $("#grid1").data("ejGrid") && $("#grid1").ejGrid("destroy");
            $("#grid1").ejGrid({
                dataSource: list,
                allowPaging: true
            });
        }
    }	
    </script>

    Recurrence Options

    There are scenarios where you require the same appointments to be repeatedly created for multiple days on daily, weekly, monthly, and yearly or on every weekday basis.

    In appointment data collection, recurrence and recurrenceRule are dependent fields. While creating or binding the recurrence appointment, the recurrence field is set to true and recurrenceRule contains recurrence pattern in string format.

    Recurrence Rule

    The recurrence appointments are created based on the recurrence rule. The RecurrenceRule is a string value that contains the details of the recurrence appointments like

    • repeat type - daily/weekly/monthly/yearly/every weekday
    • how many times it needs to be repeated
    • the interval duration
    • the time period to render the appointment, etc.,

    It has the following properties based on which the recurrence appointments are rendered in the Schedule control with its respective time period.

    S.No

    Property

    Purpose

    1

    FREQ

    Maintains the Repeat type value of the appointment.

    (Example: Daily, Weekly, Monthly, Yearly, Every week day)

    Example: FREQ=DAILY;INTERVAL=1

    2

    INTERVAL

    Maintains the interval value of the appointments.

    For example, when you create the daily appointment at an interval of 2, the appointments are rendered on the days Monday, Wednesday and Friday. (Creates an appointment on all days by leaving the interval of one day gap)

    Example: FREQ=DAILY;INTERVAL=2

    3

    COUNT

    It holds the appointment’s count value.

    For example, When the recurrence appointment count value is 10, which means that 10 instances of appointments are created in the recurrence series.

    Example: FREQ=DAILY;INTERVAL=1;COUNT=10

    4

    UNTIL

    This property is used to store the recurrence end date value.

    For example, when you set the end date of appointment as 11/30/2015, the UNTIL property holds the end date value denoting when the recurrence actually ends.

    Example: FREQ=DAILY;INTERVAL=1;UNTIL=11/30/2015

    5

    BYDAY

    It holds the DAY values, representing on which the appointments actually renders.

    For example, Create the weekly appointment, and select the day(s) from the day options (Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday). When Monday is selected, the first two letters of the selected day “MO” is saved in the BYDAY property. When multiple days are selected, the values are separated by commas.

    Example: FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE;COUNT=10

    6

    BYMONTHDAY

    This property is used to store the date value of the Month, while creating the Month recurrence appointment.

    For example, when you create a Monthly recurrence appointment for every 3rd day of the month, then BYMONTHDAY holds the value 3 and creates the appointment on 3rd day of every month.

    Example: FREQ=MONTHLY;BYMONTHDAY=3;INTERVAL=1;COUNT=10

    7

    BYMONTH

    This property is used to store the index value of the selected Month while creating the yearly appointments.

    For example, when you create the yearly appointment on June month, the index value of June month 6 will get stored in the BYMONTH field. The appointment is created on every 6th month of a year.

    Example: FREQ=YEARLY;BYMONTHDAY=16;BYMONTH=6;INTERVAL=1;COUNT=10

    8

    BYSETPOS

    This property is used to store the index value of the week.

    For example, when you create the monthly appointment in second week of a month, the index value of the second week (2) is stored in BYSETPOS.

    Example: FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;UNTIL=8/11/2015

    9

    WKST

    This property is used to store the start day value of a week.

    For example, when you render the workweek the “WKST” value is Monday.

    10

    EXDATE

    EXDATE is used to hold the modified appointment date details (date value) in the recurrence appointment series.

    For example, when you change the recurrence appointment instance under the date “6/19/2015”, then this date is added to the recurrence rule EXDATE field. “EXDATE” is also used to differentiate the edited occurrence of the recurrence series for some internal process while doing the “Edit Series or Delete series” actions.

    Example: FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;COUNT=10;EXDATE=6/18/2015,6/20/2015;RECUREDITID=1651

    11

    RECUREDITID

    This property contains the Parent Id value of the edited appointment. It is used to track the edited appointment occurrence with its parent recurrence appointment series.

    For example, when you edit the particular occurrence of the recurrence appointment series, the “RECUREDITID” is added to that edited appointment depicting its parent Id.

    Example:

    FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;COUNT=10;EXDATE=6/18/2015,6/20/2015;RECUREDITID=1651

    To know more about other possible combinations of above specified recurrence rule properties, refer here.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            currentDate: new Date(2015, 11, 7),
            appointmentSettings: {
                //Recurrence mapper field
                recurrence: "Recurrence",
                recurrenceRule: "RecurrenceRule",
                //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"),
                    Recurrence: true, //enable recurrence options
                    RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5" //Recurrence rule.
                }]
            }
        });
    });
    </script>

    Recurrence Validation

    The default recurrence validation has been included for recurrence appointments similar to the one available in outlook. The validation occurs during the recurrence appointment creation, drag and drop or resizing of the recurrence appointments and also if any single occurrence changes. The validation can be disabled by setting the enableRecurrenceValidation property to false.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            currentDate: new Date(2015, 11, 7),
            //disable the recurrence validation
            enableRecurrenceValidation: false,
            appointmentSettings: {
                //Recurrence mapper field
                recurrence: "Recurrence",
                recurrenceRule: "RecurrenceRule",
                //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"),
                    Recurrence: true, //enable recurrence options
                    RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5" //Recurrence rule.
                }]
            }
        });
    });	
    </script>

    NOTE

    You can parse the RecurrenceRule of an appointment from the server-side by making use of a new generic utility class RecurrenceHelper. Refer this KB document.

    Recurrence Edit and delete options

    The recurring appointments can be edited or deleted in three ways as below:

    • Single occurrence
    • Following appointments
    • Entire series

    Single occurrence

    When an option “Only this Appointment” is selected, a single occurrence of the recurrence appointment alone will be edited or deleted.

    Following appointments

    When an option “Following Appointments” is selected, all the following events of the recurrence appointment from the current instance will be edited or deleted. The previous instances of the recurrence appointment before this current instances will be retained as it is on the Scheduler.

    Entire series

    The entire recurrence series will be edited / deleted, on selecting this option.

    Reminder

    Reminder option notifies all the appointments before some specific time. By default, it notifies before 5 minutes. Each and every appointment triggers the reminder event and can utilize this event for other user actions like mailing particular event to someone or to do any kind of manipulations with the reminder appointments and so on. The reminderSettings includes the following 2 properties namely,

    • enable - To enable the reminder settings of the Schedule control, set the enable property as true within the reminderSettings option.

    • alertBefore - Accepts the integer value to denote the time, before how long the reminder should be notified to the user.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
    $(function() {
        $("#schedule").ejSchedule({
            //Reminder configuration 
            reminderSettings: {
                //enable the reminder options 
                enable: true,
                //notify before 10 minutes
                alertBefore: 10
            },
            timeZone: "UTC 00:00",
            //Reminder event configure 
            reminder: "reminderCustom",
            appointmentSettings: {
                //Array of JSON data configure in dataSource
                dataSource: [{
                    Id: 1,
                    Subject: "Music Class",
                    StartTime: new Date(new Date().setMinutes(new Date().getMinutes() + 11)), // new Date("2015/11/7 06:00 AM"),
                    EndTime: new Date(new Date().setHours(new Date().getHours() + 1)) // new Date("2015/11/7 07:00 AM")
                }, {
                    Id: 2,
                    Subject: "School",
                    StartTime: new Date(new Date().setHours(new Date().getHours() + 2)),
                    EndTime: new Date(new Date().setHours(new Date().getHours() + 4))
                }]
            }
        });
    });
    
    function reminderCustom(args) {
        alert("Reminder Appointment");
    }	
    </script>

    NOTE

    Whenever the reminder setting is enabled in the Scheduler with some specific value (in minutes) assigned to the alertBefore property, the reminder event gets triggered before this specified value. It includes the reminder appointment’s entire information within its arguments.

    Block Time Intervals

    It allows to block the particular timeslots in Schedule. When specific timeslots are blocked, the appointments that lies in that range can either be made read-only or else can be allowed to interact with the users based on the value assigned to the isBlockAppointment property.

    Blockout Settings

    The blockoutSettings holds the below block intervals related properties such as,

    • enable - It accepts true or false value, denoting whether to enable/disable the block intervals option. It’s default value is false.
    • templateId – It applies the template design to block the intervals.
    • dataSource – Binds the block intervals dataSource collection. This property should be assigned either with the JSON data array collection or instance of ej.DataManger.

    The below blockout fields holds the appropriate column names from the dataSource -

    Field name

    Description

    id

    It holds the binding name for id field in the blockout dataSource

    subject

    It holds the binding name for subject field in the blockout dataSource

    startTime

    It holds the binding name for startTime field in the blockout dataSource.

    endTime

    It holds the binding name for endTime field in the blockout dataSource.

    isBlockAppointment

    It holds the binding name for isBlockAppointment field in the blockout dataSource.

    isAllDay

    It holds the binding name for isAllDay field in the blockout dataSource.

    resourceId

    It holds the binding name for resourceId field in the blockout dataSource.

    customStyle

    It holds the binding name for customStyle field in the blockout dataSource.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
        $(function() {
                $("#schedule").ejSchedule({
                    currentDate: new Date(2014, 4, 5),
                    //Configure the blockout settings
                    blockoutSettings: {
                        //Enable the blockout options
                        enable: true,
                        //data source collection binding
                        dataSource: [{
                            BlockId: 101,
                            BlockStartTime: new Date(2014, 4, 5, 10, 00),
                            BlockEndTime: new Date(2014, 4, 5, 11, 00),
                            BlockSubject: "Service",
                            IsBlockAppointment: true
                        },
                        {
                            BlockId: 102,
                            BlockStartTime: new Date(2014, 4, 4, 12, 00),
                            BlockEndTime: new Date(2014, 4, 4, 13, 00),
                            BlockSubject: "Maintenance",
                            IsBlockAppointment: true
                        }],
                        //id mapper field 
                        id: "BlockId",
                        //start time mapper field 
                        startTime: "BlockStartTime",
                        //end time mapper field 
                        endTime: "BlockEndTime",
                        //subject mapper field 
                        subject: "BlockSubject",
                        //block appointment mapper field 
                        isBlockAppointment: "IsBlockAppointment"
                    }
                });
        });	
    </script>

    Blocking Appointments

    The Appointments that lies within the blocked time range can be restricted to perform CRUD operations in it and can be made read-only. This can be achieved by setting isBlockAppointment property to true.

  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
            $(function () {
                $("#schedule").ejSchedule({
                    currentDate: new Date(2014, 4, 5),
                    //Configure the blockout settings
                    blockoutSettings: {
                        //Enable the blockout options
                        enable: true,
                        //data source collection binding
                        dataSource: [{
                            BlockId: 101,
                            BlockStartTime: new Date(2014, 4, 5, 10, 00),
                            BlockEndTime: new Date(2014, 4, 5, 11, 00),
                            BlockSubject: "Service",
                            IsBlockAppointment: true
                        }],
                        id: "BlockId",
                        startTime: "BlockStartTime",
                        endTime: "BlockEndTime",
                        subject: "BlockSubject",
                        //Bind the block appointment field in datasource
                        isBlockAppointment: "IsBlockAppointment"
                    }
                });
            });
    </script>

    Customizing block time intervals

    The blockoutSettings holds the below properties to customize the block intervals such as,

    • templateId - Template design that applies on the block intervals.
    • customStyle - The custom CSS that applies on the blocked intervals.
  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <!--Template to apply block intervals-->
    <script id="blockTemplate" type="text/x-jsrender">
       <div style="height:100%">
          <div></div>
       </div>
    </script>
    
    <script>
        $(function() {
                $("#schedule").ejSchedule({
                    currentDate: new Date(2014, 4, 5),
                    blockoutSettings: {
                        enable: true,
                        templateId: "#blockTemplate",
                        dataSource: [{
                            BlockId: 101,
                            BlockStartTime: new Date(2014, 4, 5, 10, 00),
                            BlockEndTime: new Date(2014, 4, 5, 11, 00),
                            BlockSubject: "Service",
                            IsBlockAppointment: true
                        }],
                        id: "BlockId",
                        startTime: "BlockStartTime",
                        endTime: "BlockEndTime",
                        subject: "BlockSubject",
                        isBlockAppointment: "IsBlockAppointment"
                    }
                });
        });	
    </script>

    Blocking time interval based on resources

    • resourceId - property used within the blockoutSettings which accepts the resource id’s can be used to apply the block intervals based on the resources.
  • HTML
  • <!--Container for ejScheduler widget-->
    <div id="schedule"></div>
    
    <script>
            $(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" 
                    },
                    //Configure the blockout settings
                    blockoutSettings: {
                        //Enable the blockout options
                        enable: true,
                        //data source collection binding
                        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",
                        //resource id mapper field
                        resourceId: "BlockResId"
                    }
                });
            });
    </script>