YUI SchedulerEventRecorder popup

Question

hope you are well.

What I need to build is a calendar allowing my users to provide me their availability via a calendar and save that into the db. I'm playing with the SchedulerEventRecorder and so far I think its bloody cool. I want to make some tweaks to the popup when adding an event (prior to saving to the db) in that I want to replace the textbox with a selectlist so that my users are limited to options (not available, available, x, y, z).

I have been scratching my brain and trying to understand the docs and dont know how to go about this. Any tips would be appriciated.

my code so far is (excuse the PHP code):

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

Thanks

Raj

Answer 1

Ok, after some digging around in the code, I have used the below on the eventRecorder object.

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