FullCalendar: Change agendaDay couleur de fond

Question

Bien que j'ai vu cette question posée, je n'ai pas vu la réponse. Je veux juste pouvoir colorer le background-color du TD d'une certaine gamme ..

Disons que j'ai mon calendrier qui a des minutes de fente toutes les 15 minutes et de 9h à 21h, je voudrais seulement colorer différemment 10h à 15h00

Cette information proviendrait d'un flux mais ce n'est pas un problème. Je n'ai pas trouvé les TD s concernant un temps défini dans le calendrier. Peut-être que j'ai raté quelque chose? :) Je suis plutôt nouveau à jQuery et fullCalendar.

En outre, une autre question rapide qui est sans rapport avec la principale:

• Est-il possible d'un gestionnaire d'événements pour obtenir le id du calendrier qui l'a lancé? J'ai plusieurs calendriers sur ma page pour simuler quelque chose comme une vue de Gantt. Cela me permettra d'aller chercher le bon flux et de remplir les bons événements.

Answer 1

est ici la demande de fonctionnalité pour votre première question: http://code.google.com/p/fullcalendar/issues/detail?id=144 assurez-vous de star pour recevoir des mises à jour. merci

Answer 2

J'ai besoin de cette fonctionnalité dans un projet que je travaille maintenant. C'est un projet d'école où je dois mettre en évidence le fond avec une couleur rouge si ce jour est un événement de vacances + les week-ends. S'il vous plaît noter que tous les samedis ne sont pas des vacances. Certaines écoles ont des vacances seulement le deuxième samedi ou dans certaines écoles, un samedi au hasard sera choisi comme jour de travail.

D'une manière ou d'une autre, j'ai surmonté ce problème même si ce n'est pas une solution élégante.

Sur la version 1.5.1 au numéro de la ligne 2291 ajouter cette ligne

var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix 

De 2300-2304 remplacer les lignes avec le code suivant

if (+date == +today) { 
    cell.addClass(tm + '-state-highlight fc-today'); 
}else if($.inArray(+date, refDate)!=-1){ //Added by me 
    cell.addClass(tm + '-state-error'); //Added by me 
}else{ 
    cell.removeClass(tm + '-state-highlight fc-today'); 
    cell.removeClass(tm + '-state-error'); //Added by me 
} 

Avant d'appeler le calendrier complet, vous devez créer un tableau de dates converties en objets js date puis convertis en entier long en ajoutant un symbole + devant celui-ci, comme ceci

var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31']; 
    window.holidays = []; 
    for(var i=0; i<holidayArray.length;i++){ 
     holidays.push(+(mysqlDateToJSDate(holidayArray[i]))); 
    } 

Enfin, j'ai trouvé une fonction js qui convertit les dates mysql en js date objets. Après l'appel du calendrier complet, n'oubliez pas de supprimer la variable globale. Je sais que créer une variable globale n'est pas une bonne chose. Mais compte tenu du calendrier complet est très actif avec la fixation de bugs fréquents et de nouvelles fonctionnalités, je ne veux pas trop se mêler dans le code. Je ne sais pas comment passer la variable en option et l'obtenir facilement où je veux.

Cela a été fait uniquement en vue mensuelle. Nous devons faire la même chose sur d'autres vues aussi ...

Impossible de poster l'aperçu mais vous pouvez le voir here.

Answer 3

J'ai pris la solution de @Jegatheesh et l'ai modifiée pour ne pas accéder à une variable globale et utiliser le formatage intégré. Ceci est contre 1.5.3

--- i/fullcalendar.js 
+++ w/fullcalendar.js 
@@ -29,6 +29,7 @@ var defaults = { 
       right: 'today prev,next' 
     }, 
     weekends: true, 
+  holidays: [], 

     // editing 
     //editable: false, 
