Ändern Sie die Hintergrundfarbe des Tages in FullCalendar

Lesezeit: 2 Minuten

Andern Sie die Hintergrundfarbe des Tages in FullCalendar
Bishan

Ich benutze Vollständiger Kalender in meiner asp.net-Anwendung. Ich muss die ändern Tag Hintergrundfarbe.

Was ich bisher probiert habe:

dayRender: function (date, cell) {

    var today = new Date();
    var end = new Date();
    end.setDate(today.getDate()+7);

    if (date.getDate() === today.getDate()) {
        cell.css("background-color", "red");
    }

    var start = new Date();
    start.setDate(today.getDate()+1);


    while(start <= end){

      //alert(start + "\n" + tomorrow);
        if(start.getDate() == date.getDate()){
            cell.css("background-color", "yellow");
        }

       var newDate = start.setDate(start.getDate() + 1);
       start = new Date(newDate);
    }        
}

Dies ändert die Hintergrundfarbe ganzer Tage. Demo

Aber ich muss die Hintergrundfarbe der Tage ändern, 7 Tage ab dem aktuellen Datum.

Beispiel

Heute ist der 29. Juli 2013. Ich muss die Hintergrundfarbe der folgenden Tage ändern.

2013-July-30
2013-July-31
2013-August-01
2013-August-02
2013-August-03
2013-August-04
2013-August-05

Wie kann ich das machen ?

  • Haben Sie selbst etwas ausprobiert? Haben Sie nach einer Lösung gesucht?

    – putvande

    29. Juli 2013 um 9:18 Uhr

  • Verwenden Sie jqueryDatetimepicker

    – Amit

    29. Juli 2013 um 9:19 Uhr

  • @putvande Ja, ich habe es versucht dayRender Veranstaltung ein FullCalendar. immer noch versuchen, dies seit ein paar Stunden zu erreichen.

    – Bischan

    29. Juli 2013 um 9:20 Uhr


  • @AKA nein. Ich benutze Vollständiger Kalender

    – Bischan

    29. Juli 2013 um 9:21 Uhr

  • Ich habe meine Frage aktualisiert.

    – Bischan

    29. Juli 2013 um 10:07 Uhr


Sie können es so machen:

dayRender: function (date, cell) {

    var today = new Date();
    var end = new Date();
    end.setDate(today.getDate()+7);

    if (date.getDate() === today.getDate()) {
        cell.css("background-color", "red");
    }

    if(date > today && date <= end) {
        cell.css("background-color", "yellow");
    }

}   

http://jsfiddle.net/z8Jfx/7/

  • Ich habe eine weitere Frage zum Ändern der Hintergrundfarbe des Tages in FullCalendar. Ich bin Ihnen dankbar, wenn Sie mir dabei helfen können.

    – Bischan

    30. Juli 2013 um 9:17 Uhr

  • es gibt keine Funktion getDate() für date, es sollte stattdessen date.date() sein.

    – Mailand Maharjan

    26. Februar 2015 um 8:09 Uhr

dayRender : function(date, cell) {
                            var idx = null;
                            var today = new Date().toDateString();
                            var ddate = date.toDate().toDateString();

                            if (ddate == today) {
                                idx = cell.index() + 1;
                                cell.css("background-color", "azure");
                                $(
                                        ".fc-time-grid .fc-bg table tbody tr td:nth-child("
                                                + idx + ")").css(
                                        "background-color", "azure");

                            }

                        }

  • Willkommen bei Stapelüberlauf! Dieses Code-Snippet kann zwar die Frage lösen, inklusive Erklärung hilft wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für zukünftige Leser beantworten und diese Personen die Gründe für Ihren Codevorschlag möglicherweise nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erläuternden Kommentaren zu überladen, da dies die Lesbarkeit sowohl des Codes als auch der Erläuterungen verringert!

    – äh StackExchange

    15. Juli 2016 um 11:44 Uhr

  • @flob Wenn Sie die Ansichten agendaWeek und agendaDay verwenden, ändert diese auch den Hintergrund für sie. Dank diesem: “.fc-time-grid .fc-bg table tbody tr td:nth-child(” + idx + “)” Selektor. Deshalb verdient es ein Plus von mir.

    – Krzysztof Duszczyk

    28. Dezember 2016 um 13:08 Uhr

998300cookie-checkÄndern Sie die Hintergrundfarbe des Tages in FullCalendar

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy