We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to customize the start/end time interval in cloned appointments while dragging and resizing

Platform: jQuery |
Control: ejSchedule

The following steps shows the way to customize the start and end time displayed in the cloned appointment element while dragging and resizing the appointments.

Step 1:  Create a scheduler default sample and bind the drag and resize event as shown below,  


$(function () {
            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));
                width: "100%",
                height: "525px",
                currentDate: new Date(2014, 4, 5),
                appointmentSettings: {
                    dataSource: dManager,
                    id: "Id",
                    subject: "Subject",
                    startTime: "StartTime",
                    endTime: "EndTime",
                    description: "Description",
                    allDay: "AllDay",
                    recurrence: "Recurrence",
                    recurrenceRule: "RecurrenceRule"
                drag: "cusInterval",
                resize: "cusInterval"


Step 2: Define the drag and resize event function onDrag and onResize respectively which contains the code to customize the time duration. The following code example shows the logic.

function cusInterval(args) {
            args.interval = 15; // here customized minutes can be set


Sample Link: http://jsplayground.syncfusion.com/ldfzq3xt


Step 3: Run the above sample and the appointment time is customized in the interval of time scale value as shown below.

Scheduler with customized time while dragging

Figure 1: Scheduler with customized time while dragging.

Scheduler with customized time while resizing

Figure2: Scheduler with customized time while resizing.

You must log in to leave a comment
Shanth Kumar
May 10, 2017

Can i have the same equivalent function of onDrag for the latest version

I am getting an error in the line :

var diff = this._dragNewEndTime.getTime() - this._dragNewStartTime.getTime(); // appointment start and end time difference will be calculated

The error is "Cannot read property 'getTime' of undefined" cos when i debug the js I found out the this._dragNewEndTime is not available. 

Karthigeyan Krishnamurthi [Syncfusion]
May 11, 2017

Hi Shanth,   


Thank you for contacting Syncfusion support.


We have prepared the sample to customize the appointment drag and resize interval which can be viewed from the below link.






Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile