Vollkalender: Ändern Sie die Farbe für bestimmte Tage

Question

Ich bin mit einem Projekt fest, die ich bei der Arbeit bekomme. Ich muss die Hintergrundfarbe einiger Tage ändern. Es ist ein Kalender, in dem der Benutzer sehen sollte, welche Tage verfügbar sind und welche nicht. Ich habe herausgefunden, dass es ein Attribut namens "data-date" gibt, aber ich habe keine Möglichkeit gefunden es zu benutzen.

Gibt es eine Möglichkeit, den Hintergrund bestimmter Tage zu manipulieren?

Ich denke, es muss einen Weg geben, denn die Zelle, die das aktuelle Datum zeigt, hat auch eine andere Farbe.

Answer 1

Für die Ansichten month, und basicDay können Sie die Wiedergabe der Tage ändern, indem Sie eine dayRender Funktion. ZB:

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

Die Dokumentation für dayRender hier verfügbar ist: http://arshaw.com/fullcalendar/docs/display/dayRender/

Und hier ist ein funktionierendes Beispiel auf jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

Answer 2

Wenn mit externen Bibliotheken arbeiten, sollten Sie nicht versuchen, den Vorteil von etwas zu nehmen Das wurde von der Bibliothek generiert. Da sie in der nächsten Version die Funktionsweise der Bibliothek intern ändern, ist die Bibliothek weiterhin abwärtskompatibel, aber Ihr Code funktioniert nicht mehr. Versuchen Sie also, die Bibliotheks-API so weit wie möglich zu verwenden, anstatt Hacks zu machen.

Beantworten Sie Ihre Frage, eine Möglichkeit ist, ein neues Ereignis zu allen Tagen hinzuzufügen, die nicht verfügbar sind. Dies kann durch Erstellen eines Ereignisobjekts und Ausführen eines renderEvent (.fullCalendar ('renderEvent', event [, stick])) erfolgen. Beim Erstellen eines Ereignisobjekts weisen Sie die Hintergrundfarbe der gewünschten Farbe zu und legen die Farbe, die Textfarbe und die Rahmenfarbe auf den gleichen Wert wie den Hintergrund fest, wenn sie nicht sichtbar sein sollen.

Bearbeiten: Regin Larsen Antwort scheint besser. Das habe ich in der Dokumentation nicht bemerkt.

Answer 3

Wenn jemand den ganzen Tag den ganzen Tag rot (oder anders) färben möchte, dann ist dies der Code.

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

Regin Larsen Code mir helfen, dies zu erreichen. Danke Regin Larsen.

Answer 4

Warum nicht das Attribut "date-date" verwenden?

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

Denn Ziel .fc-past in Ihrem css diejenigen, die einfach die Farbe der Vergangenheit ändern Sie die Daten und fügen Sie eine background-color Eigenschaft. ZB ,:

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

Answer 7

Um mit dem Datum Parameter für einen bestimmten Tag zu vergleichen:

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

Issame von moment.js kommen, die von fullcalendar verwendet wird: http://momentjs.com/docs/#/query/is-same/