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. Image for the cookie policy date

add event with customized editor on week view

Hello,


I was not able to find information on how to add an event directly on week view  , the purpose is to be able to drag an element from the treesource directly to the scheduler and get the exact date and time and when I switch to the month view do the same action but get only the date for the event as i need to add a specific time 


thank you 




1 Reply

RV Ravikumar Venkatesan Syncfusion Team October 6, 2022 06:52 AM

Hi Lea,

  

Greetings from Syncfusion support.


We have validated your query “able to drag an element from the treesource directly to the scheduler and get the exact date and time and when I switch to the month view do the same action but get only the date for the event as i need to add a specific time” at our end. You can directly add the appointment on the dropped position on the Week view with help of the addEvent method and open the editor on the Month view with help of the openEditor method as highlighted in the shared code snippet.


[Index.cshtml]

        function onTreeDragStop(event) {

            var treeElement = ej.base.closest(event.target, '.e-treeview');

            var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];

            var classElement = scheduleObj.element.querySelector('.e-device-hover');

            if (classElement) {

                classElement.classList.remove('e-device-hover');

            }

            if (!treeElement) {

                event.cancel = true;

                var scheduleElement = ej.base.closest(event.target, '.e-content-wrap');

                if (scheduleElement) {

                    var treeviewData = this.fields.dataSource;

                    if (event.target.classList.contains('e-work-cells')) {

                        var filteredData =

                            treeviewData.filter(function (item) { return item.Id === parseInt(event.draggedNodeData.id, 10); });

                        var cellData = scheduleObj.getCellDetails(event.target);

                        var resourceDetails = scheduleObj.getResourcesByIndex(cellData.groupIndex);

                        var eventData = {

                            Name: filteredData[0].Name,

                            StartTime: cellData.startTime,

                            EndTime: cellData.endTime,

                            IsAllDay: cellData.isAllDay,

                            Description: filteredData[0].Description,

                            DepartmentID: resourceDetails.resourceData.groupId,

                            ConsultantID: resourceDetails.resourceData.id

                        };

                        if (scheduleObj.currentView === 'Week') {

                            eventData.Id = scheduleObj.getEventMaxID();

                            scheduleObj.addEvent(eventData);

                        } else {

                            scheduleObj.openEditor(eventData, 'Add', true);

                        }

                        isTreeItemDropped = true;

                        draggedItemId = event.draggedNodeData.id;

                    }

                }

            }

        }


Kindly try the shared solution and let us know if you need any further assistance on this.


Regards,

Ravikumar Venkatesan


Attachment: ej2corescheduleexternaldraganddropsample_b26b5345.zip

Loader.
Live Chat Icon For mobile
Up arrow icon