Hi Jeong,
Thanks for using Syncfusion products.
Your requirement on “disable the drag” can be achieved within our Schedule control in two ways as follows:
1. Disable the Drag and Drop for all the appointments.
If Drag and Drop should be disabled for all the appointments within the Schedule control, you need to disable the property value “allowDragDrop”. Please find the following code snippet to “disable the allowDragDrop”.
<code>
$(function () {
var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
allowDragDrop:false,
});
});
</code>
2. Disable the Drag and Drop for particular appointment.
Disabling the drag and drop for particular appointment or any particular scenario can be achieved with our Schedule control “actionComplete” event. We suggest you to set “args.cancel” value as “true” within the defined “ondragStop” method as shown in the following code snippet.
<code>
<script type="text/javascript">
$(function () {
var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
dragStop: "onDragStop",
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description:"Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule"
}
});
});
function onDragStop(args) {
args.cancel = true; // Need to set the value as true
}
</script>
And also for your reference we have prepare a sample with the above code snippets, which can be download from the following location.
http://www.syncfusion.com/downloads/support/directtrac/118201/SchedulePreventDragDrop83609682.zip
Please let us know if it helps and if you need any further assistance on this.
Regards,
Hi Jeong,
Thanks for your update.
We have prepared the sample to meet your requirement “While dragging Date should not change”, which can be downloaded from the following location.
And we have used the following code snippet in the above sample to meet the requirement.
<code>
<script>
function drawExption() {
var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10))
$("#Schedule_exeption").ejSchedule({
dateFormat: "yyyy-MM-dd",
enableAppointmentNavigation: false,
------------------------------
------------------------------
});
var schObj = $("#Schedule_exeption").data("ejSchedule");
schObj._off(schObj.element, "swipeleft swiperight", ".e-contentarearow .e-workcellstab");
}
function drawWeek() {
var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10))
$("#Schedule_weekly").ejSchedule({
dateFormat: "yyyy-MM-dd",
enableAppointmentNavigation: false,
width: "100%",
height: "525px",
-------------------------------
-------------------------------
});
var schObj = $("#Schedule_weekly").data("ejSchedule");
schObj._off(schObj.element, "swipeleft swiperight", ".e-contentarearow .e-workcellstab");
}
</script>
</code>
Please let us know if it helps and if you need any further assistance on this.
Regards,
Hi Jeong,
Thanks for your valuable feedback.
Please let us know if you need any further assistance on our products.
Regards,
Velmurugan