Jquery tam takvim:

Question

Bu benim eklenti kullanıyorum nasıl ön ucundan her olaya farklı bir renk ayarlayın:

jQuery(document).ready(function() { 
      jQuery('#booking-calendar').fullCalendar({ 
       header: { 
        left: 'prev,next', 
        center: 'title', 
        right: 'month,basicWeek,basicDay' 
       }, 
       editable: true, 
       events: '<?php echo get_template_directory_uri() ?>/bookings-feed.php' 
      }); 

      jQuery('#apartment-selector').change(function() { 
       apartment = jQuery(this).val() 
       jQuery('#booking-calendar').fullCalendar('removeEvents') 
       jQuery('#booking-calendar').fullCalendar('addEventSource', { 
        url: '<?php echo get_template_directory_uri() ?>/bookings-feed.php', 
        type: 'POST', 
        data: { 
         apartment : apartment 
        } 
       }) 
      }) 
     }) 

Ve bu böyle görünecektir:

Gördüğünüz gibi, bir olay başladığında ve bittiğinde izlemek biraz zor, bu yüzden her bir olayın rengini değiştirmeyi düşünüyordum,

Sorun burada her olayın e farklı haftalarda (örnekte olduğu gibi) bölünmüş ve her hafta farklı bir DOM olayı (mantıklıdır) vardır ve bunlarla ilgili herhangi bir sınıf yoktur,

Her bir fikir her rengi nasıl farklılaştırabilir?

Teşekkürler!

Answer 1

Her olayı renklendirmek için sorununuzu çözmek için atabileceğiniz birkaç yaklaşım vardır.

1. Güncelleme olay besleme '/bookings-feed.php' ve eklemek renk (arka plan ve sınır), backgroundColor, textColor veya borderColor olay nesnesinin http://arshaw.com/fullcalendar/docs/event_data/Event_Object/ için.

   events: [{ 
       title : 'event1', 
       start : '2010-01-01', 
       color : '#000' 
   }] 
   

2. Ayrı ve güncellemek olay eventSources kullanmayı besler. Bu, etkinlikleri renk ve metin rengine göre gruplandırmanıza olanak tanır. http://arshaw.com/fullcalendar/docs/event_data/events_array/.

   $ ('# takvim'). FullCalendar ({

   eventSources: [ 
   
       // your event source 
       { 
        events: [ // put the array in the `events` property 
         { 
          title : 'event1', 
          start : '2010-01-01' 
         }, 
         { 
          title : 'event2', 
          start : '2010-01-05', 
          end : '2010-01-07' 
         }, 
         { 
          title : 'event3', 
          start : '2010-01-09 12:30:00', 
         } 
        ], 
        color: 'black',  // an option! 
        textColor: 'yellow' // an option! 
       } 
   
       // any other event sources... 
   
   ] 
   

Answer 2

Sen eventAfterRender geri arama kullanarak deneyebilirsiniz. documentation edin.

Bu şekilde, 'bütün' alacak Olayı seçin ve rastgele bir seçim temelinde rengini değiştirin.

Sadece bir fikir edinebilmeniz için, bu geri bildirimle çalışıyorum, ancak olayın rengine bağlı olarak renk değişiyor. Etkinlik planlanmışsa, gerçekleşiyor veya zaten gerçekleşmişse. Eğer aynı zamanda olayın rengini belirleyebileceğiniz renk denilen bir özelliği vardır render başından sonuna, örtüşme ,, gibi özelliklere sahip olduğu

eventAfterRender: function (event, element, view) { 
     var dataHoje = new Date(); 
     if (event.start < dataHoje && event.end > dataHoje) { 
      //event.color = "#FFB347"; //Em andamento 
      element.css('background-color', '#FFB347'); 
     } else if (event.start < dataHoje && event.end < dataHoje) { 
      //event.color = "#77DD77"; //Concluído OK 
      element.css('background-color', '#77DD77'); 
     } else if (event.start > dataHoje && event.end > dataHoje) { 
      //event.color = "#AEC6CF"; //Não iniciado 
      element.css('background-color', '#AEC6CF'); 
     } 
    }, 

Answer 3

Olaylar liste nesnesi. Renk özelliği kullanıldığı demo kodunun altına en

Görünüş: Burada

 events: [ 
      { 
       start: '2017-11-24', 
       end: '2017-11-28', 
       overlap: false, 
       rendering: 'background', 
       color: '#257e4a' 
      }, 
      { 
       start: '2017-11-06', 
       end: '2017-11-08', 
       overlap: false, 
       rendering: 'background', 
       color: '#ff9f89' 
      }]