FullCalendar: Change agendaDay background-color

Question

Mentre ho visto questa domanda, non ho visto la risposta. Voglio solo essere in grado di colorare lo di dire che ho il mio calendario che ha minuti di slot ogni 15 minuti e dalle 9am alle 9pm, mi piacerebbe solo colorare in modo diverso 10am a 03:00.

Questa informazione proviene da un feed ma non è un problema. Non ho trovato il TD s relativo a un tempo impostato all'interno del calendario. Forse mi sono perso qualcosa? :) Sono piuttosto nuovo a jQuery e fullCalendar.

Inoltre, un'altra domanda veloce che non è correlato a quella principale:

• E 'possibile da un gestore di eventi per ottenere il id del calendario che ha lanciato esso? Ho più calendari sulla mia pagina per simulare qualcosa come una vista di Gantt. Questo mi consentirà di essere in grado di recuperare il feed giusto e popolare gli eventi giusti.

Answer 1

qui è la richiesta di funzionalità per la tua prima domanda: http://code.google.com/p/fullcalendar/issues/detail?id=144 assicurarsi a stella per ricevere gli aggiornamenti. grazie

Answer 2

Ho bisogno di questa funzionalità in un progetto che sto lavorando ora. Questo è un progetto scolastico in cui devo evidenziare lo sfondo con un colore rosso se quel giorno è un evento festivo + i fine settimana. Si prega di notare che qui tutti i sabati non sono feste. Alcune scuole hanno vacanze solo il 2 ° sabato o in alcune scuole un sabato casuale verrà scelto come giornata lavorativa.

In qualche modo ho risolto questo problema anche se non è una soluzione elegante.

Sulla versione 1.5.1 alla linea numero 2291 aggiungi questa linea

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

Dal 2300-2304 sostituire le linee con il seguente codice

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 
} 

Prima di chiamare la piena calendario, è necessario creare una serie di date convertite in oggetti js data e poi convertirle in un intero lungo aggiungendo un simbolo + davanti ad esso, come questo

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]))); 
    } 

Infine ho trovato una funzione js che converte le date mysql in oggetti js date.

function mysqlDateToJSDate(date) { 
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/; 
    var parts=date.replace(regex,"$1 $2 $3").split(' '); 
    return new Date(parts[0],parts[1]-1,parts[2],0,0,0); 
} 

Dopo aver chiamato il calendario completo, non dimenticare di eliminare la variabile globale.

So che creare una variabile globale non è una cosa carina. Ma considerando che il calendario completo è molto attivo con frequenti correzioni di bug e nuove funzionalità, non voglio intromettermi troppo nel codice. Non so come passare la variabile come opzione e facilmente ottenerla dove voglio.

Questo è stato fatto solo in vista mese. Dobbiamo fare lo stesso anche su altre viste ...

Impossibile pubblicare l'anteprima ma è possibile vederlo here.

Answer 3

ho preso la soluzione di @Jegatheesh e lo cambiò di non accedere a una variabile globale e utilizzare la formattazione built-in. Questo è contro 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) { 

Esso introduce la classe CSS fc-holiday sull'elemento td.

Il rendimento potrebbe essere migliorato se formattiamo gli elementi della serie di festività in un timestamp e quindi chiamiamo $.inArray(+date, calendar.options.holidays).

Answer 4

Qui è un concetto proof-of-veloce e sporco che funziona sull'ultima versione 'agenda-views.html' file di demo in vista settimana. Richiede datejs con time.js (per TimeSpan) e al momento non funziona con lo scrolling, ma potrebbe facilmente essere ottimizzato. Si veda anche la pagina intera Gist: 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

ho scritto qualche semplice supporto di annotazione per fare questo tipo di funzione, può essere trovato da

https://github.com/elhigu/fullcalendar

Speriamo che si arriva a essere fuse per ufficiale ramo ad un certo punto

Le annotazioni possono essere aggiunti in questo modo:

$('#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 }, ...]   
    }); 

}) 

.210

esempio completa come utilizzare le annotazioni può essere trovato qui: https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

Answer 6

a partire dalla versione 2.2, è possibile utilizzare 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' 
     } 
    ] 
});