Fullcalendar: Zmień kolor na konkretne dni

Question

Utknąłem z projektem, który dostaję w pracy. Muszę zmienić kolor tła w kilka dni. Jest to kalendarz, w którym użytkownik powinien zobaczyć, które dni są dostępne, a które nie. Dowiedziałem się, że istnieje atrybut o nazwie "data-data", ale nie znalazłem możliwości użycia go.

Czy istnieje sposób manipulowania tłem określonych dni?

Myślę, że musi być jakiś sposób, ponieważ komórka, która pokazuje aktualną datę, ma również inny kolor.

Answer 1

widoków month, i basicDay można zmienić wiadczenia dni dostarczając dayRender funkcję. Np:

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

Dokumentacja dayRender jest dostępny tutaj: http://arshaw.com/fullcalendar/docs/display/dayRender/

A oto przykład pracuje nad jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

Answer 2

Podczas pracy z zewnętrznych bibliotek, należy spróbować, aby nie skorzystać z niczego który został wygenerowany przez bibliotekę. Ponieważ w następnej wersji, jeśli zmienią sposób, w jaki biblioteka działa wewnętrznie, biblioteka będzie nadal kompatybilna wstecz, ale twój kod przestanie działać. Dlatego staraj się korzystać z biblioteki API jak najwięcej, zamiast robić hacki.

Odpowiedzi na twoje pytanie, jednym ze sposobów zrobienia tego będzie dodanie nowego wydarzenia do wszystkich dni, które nie są dostępne. Można to zrobić, tworząc obiekt zdarzeń i wykonując renderEvent (.fullCalendar ('renderEvent', event [, stick])). Podczas tworzenia obiektu zdarzenia przypisz kolor tła jako żądany kolor i ustaw kolor, kolor tekstu, kolor obramowania na taki sam jak tło, jeśli nie chcesz, aby był widoczny.

Edytuj: Odpowiedź Regina Larsena wydaje się być lepsza. Nie zauważyłem tego w dokumentacji.

Answer 3

Jeśli ktoś chce jquery fullcalendar poprzedni cały dzień czerwony (lub inny) kolorowy, to jest kod.

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

Kod Regina Larsena pomaga mi to osiągnąć. Dzięki Regin Larsen.

Answer 4

Dlaczego nie używać atrybutu "data-data"?

$("#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

Dla tych, którzy chcą po prostu zmienić kolor ostatnich dat kierować .fc-past w swoim css i dodać obiekt background-color. Np ,:

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

Answer 7

Aby porównać pomocą parametru datę dla określonego dnia:

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

isSame pochodzi moment.js, który jest wykorzystywany przez fullcalendar: http://momentjs.com/docs/#/query/is-same/