Drag & Drop ONLY inside a MarkedTimespans


Is it possible to automatically adjust the drag&drop of events inside the nearest MarkedTimespans?

If it isn’t a feature, how could I achieve it? I was thinking to modify the beforeUpdate or beforeRender events to check the database for the MarkedTimespan and automatically adjust the event displayed, but I don’t know if is possible to manipulate the displayed event.

dl.dropboxusercontent.com/u/171 … ture-1.avi

I’ll try to do it for my own (please, help me if there is a native way! :unamused: )

I’d like to use the “onEventDrag” event, and check on every move if the date_start of the new location is near to the date_start of some markedTimespan there. If that’s the case, move the new location to the markedTimespan exact date. Is it possible? I don’t know how to get the new date_start :cry:

An easier solution could be using the onBeforeEventChanged event. Check if the user has moved the event (state.drag_mode === “move”) and in that case search for the nearest markedTimespan (ajax database query) and set the dates of the event before it is rendered. Will it work?


All will be more easy if there was an API for the markedTimespans to avoid querying the database :frowning: I’ve only seen the ‘checkInMarkedTimespan’ method and it’s very basic (it doesn’t tell you if the event is full inside the markedTimespan or only partially, either you can’t get their date start and end). Or I’m wrong?

scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new) { state = scheduler.getState(); if (state.drag_mode === "move") { var toStr = scheduler.date.date_to_str("%Y-%m-%d %H:%i"); var s2d = scheduler.date.str_to_date("%Y-%m-%d %H:%i"); if (scheduler.checkInMarkedTimespan(ev, "forat")) { $.ajax({ dataType: "json", type: 'POST', url: "<?php echo base_url(); ?>planificador/plan_necessitat/get_forat_proper", data: { dataInici: toStr(ev.start_date), dataFi: toStr(ev.end_date) // Convertir a UTC pq sino agafa dia següent } }).done(function(result) { [b]ev.start_date = s2d(result.DataInici); ev.end_date = s2d(result.DataFi);[/b] }) .fail(function(result) { console.log("Error"); }); } else { return false; } } return true; });

With the bold lines above I can update the displayed event, but the database is updated with the original start and end_dates where I dragged the event?

You are using async post request, so the logic in “done” part called when event was already processed and data is on the way to saving.

If you want to modify data before data sending to server side you need to
a) change the logic to the sync. way ( sync request, or fully client side code )
b) you can temporary disable dataprocessor and re-enable it only from “done” section.

Thx for the tip! Now it’s working!

That’s how it looks: dl.dropboxusercontent.com/u/171128/moving.mp4

Is it planned to integrate this feature in a next future?
Is it planned to make an markedTimespan API to help in cases like this?