How can I add a customized buttons to the AlloyUI

Question

How can I add a customized buttons to the AlloyUI Scheduler's event popup? The event popup includes Save, Cancel, and Delete buttons, but I would like to add another one (for example Edit). I've looked through the Schedulers API Doc, but I cannot find any information on adding buttons to the event popup.

Answer 1

The SchedulerEventRecorder class contains a reference to the popover which contains the form to which you are seeking to add buttons. However, I've tried to customize the toolbar footer (within the toolbar within the popover within the scheduler) which contains the buttons, and it doesn't seem possible. So I'm doubtful that there is an standard API method for customizing these buttons, and I'm also doubtful that the developers intended for these buttons to be customized at all. Therefore I would recommend not customizing the buttons.

If you are certain that you would like to add to and customize these buttons in spite of the potential issues however, then I did find a way to do what you wanted. Every time the Scheduler's popover pops up, it shows only the default buttons. Even if you add buttons to it after it has been created, it will ignore or remove them or (most likely) get destroyed and then recreated and never show custom buttons. So any buttons must be added after the popover displays itself. To do this, you can execute a method after the SchedulerEventRecorder.showPopover() method using Do.after() like so:

var eventRecorder = new Y.SchedulerEventRecorder();

Y.Do.after(function() {
    // Assuming that the boundingBox of your Scheduler has an id of "bb":
    var toolbarBtnGroup = Y.one('#bb .toolbar .btn-group');
    toolbarBtnGroup.appendChild('<button id="edit" type="button">Edit</button>');
}, eventRecorder, 'showPopover');

Here's a runnable code example:

YUI().use('aui-button', 'aui-scheduler', 'event-custom-base', function (Y) {

    var eventRecorder = new Y.SchedulerEventRecorder();
    var weekView = new Y.SchedulerWeekView();

    new Y.Scheduler({
        boundingBox: '#bb',
        date: new Date(2014, 8, 28),
        eventRecorder: eventRecorder,
        items: [],
        views: [weekView]
    }).render();

    var editButton;

    Y.Do.after(function() {

        var toolbarBtnGroup = Y.one('#bb .toolbar .btn-group');
        toolbarBtnGroup.appendChild('<button id="edit" type="button">Edit</button>');

        editButton = new Y.Button({
            label: 'Edit',
            srcNode: '#edit',
        }).render();

        editButton.on('click', function(event) {
            alert('Edit clicked!');
            eventRecorder.hidePopover();
        });
    }, eventRecorder, 'showPopover');
    
    Y.Do.after(function() {
        
        // Make sure that the editButton is destroyed to avoid a memory leak.
        if (editButton) {
            editButton.destroy();
        }
    }, eventRecorder, 'hidePopover');
});

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<!-- boundingBox of the scheduler -->
<div id="bb"></div>

Answer 2

I have created my own request recorder:

    var myEventRecorder = A.Component.create({
        EXTENDS: A.SchedulerEventRecorder,

        NAME: 'scheduler-event-recorder',

        prototype: {
            _getFooterToolbar: function() {
                var instance = this,
                event = instance.get('event'),
                strings = instance.get('strings'),
                children = [
                    {
                        label: strings['cancel'],
                        on: {
                            click: A.bind(instance._handleCancelEvent, instance)
                        }
                    }
                ];

                var requestId = event && event.get('requestId');

                if (requestId) {
                    children.push({
                        label: strings['open_request'],
                        on: {
                            click: A.bind(instance._handleOpenRequest, instance)
                        }
                    });
                }

                return [children];
            },

            _handleOpenRequest : function() {
                //console.log(arguments);
                var event = this.get('event');
                var requestUrl = this.get('requestUrl');
                requestUrl.setParameter('REQUEST_PARAM', event.get('requestId'));
                window.location.href = requestUrl.toString();
            }
        }
    });

    var eventRecorder = new myEventRecorder();

and then use it:

var scheduler = new A.Scheduler(
      {
        boundingBox: '#myScheduler',
        eventRecorder: eventRecorder,
        views: [dayView, weekView]
      }
);