2017-10-11 4 views
0

J'espère que vous allez bien.YUI SchedulerEventRecorder popup

Ce que j'ai besoin de construire est un calendrier permettant à mes utilisateurs de me fournir leur disponibilité via un calendrier et de l'enregistrer dans la base de données. Je joue avec le SchedulerEventRecorder et jusqu'à présent, je pense que c'est vraiment cool. Je veux faire quelques ajustements à la popup lors de l'ajout d'un événement (avant d'enregistrer à la base de données) en ce sens que je veux remplacer la zone de texte avec une liste de sélection afin que mes utilisateurs soient limités aux options (non disponible, disponible, x, y , z).

Je me suis gratté le cerveau et j'ai essayé de comprendre les docs et je ne sais pas comment s'y prendre. Tous les conseils seraient appréciés.

mon code à ce jour est (excusez le code 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> 

Merci

Raj

Répondre

0

Ok, après un certain fouiller dans le code, j'ai utilisé le ci-dessous sur la objet eventRecorder.

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