How can I add a customized buttons to the AlloyUI Scheduler's event popup?

泪湿孤枕 提交于 2019-12-05 13:04:23

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>
alexander

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]
      }
);
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!