Как добавить настраиваемые кнопки во всплывающее окно событий планировщика AlloyUI?

Класс SchedulerEventRecorder содержит ссылку на всплывающее окно, которое содержит форму, в которую вы хотите добавить кнопки. Однако я попытался настроить нижний колонтитул панели инструментов (на панели инструментов во всплывающем окне в планировщике), который содержит кнопки, и это не представляется возможным. Поэтому я сомневаюсь, что существует стандартный метод API для настройки этих кнопок, и я также сомневаюсь, что разработчики вообще планировали настраивать эти кнопки. Поэтому я бы рекомендовал не настраивать кнопки.

Если вы уверены, что хотите добавить и настроить эти кнопки, несмотря на потенциальные проблемы, то я нашел способ сделать то, что вы хотели. Каждый раз, когда появляется всплывающее окно Scheduler, оно показывает только кнопки по умолчанию. Даже если вы добавите к нему кнопки после того, как он был создан, он проигнорирует или удалит их или (что наиболее вероятно) будет уничтожен, а затем воссоздан и никогда не покажет пользовательские кнопки. Таким образом, любые кнопки должны быть добавлены после того, как всплывающее окно отобразится. Для этого вы можете выполнить метод после метода SchedulerEventRecorder.showPopover(), используя < href="http://yuilibrary.com/yui/docs/api/classes/Do.html#method_after" rel="nofollow">Do.after() вот так:

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>

Я создал свой собственный регистратор запросов:

    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();

а затем используйте его:

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