{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-external-drag-and-drop",
  "framework": "vue",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "external-drag-and-drop",
  "dependencies": [
    "@syncfusion/ej2-vue-navigations",
    "@syncfusion/ej2-vue-schedule"
  ],
  "description": "Scheduler accepts drag-and-drop from an external tree view into its time slots.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/scheduler-external-drag-and-drop.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-external-drag-and-drop/Scheduler.vue",
      "content": "<template>\n    <div class=\"schedule-vue-sample\">\n        <div class=\"control-section\">\n            <div class=\"drag-sample-wrapper\">\n            <div class=\"schedule-container\">\n                <div class=\"title-container\">\n                    <div class=\"title-text\">Doctor's Appointments</div>\n                </div>\n                <ejs-schedule id='Schedule' ref=\"ScheduleObj\" height=\"650px\" :cssClass='cssClass' :selectedDate='selectedDate' :eventSettings='eventSettings'\n                    :group='group' :currentView='currentView' :resourceHeaderTemplate=\"'resourceHeaderTemplate'\" :actionBegin=\"onActionBegin\">\n                    <template v-slot:resourceHeaderTemplate=\"{data}\">\n                        <div className=\"template-wrap\">\n                            <div class=\"specialist-category\">\n                                <div v-if=getConsultantImageName(data)>\n                                    <img class=\"specialist-image\" :src=\"getImage(data)\" :alt=\"getImage(data)\"/>\n                                </div>\n                            <div class=\"specialist-name\">{{getConsultantName(data)}}</div>\n                            <div class=\"specialist-designation\">{{getConsultantDesignation(data)}}</div>\n                        </div></div>\n                    </template>\n                    <e-views>\n                        <e-view option=\"TimelineDay\"></e-view>\n                        <e-view option=\"TimelineMonth\"></e-view>\n                    </e-views>\n                    <e-resources>\n                        <e-resource field='DepartmentID' title='Department' name='Departments' :dataSource='departmentDataSource'\n                            textField='Text' idField='Id' colorField='Color'>\n                        </e-resource>\n                        <e-resource field='ConsultantID' title='Consultant' name='Consultants' :dataSource='consultantDataSource'\n                            textField='Text' idField='Id' groupIDField='GroupId' colorField='Color'>\n                        </e-resource>\n                    </e-resources>\n                </ejs-schedule>\n            </div>\n            <div class=\"treeview-container\">\n                <div class=\"title-container\">\n                    <div class=\"title-text\">Waiting List</div>\n                </div>\n                <ejs-treeview id='Tree' cssClass=\"treeview-external-drag\" dragArea=\".drag-sample-wrapper\" :nodeTemplate=\"treeTemplate\" :fields='treeViewFields' :nodeDragging=\"onTreeDrag\" :nodeDragStart=\"onTreeDragStart\" :allowDragAndDrop=true :nodeDragStop=\"onTreeDragStop\" :nodeSelecting=\"onItemSelecting\" ></ejs-treeview>\n            </div>\n            </div>\n        </div>\n    </div>\n</template>\n<style>\n\n.schedule-vue-sample .drag-sample-wrapper {\n    display: -ms-flexbox;\n    display: flex;\n}\n.schedule-vue-sample .schedule-container {\n    padding-right: 10px;\n    width: 100%;\n }\n\n .schedule-vue-sample .title-container {\n    padding-bottom: 10px;\n }\n\n.schedule-vue-sample  .e-device-hover {\n    background-color: #e0e0e0!important;\n}\n\n.schedule-vue-sample .title-container {\n    padding-bottom: 10px;\n}\n\n.schedule-vue-sample .treeview-external-drag #waiting {\n    height: 100%;\n    padding: 0;\n}\n\n.schedule-vue-sample .treeview-external-drag #waitdetails {\n    width: 95%;\n    float: left;\n    height: 100%;\n    padding: 0;\n}\n\n.schedule-vue-sample .title-text {\n    font-size: 18px;\n    margin: 0px;\n    font-weight: bold;\n    text-align: center;\n    line-height: 1.1;\n}\n\n\n.schedule-vue-sample .treeview-external-drag #waitlist {\n    width: 100%;\n    height: 50%;\n    font-weight: bold;\n    font-family: \"Segoe UI\";\n    font-size: 12px;\n    padding: 5px 0 0 10px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.schedule-vue-sample .treeview-external-drag #waitcategory {\n    height: 50%;\n    font-family: \"Segoe UI\";\n    font-size: 10px;\n    opacity: 0.6;\n    padding-left: 10px;\n    padding-top: 5px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.schedule-vue-sample .treeview-external-drag .e-list-text,\n.schedule-vue-sample .treeview-external-drag.e-rtl .e-list-text,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-list-text,\n.e-bigger .schedule-vue-sample .treeview-external-drag.e-rtl .e-list-text {\n    border: 0.5px solid #E1E7EC;\n    height: 50px;\n    line-height: 15px !important;\n    padding: 0 5px;\n    width: 200px;\n}\n\n.schedule-vue-sample .treeview-external-drag .e-list-parent,\n.schedule-vue-sample .treeview-external-drag.e-rtl .e-list-parent,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-list-parent,\n.e-bigger .schedule-vue-sample .treeview-external-drag.e-rtl .e-list-parent {\n    height: 100%;\n    padding: 0 2px;\n}\n\n.schedule-vue-sample .treeview-external-drag .e-list-item,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-list-item {\n    height: 100%;\n    padding: 0 0 5px 0;\n}\n\n.schedule-vue-sample .treeview-external-drag .e-fullrow,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-fullrow {\n    height: 55px;\n}\n\n.schedule-vue-sample .treeview-external-drag .e-list-item.e-hover > .e-fullrow,\n.schedule-vue-sample .treeview-external-drag .e-list-item.e-active > .e-fullrow,\n.schedule-vue-sample .treeview-external-drag .e-list-item.e-active.e-hover > .e-fullrow,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-list-item.e-hover > .e-fullrow,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-list-item.e-active > .e-fullrow,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-list-item.e-active.e-hover > .e-fullrow {\n    background-color: transparent;\n    border-color: transparent;\n    box-shadow: none !important;\n}\n.fluent2-highcontrast .schedule-vue-sample .treeview-external-drag .e-list-item.e-hover>.e-text-content .e-list-text {\n    color: #fff;\n}\n.schedule-vue-sample .treeview-external-drag .e-text-content,\n.e-bigger .schedule-vue-sample .treeview-external-drag .e-text-content,\n.schedule-vue-sample .treeview-external-drag.e-rtl .e-text-content,\n.e-bigger .schedule-vue-sample .treeview-external-drag.e-rtl .e-text-content {\n    padding: 0;\n    background-color: inherit;\n}\n.schedule-vue-sample .e-drag-item.e-treeview.treeview-external-drag,\n.e-bigger .schedule-vue-sample .e-drag-item.e-treeview.treeview-external-drag {\n    padding: 0 !important;\n}\n\n.schedule-vue-sample .e-schedule.schedule-drag-drop .e-timeline-view .e-resource-left-td,\n.schedule-vue-sample .e-schedule.schedule-drag-drop .e-timeline-month-view .e-resource-left-td {\n    width: 160px;\n}\n\n.schedule-vue-sample .e-schedule.schedule-drag-drop .e-resource-cells.e-parent-node .specialist-category {\n    padding-left: 30px\n}\n\n.e-schedule.schedule-drag-drop .e-resource-cells.e-parent-node .template-wrap {\n    padding: 3px 0px;\n}\n\n.schedule-vue-sample .e-schedule.e-rtl.schedule-drag-drop .e-resource-cells.e-parent-node .specialist-category {\n    padding-right: 30px\n}\n\n.schedule-vue-sample .e-schedule.schedule-drag-drop .e-resource-cells.e-child-node .specialist-category,\n.schedule-vue-sample .e-schedule.schedule-drag-drop .e-resource-cells.e-child-node .specialist-name {\n    padding: 5px\n}\n\n.schedule-vue-sample .e-schedule.schedule-drag-drop .e-resource-cells.e-parent-node .specialist-name {\n    padding: 0 10px\n}\n\n.schedule-vue-sample .e-schedule.schedule-drag-drop .specialist-name {\n    font-size: 13px;\n}\n.schedule-vue-sample .e-schedule.schedule-drag-drop .specialist-designation {\n    font-size: 10px;\n}\n\n.schedule-vue-sample .e-schedule.schedule-drag-drop .specialist-image {\n    width: 45px;\n    height: 40px;\n    float: left;\n    border-radius: 50%;\n    margin-right: 10px;\n    background-repeat: no-repeat;\n    background-size: 45px;\n}\n\n@media (max-width: 550px) {\n    \n    .schedule-vue-sample .schedule-container {\n        padding-bottom: 10px\n    }\n    \n\n    .schedule-vue-sample .treeview-external-drag.e-treeview,\n    .e-bigger .schedule-vue-sample .treeview-external-drag.e-treeview {\n        width: 250px;\n    }\n\n    .e-bigger .schedule-vue-sample .treeview-external-drag.e-treeview.e-drag-item {\n        position: relative !important;\n    }\n\n    .schedule-vue-sample .drag-sample-wrapper {\n        display: block;\n    }\n}\n    .e-disble-not-allowed {\n        cursor: unset !important;\n    }\n    .e-drag-item.treeview-external-drag .e-icon-expandable {\n        display: none;\n     }\n</style>\n\n<script>\n    import { createApp } from 'vue';\n    import { addClass, extend, closest } from '@syncfusion/ej2-base';\n    import { hospitalData, waitingList } from './datasource';\n    import { ScheduleComponent, ViewDirective, ViewsDirective, ResourceDirective, ResourcesDirective, TimelineViews, TimelineMonth, Resize, DragAndDrop } from \"@syncfusion/ej2-vue-schedule\";\n    import { TreeViewComponent } from \"@syncfusion/ej2-vue-navigations\";  \n\n    var app = createApp();\n    var treeVue = app.component(\"tree-template\", {\n        template: '<div id=\"waiting\"><div id=\"waitdetails\"><div id=\"waitlist\">{{data.Name}}</div>' +\n                  '<div id=\"waitcategory\">{{data.DepartmentName}} - {{data.Description}}</div></div></div>',\n        data() {\n            return {\n                data: {}\n            };\n        }\n    });\n\n    export default {\n        components: {\n          'ejs-schedule': ScheduleComponent,\n          'e-view': ViewDirective,\n          'e-views': ViewsDirective,\n          'e-resource': ResourceDirective,\n          'e-resources': ResourcesDirective,\n          'ejs-treeview': TreeViewComponent\n        },\n        data: function () {\n            return {\n                eventSettings: {\n                    dataSource: extend([], hospitalData, null, true),\n                    fields: {\n                        subject: { title: 'Patient Name', name: 'Name' },\n                        startTime: { title: \"From\", name: \"StartTime\" },\n                        endTime: { title: \"To\", name: \"EndTime\" },\n                        description: { title: 'Reason', name: 'Description' }\n                    },\n                },\n                selectedDate: new Date(2021, 7, 2),\n                currentView: 'TimelineDay',\n                cssClass: 'schedule-drag-drop',\n                group: {\n                    enableCompactView: false,\n                    resources: ['Departments', 'Consultants']\n                },\n                departmentDataSource: [\n                    { Text: 'GENERAL', Id: 1, Color: '#bbdc00' },\n                    { Text: 'DENTAL', Id: 2, Color: '#9e5fff' }\n                ],\n                consultantDataSource: [\n                    { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' },\n                    { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' },\n                    { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' },\n                    { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' },\n                    { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' },\n                    { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' }\n                ],\n                treeViewFields: { dataSource: waitingList, id: 'Id', text: 'Name' },\n                treeTemplate: function(e){\n                    return {template: treeVue}\n                },\n                draggedItemId : null              \n            }\n        },\n        methods: {\n            onTreeDrag: function(event) {\n                let scheduleObj = this.$refs.ScheduleObj.ej2Instances;\n                if (scheduleObj.isAdaptive) {\n                    let classElement = document.querySelector('.e-device-hover');\n                    if (classElement) {\n                        classElement.classList.remove('e-device-hover');\n                    }\n                    if (event.target.classList.contains('e-work-cells')) {\n                        addClass([event.target], 'e-device-hover');\n                    }\n                }\n            },\n            dataFilter: function (item) { \n                return item.Id !== parseInt(this.draggedItemId, 10); \n            },\n            onActionBegin: function(event) {\n                if (event.requestType === 'eventCreate' && this.draggedItemId) {\n                    let treeObj = document.getElementById('Tree').ej2_instances[0];\n                    let treeViewdata = treeObj.fields.dataSource;\n                    let filteredPeople = treeViewdata.filter(this.dataFilter);\n                    treeObj.fields.dataSource = filteredPeople;\n                    let elements = document.querySelectorAll('.e-drag-item.treeview-external-drag');\n                    for (let i = 0; i < elements.length; i++) {\n                        remove(elements[i]);\n                    }\n                }\n            },\n            onItemSelecting: function (args) {\n                args.cancel = true;\n            },\n            onTreeDragStop: function(event) {\n                let treeElement = closest(event.target, '.e-treeview');\n                let classElement = document.querySelector('.e-device-hover');\n                if (classElement) {\n                   classElement.classList.remove('e-device-hover');\n                }\n                if (!treeElement) {\n                    event.cancel = true;\n                    let scheduleElement = closest(event.target, '.e-content-wrap');\n                    if (scheduleElement) {\n                        let treeObj = document.getElementById('Tree').ej2_instances[0];\n                        let treeviewData = treeObj.fields.dataSource;\n                        if (event.target.classList.contains('e-work-cells')) {\n                            let filteredData =\n                            treeviewData.filter(function (item) { return item.Id === parseInt(event.draggedNodeData.id, 10); });\n                            let scheduleObj = document.getElementById('Schedule').ej2_instances[0]\n                            let cellData = scheduleObj.getCellDetails(event.target);\n                            let resourceDetails = scheduleObj.getResourcesByIndex(cellData.groupIndex);\n                            let eventData = {\n                                Name: filteredData[0].Name,\n                                StartTime: cellData.startTime,\n                                EndTime: cellData.endTime,\n                                IsAllDay: cellData.isAllDay,\n                                Description: filteredData[0].Description,\n                                DepartmentID: resourceDetails.resourceData.GroupId,\n                                ConsultantID: resourceDetails.resourceData.Id\n                            };\n                            scheduleObj.openEditor(eventData, 'Add', true);\n                            this.draggedItemId = event.draggedNodeData.id;\n                        }\n                    }\n                }\n                document.body.classList.remove('e-disble-not-allowed')\n            },\n            onTreeDragStart: function() {\n                document.body.classList.add('e-disble-not-allowed');\n            },\n            getConsultantName: function (data) {\n                let value = JSON.parse(JSON.stringify(data));\n                return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n            },\n            getConsultantImageName: function (data) {\n                let value = JSON.parse(JSON.stringify(data));\n                let resourceName = (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;\n                if (resourceName === 'GENERAL' || resourceName === 'DENTAL') {\n                    return false;\n                } else {\n                    return true;\n                }\n            },\n            getConsultantDesignation: function (data) {\n                let value = JSON.parse(JSON.stringify(data));\n                var resourceName = value.resourceData[value.resource.textField];\n                if (resourceName === \"GENERAL\" || resourceName === \"DENTAL\") {\n                    return '';\n                } else {\n                    return value.resourceData.Designation;\n                }\n            }\n        },\n        computed: {\n            getImage() {\n                return (data) => {\n                    return 'https://ej2.syncfusion.com/vue/demos/source/schedule/images/' + this.getConsultantName(data).toLowerCase() + '.png';\n                };\n            },\n        },\n        provide: {\n            schedule: [TimelineViews, TimelineMonth, Resize, DragAndDrop]\n        }\n    };\n</script>"
    },
    {
      "target": "src/components/scheduler-external-drag-and-drop/SchedulerView.vue",
      "content": "<template>\n  <Scheduler />\n</template>\n\n<script setup>\nimport Scheduler from '../../components/Scheduler.vue'\n</script>"
    }
  ]
}