YUI SchedulerEventRecorder 弹出窗口

Question

希望你一切都好。

我需要构建的是一个日历，允许我的用户通过日历向我提供他们的可用性并将其保存到数据库中。我正在玩 SchedulerEventRecorder，到目前为止我认为它非常酷。我想在添加事件时（在保存到数据库之前）对弹出窗口进行一些调整，因为我想用选择列表替换文本框，以便我的用户仅限于选项（不可用、可用、x、y、 z).

我一直在绞尽脑汁，试图理解文档，但不知道该怎么做。任何提示都会被应用。

到目前为止我的代码是（请原谅 PHP 代码）：

<script>
    YUI().use(
        'aui-scheduler',
        function(Y) 
        {
            <?php if($availability_count > 0) { ?>
            var events = [
                <?php 
                foreach($availability as $a)
                {
                ?>
                {
                    color: '<?php echo $cb->Get_booking_status_colour($a['booking_status'])?>',
                    borderColor: '<?php echo $cb->Get_booking_status_colour($a['booking_status'])?>',
                    content: '<?php echo $cb->Get_booking_status_name($a['booking_status'])?>', 
                    endDate: new Date(<?php echo format_date($a['date_end'], 'Y')?>, <?php echo date('m', strtotime($a['date_end']. '-1 month'))?>, <?php echo format_date($a['date_end'], 'd')?>), 
                    startDate: new Date(<?php echo format_date($a['date_start'], 'Y')?>, <?php echo date('m', strtotime($a['date_start']. '-1 month'))?>, <?php echo format_date($a['date_start'], 'd')?>)
                },
                <?php
                }
                ?>
            ];
            <?php } ?>

            var monthView = new Y.SchedulerMonthView({ isoTime: true });
            var eventRecorder = new Y.SchedulerEventRecorder({
                on: {
                    save: function(event) {
                        alert('Save Event:' + this.isNew() + ' --- ' + this.getContentNode().val() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                        console.log(this.serializeForm());
                    },
                    edit: function(event) {
                        alert('Edit Event:' + this.isNew() + ' --- ' + this.getContentNode().val() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                        console.log(this.serializeForm());
                    },
                    delete: function(event) {
                        alert('Delete Event:' + this.isNew() + ' --- ' + this.getContentNode().val() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                        console.log(this.serializeForm());
                    }
                }, 
                dateFormat: '%a, %B %d, %Y',
                content: '',
                repeated: true
            });
            eventRecorder.setTitle('test');
            eventRecorder.setContent('test 2');

            new Y.Scheduler(
              {
                activeView: monthView,
                boundingBox: '#myScheduler',
                date: new Date(<?php echo date('Y')?>, <?php echo date('m', strtotime('-1 month'))?>, <?php echo date('d')?>),
                eventRecorder: eventRecorder,
                items: events,
                render: true,
                views: [monthView]
              }
            );
        }
    );
</script>

谢谢

拉吉

Answer 1

好的，在深入研究代码之后，我在 eventRecorder 对象上使用了下面的内容。

headerTemplate: '<select name=""><option value="5">Available</option><option value="6">Unavailable</option></select>'

YUI SchedulerEventRecorder 弹出窗口

YUI SchedulerEventRecorder popup

javascript

yui