web-dev-qa-db-de.com

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

Ich bleibe bei einem Projekt, das 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 mit dem Namen "data-date" gibt, aber ich habe keine Möglichkeit gefunden, es zu verwenden.

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 anzeigt, hat auch eine andere Farbe.

14
Dr. Gadget

Für die Ansichten month, basicWeek und basicDay können Sie die Darstellung der Tage ändern, indem Sie eine dayRender-Funktion bereitstellen. Z.B.:

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

Die Dokumentation zu dayRender finden Sie hier: http://arshaw.com/fullcalendar/docs/display/dayRender/

Und hier ist ein funktionierendes Beispiel für jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

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

Wenn Sie einfach nur die Farbe vergangener Daten ändern möchten, wählen Sie in Ihrer CSS-Adresse .fc-past aus und fügen Sie eine background-color-Eigenschaft hinzu. Z.B.,:

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

Warum nicht das Attribut "Datum-Datum" verwenden?

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

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

....
4

Wenn jemand den ganzen Tag den vollen Kalender rot (oder einen anderen) farbig abfragen möchte, 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 hilft mir dabei, dies zu erreichen. Vielen Dank Regin Larsen.

4
gmwraj

Wenn Sie mit externen Bibliotheken arbeiten, sollten Sie versuchen, nichts zu nutzen, was von der Bibliothek generiert wurde. Wenn in der nächsten Version die Funktionsweise der Bibliothek intern geändert wird, ist die Bibliothek zwar weiterhin abwärtskompatibel, der Code wird jedoch nicht mehr ausgeführt. Versuchen Sie daher, die Bibliotheks-API so oft wie möglich zu verwenden, anstatt Hacks auszuführen.

Bei der Beantwortung Ihrer Frage können Sie an allen Tagen, die nicht verfügbar sind, ein neues Ereignis hinzufügen. Dies kann durch Erstellen eines Ereignisobjekts und Ausführen eines renderEvent (.fullCalendar ('renderEvent', event [ stick])) durchgeführt werden. Weisen Sie beim Erstellen eines Ereignisobjekts die Hintergrundfarbe als die gewünschte Farbe zu, und legen Sie Farbe, Textfarbe und Rahmenfarbe auf dieselbe Hintergrundfarbe fest, wenn sie nicht sichtbar sein soll. 

Edit: Die Antwort von Regin Larsen scheint besser zu sein. Das habe ich in der Dokumentation nicht bemerkt.

1
TK Omble

So vergleichen Sie den Datumsparameter für einen bestimmten Tag:

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

isSame stammt aus moment.js, das von fullcalendar verwendet wird: http://momentjs.com/docs/#/query/is-same/

1
http203

getDate funktioniert nicht, denke ich, benutze den Moment. 

innenvar calendar = $('#calendar').fullCalendar({ ... }

dayRender: function (date, cell) {
        var today = moment('2018-06-22T00:00Z');
        if (date.isSame(today, "day")) {
            cell.css("background-color", "blue");
        }
    },
0
Reemi