Category / Section
How to customize the start/end time interval in cloned appointments while dragging and resizing
1 min read
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.