best way to refresh events in an editable scheduler

Scheduler Javascript
#1

Hi,
I have a page with a scheduler in it. The user can drag, edit, add, delete, etc, events.
This page can be edited by various user at the same time, so I’ve to refresh the data every time something changed. With websockets it will be simple, but because of IE :slight_smile: I’ve decided to use a timer function to do this:

    scheduler.clearAll();
    scheduler.load("data.php", function() { scheduler.render_view_data() });

every 5 minutes. It’s not elegant I know, but I didn’t have a better idea.
The point is that if the refresh start during an event edit (simple drag, lightbox open, etc) the scheduler will stop working, of course.
So, what’s the best way to refresh the scheduler in a intelligent way? Or, alternatively, in which way I can discover if the scheduler is in editing mode and bypass the refresh?

Thank you.

#2

Hello … i have the same problem and i’m interested in your solution with web-sockets. You say it’s simple? For me IE is not interested because we’re working with Firefox and it’s not an open project. Can you tell me something about that?

Thank you

#3

I can’t paste you the code simply because I haven’t it, I’ve done some test without saving…
I’ve this config: when a user change something a php page get the post from the scheduler and save all to a mysql database. If you have an active websocket you can send a signal to the browsers to tell them to reload the scheduler.
I’ve simply take one of the examples you can found on the internet ad adapted it, with not so much you can make it work. After that you have to consider the editing status of the scheduler before force a refresh, etc…

#4

Hello,

In your function which decides if it’s time to run update:

if(scheduler.getState().lightbox_id) return false; // lightbox is opened if(scheduler._drag_mode) return false; // some form of event dragging is occuring (will be moved to getState function in upcoming version) // and if everything is fine you can update events
Kind regards,
Ilya

#5

thank you very much. actually I’ve been trying with this code:

    function setEdit(editstate) { 
      editing=editstate;
      if (editing==1)
        [...some stuff...]
        $("#schedulerediting").css("background","#f40");
      else
        $("#schedulerediting").css("background","transparent");
      return true;
    }
    [...]
    scheduler.attachEvent("onEventCreated",      function(event_id,event_object) { return setEdit(1); });
    scheduler.attachEvent("onBeforeDrag",        function(event_id,event_object) { return setEdit(1); });
    scheduler.attachEvent("onBeforeLightBox",    function(event_id,event_object) { return setEdit(1); });
    scheduler.attachEvent("onBeforeEventDelete", function(event_id,event_object) { return setEdit(1); });
    scheduler.attachEvent("onEventAdded",   function(event_id,event_object) { return setEdit(0); });
    scheduler.attachEvent("onEventChanged", function(event_id,event_object) { return setEdit(0); });
    scheduler.attachEvent("onEventDeleted", function(event_id) { return setEdit(0); });
    scheduler.attachEvent("onEventSave",    function(event_id,event_object) { return setEdit(0); });
    scheduler.attachEvent("onEventCancel",  function(event_id,event_object) { return setEdit(0); });

your code is much more efficent :slight_smile: