Fullcalendar: modifica il colore per giorni specifici

Question

Sono bloccato con un progetto al lavoro. Devo cambiare il colore di sfondo di alcuni giorni. È un calendario in cui l'utente dovrebbe vedere, quali giorni sono disponibili e quali no. Ho scoperto che esiste un attributo chiamato "data-data", ma non ho trovato la possibilità di usarlo.

C'è un modo per manipolare lo sfondo di giorni specifici?

Penso che ci deve essere un modo, perché la cella che mostra la data corrente ha anche un altro colore.

Answer 1

Per i punti di vista month, e basicDay è possibile modificare il rendering dei giorni, fornendo una funzione dayRender. Ad esempio:

$("#calendar").fullCalendar({ 
    dayRender: function (date, cell) { 
     cell.css("background-color", "red"); 
    } 
}); 

La documentazione per dayRender è disponibile qui: http://arshaw.com/fullcalendar/docs/display/dayRender/

Ed ecco un esempio di lavoro sul jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

Answer 2

Quando si lavora con librerie esterne, si dovrebbe cercare di non approfittare di qualsiasi cosa che è stato generato dalla libreria. Dato che nella prossima versione, se cambiano il modo in cui la libreria funziona internamente, la libreria sarà comunque retrocompatibile ma il tuo codice smetterà di funzionare. Quindi cerca di usare l'API della libreria il più possibile invece di fare hack.

Rispondere alla domanda, un modo per farlo sarà, aggiungere un nuovo evento a tutti i giorni che non sono disponibili. Questo può essere fatto creando un oggetto evento e facendo un renderEvent (.fullCalendar ('renderEvent', event [, stick])). Durante la creazione di un oggetto evento, assegna il colore di sfondo al colore desiderato e imposta il colore, il colore del testo, il colore del bordo allo stesso valore dello sfondo se non vuoi che sia visibile.

Modifica: La risposta di Regin Larsen sembra migliore. Non l'ho notato nella documentazione.

Answer 3

Se si desidera che jquery fullcalendar precedente tutto il giorno rosso (o qualsiasi altro) colorato, questo è il codice.

var $calendar = $('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,basicWeek,basicDay' 
    }, 

    defaultView: 'month', 

    dayRender: function (date, cell) { 
     var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); 
        var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd'); 
        if (check < today) { 
         cell.css("background-color", "red"); 
        } 
    } 
}); 

Il codice di Regin Larsen mi aiuta a raggiungere questo obiettivo. Grazie Regin Larsen.

Answer 4

Perché non utilizzare l'attributo "data-date"?

$("#calendar").fullCalendar(function() { 

    viewRender: function() { 
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red"); 
}, 

.... 

Answer 5

dayRender: function(date, cell){ 
     if (moment().diff(date,'days') > 0){ 
      cell.css("background-color","silver"); 
     } 
    }, 

Answer 6

Per coloro che cercano di cambiare semplicemente il colore di date passate, indirizzare .fc-past nel CSS e aggiungere una proprietà background-color. Ad esempio ,:

.fc-past { 
    background-color: silver; 
} 

Answer 7

Per confrontare utilizzando il parametro della data per un giorno specifico:

$("#calendar").fullCalendar({ 
    dayRender: function (date, cell) { 
     if (date.isSame('2016-08-04')) { 
      cell.css("background-color","red"); 
     } 
    } 
}); 

isSame viene da moment.js, che viene utilizzato da fullcalendar: http://momentjs.com/docs/#/query/is-same/