Cloning or Moving events

4 posts, 1 answers
  1. Jon
    Jon avatar
    73 posts
    Member since:
    Oct 2013

    Posted 28 Mar 2018 Link to this post

    I have a scheduler with the following code for moveEnd

    moveEnd: function (e) {
        //For Work Managers this code will give the option to clone or move when an event is moved.
       if ($WorkManager == 'true') {
              e.preventDefault();
              eventHolder = e;
              var dialog = $("#schedulerWindow").data("kendoWindow");
              dialog.center();
              dialog.open();
         }
    },

     

    The dialog has just two buttons CLONE which has an onclick function of onClone() and MOVE which has an onclick function of onMove(). These functions are listed below.

    function onClone() {
            var dialog = $("#schedulerWindow").data("kendoWindow");
            var scheduler = $("#scheduler").data("kendoScheduler");
            dialog.close();
            var copy = eventHolder.event.toJSON();
            copy.start = eventHolder.start;
            copy.end = eventHolder.end;
            copy.RID = -1;
            delete copy.uid;
     
            scheduler.dataSource.add(copy);
            scheduler.dataSource.sync();
            eventHolder = null;
        }
     
        function onMove() {
            var dialog = $("#schedulerWindow").data("kendoWindow");
            var scheduler = $("#scheduler").data("kendoScheduler");
            dialog.close();
            eventHolder.event.set("start", eventHolder.start);
            eventHolder.event.set("end", eventHolder.end);
            scheduler.dataSource.sync();
            eventHolder = null;
        }

     

    This was fine when you could only select one event at a time. The latest version of the code will allow the use of Ctrl Click to select several events

    If I select several events and try and clone or move only the last clicked event is cloned/moved. What changes to the Clone and Move functions do I need to make for this to work with one or more selected events.

    Thanks

  2.
  3. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 30 Mar 2018 Link to this post

    Hello Jon,

    As the offset of all selected and moved / cloned events will be the same, I would suggest you to get that offset in the moveEnd event and store it. Also, in the same event handler you could retrieve the currently selected events:
    var selected;
    var draggedDifference = 0;
    ...
      
    moveEnd: function (e) {
        //For Work Managers this code will give the option to clone or move when an event is moved.
       if ($WorkManager == 'true') {
              e.preventDefault();
      
              var draggedEvent = e.event;
              draggedDifference = e.start - draggedEvent.start;
              selected = e.sender.select().events;
      
              var dialog = $("#schedulerWindow").data("kendoWindow");
              dialog.center();
              dialog.open();
         }
    },

    Then in the onClone or onMove handlers you will need to iterate over all selected events and apply the draggedDifference stored previously:
    function onClone() {
      var dialog = $("#schedulerWindow").data("kendoWindow");
      var scheduler = $("#scheduler").data("kendoScheduler");
      dialog.close();
       
      for(var i = 0; i < selected.length; i++) {
        var currentEvent = selected[i];
        var copy = currentEvent.toJSON();
     
        copy.start = new Date(copy.start.getTime() + draggedDifference);
        copy.end = new Date(copy.end.getTime() + draggedDifference);
        copy.RID = -1;
        delete copy.uid;
        scheduler.dataSource.add(copy);
      }
       
      selected = null;
      draggedDifference = 0;
      scheduler.dataSource.sync();
    }
     
    function onMove() {
      var dialog = $("#schedulerWindow").data("kendoWindow");
      var scheduler = $("#scheduler").data("kendoScheduler");
      dialog.close();
       
      for(var i = 0; i < selected.length; i++) {
        var currentEvent = selected[i];
         
        currentEvent.set("start", new Date(currentEvent.start.getTime() + draggedDifference));
        currentEvent.set("end", new Date(currentEvent.end.getTime() + draggedDifference));
      }
       
      selected = null;
      draggedDifference = 0;
      scheduler.dataSource.sync();
    }

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jon
    Jon avatar
    73 posts
    Member since:
    Oct 2013

    Posted 03 Apr 2018 in reply to Veselin Tsvetanov Link to this post

    Veselin,

    Many thanks... your code worked great albeit just a small typo... in the clone function the start and end time need updating as so:

    copy.start = new Date(copy.start.getTime() + draggedDifference);
    copy.end = new Date(copy.start.getTime() + draggedDifference);
     
    changed to:
     
    copy.start = new Date(copy.start.getTime() + draggedDifference);
    copy.end = new Date(copy.end.getTime() + draggedDifference);

     

    Regards

     

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 03 Apr 2018 Link to this post

    Hello Jon,

    Thank you for the note on the example issue. I will alter my original post so it shows the proper implementation, that you have shared.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top