How to drag and drop appointment items into the Schedule control from external sources?
Appointments can be dragged and dropped into the Schedule control from external sources. For example, it is possible to drag the appointment from the ListBox and drop it into the Schedule control.
The following steps help you perform the external drag and drop with JavaScript Schedule control.
Step 1: Create a Schedule control with multiple resource samples by referring to the following links.
Sample Link:
https://ej2.syncfusion.com/home/index.html#platform
Document Link: [Under the title “Horizontal Resource Grouping”]
https://help.syncfusion.com/js/schedule/views#timeline-view
Step 2: Create a ListBox control with the appointment details as its datasource, like AppointmentList, and also initialize the itemDropped client-side event of it. Enable the allowDragAndDrop option of ListBox. The following code example renders the JavaScript ListBox with the appointment items, enabling the allowDragAndDrop option and also initializing its client-side event.
HTML
<div style="width: 100%"> <div class="control" style="float: left"> <div class="ctrllabel">Select a Appointment</div> <ul id="listitems"></ul> </div> <div style="float: left;" id="Schedule1"> </div> </div>
JavaScript
$("#listitems").ejListBox({
dataSource: AppointmentList, // DataSource for the list box control
itemDropped: "listBoxDrop", // Client side event initialization
allowDragAndDrop: true, // Enable this property to drag and drop the item from the ListBox
width: "100%",
fields: { id: "id", text: "Subject", value: "Subject" } // Field mapping for the listbox items
});
// Data values for the list box
AppointmentList = [
{ id: 1230, Id: 1230, Subject: "Appointment1", AllDay: false, EndTime: new Date(2014, 3, 4, 4, 0, 0), StartTime: new Date(2014, 3, 4, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "1", ownerId: 1, roomId: 1 },
{ id: 1231, Id: 1231, Subject: "Appointment2", AllDay: false, EndTime: new Date(2014, 3, 2, 4, 0, 0), StartTime: new Date(2014, 3, 2, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "6", roomId: 2, ownerId: 3 },
{ id: 1232, Id: 1232, Subject: "Appointment3", AllDay: false, EndTime: new Date(2014, 3, 3, 4, 30, 0), StartTime: new Date(2014, 3, 3, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "2", roomId: 1, ownerId: 5 },
{ id: 1233, Id: 1233, Subject: "Appointment4", AllDay: false, EndTime: new Date(2014, 3, 4, 7, 0, 0), StartTime: new Date(2014, 3, 4, 6, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "3", roomId: 1, ownerId: 7 },
{ id: 1234, Id: 1234, Subject: "Appointment5", AllDay: false, EndTime: new Date(2014, 3, 1, 4, 0, 0), StartTime: new Date(2014, 3, 1, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "4", roomId: 2, ownerId: 8 },
{ id: 1235, Id: 1235, Subject: "Appointment6", AllDay: false, EndTime: new Date(2014, 3, 5, 5, 0, 0), StartTime: new Date(2014, 3, 5, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "5", roomId: 2, ownerId: 3 },
{ id: 1236, Id: 1236, Subject: "Appointment7", AllDay: false, EndTime: new Date(2014, 3, 6, 3, 30, 0), StartTime: new Date(2014, 3, 6, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "5", roomId: 1, ownerId: 5 },
{ id: 1237, Id: 1237, Subject: "Appointment8", AllDay: false, EndTime: new Date(2014, 3, 7, 4, 0, 0), StartTime: new Date(2014, 3, 7, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "3", roomId: 1, ownerId: 3 },
{ id: 1238, Id: 1238, Subject: "Appointment9", AllDay: false, EndTime: new Date(2014, 3, 8, 7, 30, 0), StartTime: new Date(2014, 3, 8, 6, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "2", roomId: 2, ownerId: 7 },
{ id: 1239, Id: 1239, Subject: "Appointment10", AllDay: false, EndTime: new Date(2014, 3, 9, 4, 0, 0), StartTime: new Date(2014, 3, 9, 3, 0, 0), Recurrence: false, RecurrenceRule: "", categoryId: "1", roomId: 1, ownerId: 8 },
];
Step 3: To display the appointments with categorize, add the category collection to the Schedule control. Refer the following code examples to add the categorizeSettings value in the Schedule control.
JavaScript
var dManager = window.ResourcesData;
$("#Schedule1").ejSchedule({
timeZone: "UTC +00:00",
currentDate: new Date(2014, 3, 1),
width: "75%",
height: "525px",
orientation:"horizontal",
group: {
resources: ["Rooms", "Owners"]
},
resources: [
{
field: "roomId",
title: "Room",
name: "Rooms", allowMultiple: false,
resourceSettings: {
dataSource: [
{ text: "ROOM1", id: 1, groupId: 1, color: "#cb6bb2" },
{ text: "ROOM2", id: 2, groupId: 1, color: "#56ca85" },
{ text: "ROOM3", id: 3, groupId: 1, color: "#f8a398" }
],
text: "text", id: "id", groupId: "groupId", color: "color"
}
}, {
field: "ownerId",
title: "Owner",
name: "Owners", allowMultiple: true,
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, groupId: 1, color: "#ffaa00" },
{ text: "Steven", id: 3, groupId: 2, color: "#f8a398" },
{ text: "Michael", id: 5, groupId: 1, color: "#51a0ed" },
{ text: "Laura", id: 7, groupId: 2, color: "#ffaa00" },
{ text: "Robert", id: 8, groupId: 1, color: "#f8a398" },
{ text: "Milan", id: 13, groupId: 3, color: "#99ff99" },
{ text: "Paul", id: 15, groupId: 3, color: "#cc99ff" }
],
text: "text", id: "id", groupId: "groupId", color: "color"
}
}],
categorizeSettings:
{
enable: true,
allowMultiple: true,
dataSource: [
{ text: "Blue Category", id: "1", color: "#7499e1", fontColor: "red" },
{ text: "Green Category", id: "2", color: "#7cce6e", fontColor: "white" },
{ text: "Orange Category", id: "3", color: "#ffaa00", fontColor: "green" },
{ text: "Purple Category", id: "4", color: "#cb6bb2", fontColor: "black" },
{ text: "Red Category", id: "5", color: "#e04343", fontColor: "white" },
{ text: "Yellow Category", id: "6", color: "#f8f264", fontColor: "black" }
],
text: "text", id: "id", color: "color", fontColor: "fontColor"
},
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule",
categorize: "categoryId",
resourceFields: "roomId,ownerId"
},
timeMode: "12"
});
Also, refer to the following links to know about how to add categorize settings to the appointments in the Schedule control.
Sample link:
https://ej2.syncfusion.com/home/#!/azure/schedule/categorize
Document link:
https://help.syncfusion.com/js/schedule/working-with-appointments#categorization
Step 4: To save and reflect the dropping of the appointment details in the Schedule control, you can save that appointment with the dragged item or object details. The following code example is to save the changes in the Schedule control. You can write the following code within the itemDropped method, that is triggered while dragging an appointment item from the ListBox control.
JavaScript
// Drag and Drop an item
function listBoxDrop(e) {
if ($(e.event.target).parents(".e-schedule").length != 0) {
var scheduleObj = $("#Schedule1").data("ejSchedule");
// The following block of code used to find the current date value of the dropped cell in Schedule
var index = $(e.event.target).hasClass("e-workcells") || $(e.event.target).hasClass("e-alldaycells") ? $(e.event.target).index() : $(e.event.target).hasClass("e-alldaycells") ? $(e.event.target).index() : 7 - ((parseInt($(e.event.target).index() / 7) + 1) * 7 - $(e.event.target).index()) + ($(e.event.target).parent().index() * 7);
if (scheduleObj.model.orientation == "horizontal") {
index = scheduleObj.model.showTimeScale ? scheduleObj.currentView() !== "month" && !(scheduleObj._isCustomView()) ? Math.floor(index / ((scheduleObj.model.endHour - scheduleObj.model.startHour) * 2)) : index : $(e.event.target).index();
}
var renderDate = (scheduleObj.model.orientation == "horizontal" && scheduleObj.currentView() == "month") ? scheduleObj.monthDays : scheduleObj.model.orientation == "vertical" ? scheduleObj.dateRender : scheduleObj._dateRender;
renderDate = scheduleObj.model.orientation == "horizontal" && scheduleObj.currentView() == "customview" && scheduleObj._dateRender.length <= 7 ? scheduleObj._dateRender : renderDate;
var curDate = new Date(renderDate[index]);
// The following block of code used to find the current time of the dropped cell in Schedule.
var _target = e.event.target;
if ($(_target).hasClass("e-workcells") && (scheduleObj.model.showTimeScale) && scheduleObj.currentView() !== "month" && !(scheduleObj._isCustomView())) {
var time = scheduleObj.model.orientation == "vertical" ? scheduleObj.model.startHour + ($(e.event.target).parent().index() / 2) : scheduleObj.model.startHour + (($(e.event.target).index() - (((scheduleObj.model.endHour - scheduleObj.model.startHour) * 2) * index)) / 2);
var timemin = time.toString().split(".");
var cur_StartTime = new Date(curDate).setHours(parseInt(timemin[0]), parseInt(timemin[1]) == 5 ? 30 : 00);
var min = (parseInt(new Date(cur_StartTime).getHours()) == 23 && parseInt(new Date(cur_StartTime).getMinutes()) == 30) ? new Date(cur_StartTime).getMinutes() + 29 : new Date(cur_StartTime).getMinutes() + 30;
var cur_EndTime = new Date(new Date(cur_StartTime).setMinutes(min));
}
else if ($(_target).hasClass("e-workcells") && scheduleObj.model.orientation == "horizontal" && scheduleObj.currentView() == "month") {
var cur_StartTime = new Date(new Date(curDate).setHours(0, 0));
var cur_EndTime = new Date(new Date(curDate).setHours(23, 59));
}
else {
var cur_StartTime = new Date(new Date(curDate).setHours(0, 0));
var cur_EndTime = new Date(new Date(curDate).setHours(23, 59));
scheduleObj._appointmentAddWindow.find(".allday").ejCheckBox({ checked: true });
}
var StartDate = new Date(cur_StartTime);
var StartTime = new Date(cur_StartTime);
var endTime = cur_EndTime;
// To find the target resource details where the item is dropped.
var resource = scheduleObj._getResourceValue($(e.event.target));
// The following block of code used to find the duration of the dragged appointment.
var filtAppoint = [];
filtAppoint = $.extend(true, [], e.model.dataSource);
var id = parseInt(e.dropedElement.attr("id"));
var obj = ej.DataManager(filtAppoint).executeLocal(ej.Query().where("Id", ej.FilterOperators.equal, id));
var duration = obj[0].EndTime.getHours() - obj[0].StartTime.getHours(); //Get the duration of the appointment.
var minuteduration = obj[0].EndTime.getMinutes() - obj[0].StartTime.getMinutes();
var date = StartDate;
var EndDate = new Date(date.setHours(date.getHours() + duration));
EndDate = new Date(EndDate.setMinutes(EndDate.getMinutes() + minuteduration));
//Assigning the new calculated values to the appointment object.
obj[0].Id = "";
obj[0].StartTime = StartTime;
obj[0].EndTime = EndDate;
obj[0].AllDay = $(e.event.target).hasClass("e-alldaycells") ? true : false;
obj[0].ownerId = resource.id;
obj[0].roomId = resource.groupId;
delete obj[0].id;
// Appointment object saving to the schedule control.
scheduleObj.saveAppointment(obj[0]);
// To remove the appointment element from listbox control.
e.dropedElement.remove();
}
}
The above code example is applicable for both the Horizontal & Vertical Orientation
Step 4: Run the sample. The Schedule control and ListBox are displayed as follows.
Figure 1: Schedule control and ListBox display before drag and drop
Step 5: Now, you can drag the appointment item from the ListBox and drop the same to the Schedule control.
Figure 2: Schedule control with dropped appointments and the same item removed from the ListBox
Conclusion
I hope you enjoyed learning about how to drag and drop appointment items into the JavaScript Schedule control from external sources.
You can refer to our JavaScript Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
