This is a migrated thread and some comments may be shown as answers.

Get Scheduler timeslot on kendoDropTarget

1 Answer 29 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
MiDAS
Top achievements
Rank 1
MiDAS asked on 06 Nov 2019, 10:40 AM

In searching this forum I came across this post from 2013.... https://www.telerik.com/forums/get-scheduler-timeslot-on-kendodroptarget

It mentions that this may be implemented in a future release. I've not found any information that indicates this is possible. I'm looking at placing a series of div objects that represent different types of events (work, lunch, meeting, day-off etc) along side a Scheduler. A user will drag and drop a div onto a scheduler and that will create a scheduler event in the slot it was dropped onto. Is this possible?

Thanks

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 08 Nov 2019, 10:14 AM

Hello,

Yes, it is possible to create an event by dragging a div. On this link you will find a simple Dojo example demonstrating a possible approach. The aspects of the example worth mentioning specifically is to define the div as a kendoDraggable widget, and to configure the Scheduler DropTargetArea in the dataBound event:

 

dataBound: function (e) {
    //create drop area from current View
    createDropArea(this);
},

 

 

function  createDropArea(scheduler) {
    scheduler.view().content.kendoDropTargetArea({
        filter: ".k-scheduler-table td, .k-event",
        drop: function(e){
            var offset = $(e.dropTarget).offset();
            var slot = scheduler.slotByPosition(offset.left, offset.top);
            var dataItem = $("#draggable").text();
            if(dataItem && slot) {
                var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
                var newEvent = {
                    title: dataItem,
                    end: new Date(slot.startDate.getTime()  + 4*3600*1000),
                    start: slot.startDate ,
                };
                scheduler.dataSource.add(newEvent);
            }
        }
    });
}

 

I prepared the Dojo based upon the How To Drag and Drop between Kendo Grid and Scheduler article. We also have a How To Drag and Drop between two Schedulers. You can review those examples if you are interested in more complex implementation.

 

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Drag and Drop
Asked by
MiDAS
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or