@@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) { 
         } 
         if (+date == +today) { 
           cell.addClass(tm + '-state-highlight fc-today'); 
+        cell.removeClass(tm + '-holiday'); 
+      }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) { 
+        cell.addClass(tm + '-holiday'); 
         }else{ 
-        cell.removeClass(tm + '-state-highlight fc-today'); 
+        cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday'); 
         } 
         cell.find('div.fc-day-number').text(date.getDate()); 
         if (dowDirty) { 

Il introduit la classe fc-holiday css sur l'élément td.

Performanced pourrait être améliorée si nous formater les éléments du tableau des jours fériés dans un horodatage, puis appelez $.inArray(+date, calendar.options.holidays) à la place.

Answer 4

Voici une preuve de concept rapide et sale qui fonctionne sur la dernière version du fichier de démonstration 'agenda-views.html' en vue hebdomadaire. Il nécessite datejs avec time.js (pour TimeSpan) et ne fonctionne pas actuellement avec le défilement, mais pourrait facilement être modifié. Voir aussi la page complète essentiel: https://gist.github.com/3005635

var resAvail = [ 
    { 
     DayOfWeek: 0, 
     Start: new Date(y, m, d, 10, 0), 
     End: new Date(y, m, d, 17, 30) 
    }, 
    { 
     DayOfWeek: 1, 
     Start: new Date(y, m, d, 9, 0), 
     End: new Date(y, m, d, 19, 30) 
    }, 
    { 
     DayOfWeek: 4, 
     Start: new Date(y, m, d, 12, 0), 
     End: new Date(y, m, d, 20, 00) 
    } 
] 

var view = calendar.fullCalendar('getView'); 
var slotHeight = view.getSlotHeight(); 
var slotMins = calendar.fullCalendar('option', 'slotMinutes'); 
var minTime = calendar.fullCalendar('option', 'minTime'); 
var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top; 

// rip through days of week 
for (i = 0; i < 7; i++) { 
    for (r = 0; r < resAvail.length; r++) { 
     var currentRes = resAvail[r]; 
     if (currentRes.DayOfWeek == i) { 
      addAvailBlock(currentRes); 
     } 
    } 
} 

function addAvailBlock(currentRes) { 
    var dayColumn = getDayColumn(i); 
    var $availBlock = $('<div class="avail-block"></div>'); 
    dayColumn.append($availBlock); 
    $availBlock.css('width', $availBlock.parent().css('width')); 

    // Where we start the availability block 
    var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime); 
    var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart); 
    var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60); 
    var startOffsetSlots = startOffsetMins/slotMins; 
    var startOffsetHeight = startOffsetSlots * slotHeight; 

    var blockSpan = new TimeSpan(currentRes.End - currentRes.Start); 
    var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60); 
    var blockSlots = blockMins/slotMins; 
    var blockHeight = blockSlots * slotHeight; 
    $availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight); 
} 

function getDayColumn(dayOfWeek) { 
    switch (dayOfWeek) { 
     case 0: 
      return $('.fc-sun'); 
     case 1: 
      return $('.fc-mon'); 
     case 2: 
      return $('.fc-tue'); 
     case 3: 
      return $('.fc-wed'); 
     case 4: 
      return $('.fc-thu'); 
     case 5: 
      return $('.fc-fri'); 
     case 6: 
      return $('.fc-sat'); 
    } 
} 

Answer 5

j'ai écrit un soutien d'annotation simple à faire ce genre de fonctionnalité, il se trouve de

https://github.com/elhigu/fullcalendar

Espérons qu'il arrive à être fusionnée à la cote officielle branche à un moment donné

Les annotations peuvent être ajoutées comme ceci:

$('#calendar').fullCalendar({ 
     .... 
     events: [ 
      { 
       title: 'All Day Event', 
       start: new Date(y, m, 1) 
      } 
     ], 
     annotations: [{ 
       start: new Date(y, m, d, 13, 0), 
       end: new Date(y, m, d, 15, 30), 
       title: 'My 1st annotation', // optional 
       cls: 'open', // optional 
       color: '#777777', // optional 
       background: '#eeeeff' // optional 
      }, { next annotation }, ...]   
    }); 

}) 

Exemple complet comment utiliser les annotations se trouvent ici: https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

Answer 6

depuis la version 2.2, vous pouvez utiliser Background Events

$('#calendar').fullCalendar({ 
    defaultDate: '2014-11-10', 
    defaultView: 'agendaWeek', 
    events: [ 
     { 
      start: '2014-11-10T10:00:00', 
      end: '2014-11-10T16:00:00', 
      rendering: 'background' 
     } 
    ] 
});