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.
Unfortunately, activation email could not send to your email. Please try again.

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

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,  

JavaScript

$(function () {

            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));

            $("#Schedule1").ejSchedule({

                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.

Figure 1: Scheduler with customized time while dragging.

Figure2: Scheduler with customized time while resizing.

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7186 01/03/2017 05/22/2017 JavaScript ejSchedule
Did you find this information helpful?
Comments
Shanth May 10, 2017
Hi,

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

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. 

Reply
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.

http://jsplayground.syncfusion.com/0ayxtvxg

 

Regards,

Karthigeyan

Reply
Add Comment
You must log in to leave a comment

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.