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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript |
Control: ejSchedule |
Published Date: January 3, 2017 |
Last Revised Date: May 28, 2019

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.

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.

ADD COMMENT
You must log in to leave a comment
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

Please sign in to access our KB

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

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