outside drag from an outside source

Scheduler Javascript
#1

Hello

As part of our integration with our product, I wanted to know if it is possible to drag from an outside source into a calendar view. For example, if I dragged a piece of text or a file onto the scheduler, an event can be created at that destination time, with the text from the drag.

I know you can do it from DHTMLX components, but I wasn’t sure if there was any way to do this from a whole other source.

Thanks

Ken

#2

Yes it is possible.
I’ve created my control which i want to drag into calendar:

This is the code for my control

<div id="idEventTemplate_74001" class="dhx_cal_event event_74001" subject="74001" style="float: left; padding: 0.3em;">
   <div class="dhx_event_move dhx_header">&nbsp;</div>
   <div class="dhx_event_move dhx_title" style="width:168px;">Personal Event</div>
   <div class="dhx_body" style=" width:158px; height:11px;">New event</div>
</div>

In the init of the scheluder set the following param:

   scheduler.config.drag_in = true;

also inlcude the js in the code

   <script src="codebase/ext/dhtmlxscheduler_outerdrag.js" type="text/javascript" charset="utf-8"></script>

the tricky part is to say what information to be taken from your component into the new event
I use the following code for mine:

[code]$(function () {
$(“div[id^=‘idEventTemplate_’]”).draggable({
helper: ‘clone’,
cursor: ‘move’, // sets the cursor apperance
opacity: 0.35, // opacity while the element is dragged
revertDuration: 900, // duration while the item returns to its place
stop: function (event, ui) {
var drop = scheduler.getActionData(event),
node = event.target || event.srcElement;
//node is dropped on a valid scheduler date
if (drop.date) {
//create new event
var ev = {
text: node.children[2].innerHTML,
start_date: drop.date,
subject: node.getAttribute(“subject”),
end_date: scheduler.date.add(drop.date, scheduler.config.time_step, ‘minute’)
};

            //add it to the scheduler
            scheduler.addEvent(ev);
        }
    }
});

});[/code]

As you can see I make draggable all my templetes and after that on drag.stop (which ofcorse is inside the scheduler area) I assign information i from my control to a newly created event and after all is done I’m adding the newly created event into the scheduler object.
Hope this is helpfull

#3

Thanks preatorian.

It looks like you’ve created an object on the same page as the calendar, that you then drag into the calendar.

Is it possible to extend this to other browser windows, or other apps entirely, such that if you drag text from a different window into the scheduler window, that we can use the text of what we’re dragging as the subject of the event.

It would feel similar to an upload interface where you drag a file from your desktop into the browser to perform and upload. But in this case, you’re dragging a block of text to create an event.

#4

The control is almost the same as events’ design in order to be used as template. It can be redesigned as you wish. In draggable.stop method is the key what will you use from your object into the newly created event.

For your second question - I’ve no idea is it going to work with two separate windows. I’ve just implemented that as a part of the design I need.

Good luck finding a solution.