javascriptcalendaryuialloy-ui

Save, Edit, Delete, and Cancel events in AlloyUI Scheduler


How can I listen for the Save, Edit, Delete, and Cancel events from AlloyUI's Scheduler? I need to save the value in our database for future use, but I don't see any documentation for this.

The current code that I have is this:

YUI().use('aui-scheduler', function(Y) {
    var items = [
        {
            content: 'Wake Early'
        },
        {
            content: 'Exercise'
        },
    ];
    var schedulerViews = [
        new Y.SchedulerWeekView(),
        new Y.SchedulerDayView(),
        new Y.SchedulerMonthView(),
        new Y.SchedulerAgendaView()
    ];
   var eventRecorder = new Y.SchedulerEventRecorder();
    new Y.Scheduler({
        boundingBox: '#scheduler',
        items: items,
        views: schedulerViews,
        activeView: schedulerViews[2],
        eventRecorder: eventRecorder,
         firstDayOfWeek: 1,
        // activeView: weekView,
        // views: [dayView, weekView, monthView, agendaView]
    }).render();

    Y.Do.after(function() { 
      this.on("save",function(data){
       alert('Event:'+this.isNew()+' --- '+this.getContentNode().val());
      });   
    }, eventRecorder, 'showPopover');

});

I'm having no luck so far, can anyone help me out? I've tried this tutorial and this one as well but they haven't helped.


Solution

  • You should use the undocumented save, edit, delete, and cancel* events of SchedulerEventRecorder. For example:

    var eventRecorder = new Y.SchedulerEventRecorder({
        on: {
            save: function(event) {
                alert('Save Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
            },
            edit: function(event) {
                alert('Edit Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
            },
            delete: function(event) {
                alert('Delete Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
    // Note: The cancel event seems to be buggy and occurs at the wrong times, so I commented it out.
    //      },
    //      cancel: function(event) {
    //          alert('Cancel Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
            }
        }
    });
    

    Here's a runnable example with the code you provided:

    YUI().use('aui-scheduler', function(Y) {
      var items = [{
        content: 'Wake Early'
      }, {
        content: 'Exercise'
      }, ];
      var schedulerViews = [
        new Y.SchedulerWeekView(),
        new Y.SchedulerDayView(),
        new Y.SchedulerMonthView(),
        new Y.SchedulerAgendaView()
      ];
      var eventRecorder = new Y.SchedulerEventRecorder({
        on: {
          save: function(event) {
            alert('Save Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
          },
          edit: function(event) {
            alert('Edit Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
          },
          delete: function(event) {
            alert('Delete Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
    // Note: The cancel event seems to be buggy and occurs at the wrong times, so I commented it out.
    //      },
    //      cancel: function(event) {
    //        alert('Cancel Event:' + this.isNew() + ' --- ' + this.getContentNode().val());
          }
        }
      });
      new Y.Scheduler({
        boundingBox: '#scheduler',
        items: items,
        views: schedulerViews,
        activeView: schedulerViews[2],
        eventRecorder: eventRecorder,
        firstDayOfWeek: 1,
        // activeView: weekView,
        // views: [dayView, weekView, monthView, agendaView]
      }).render();
    
    });
    <script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
    <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
    <div id="myScheduler"></div>

    *The cancel event seems be a bit buggy and occurs at the wrong times, so I commented it out. It seems to occur whenever any other event occurs.