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: https://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.
