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 drag and drop appointment items into the Schedule control from external sources?

Platform: JavaScript |
Control: ejSchedule |
Published Date: August 27, 2015 |
Last Revised Date: May 28, 2019

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:

http://js.syncfusion.com/demos/web/#!/azure/schedule/horizontalview/resourcegrouping

Document Link: [Under the title “Horizontal Resource Grouping”]

http://docs.syncfusion.com/js/schedule/horizontal-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:

http://js.syncfusion.com/demos/web/#!/azure/schedule/categorize

Document link:

http://docs.syncfusion.com/js/schedule/categorize

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();
            }
        }

 

Note:

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.

Schedule control and ListBox display before drag and drop

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.

Schedule control with dropped appointments and the same item removed from the ListBox

Figure 2: Schedule control with dropped appointments and the same item removed from the ListBox

Sample Link:

http://www.syncfusion.com/downloads/support/directtrac/142835/ze/ExternalDragAndDrop-397469137

ADD COMMENT
You must log in to leave a comment
Comments
Jonas de Abreu Resenes
Feb 07, 2017
hello, do you know if it's possible to drag and drop row from ejgrid to ejschedule? 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