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弹出窗口

1 个答案: