TB 102 - Hintergrundfarbe im Header der Tagesansicht und der Wochenansicht des Kalenders ändern

Nachdem mein Thread mit der Timeline erledigt ist, habe ich ein weiteres optisches Problem mit dem Kalender und erstelle dazu einen neuen Thread. Ich habe bisher den Header des aktuellen Tages in der Tagesansicht, in der Wochenensicht, in der Monatsansicht und in der Mehrwochenansicht rosa gefärbt mit folgendem Code:

#day-view calendar-day-label[relation="today1day"],
#week-view calendar-day-label[relation="today"],
#multiweek-view calendar-day-label[relation="today"],
#month-view calendar-day-label[relation="today"]{
    background-color: #FFC0C0 !important;
}

Im Monatskalender und im Mehrwochenkalender sind die Header des aktuellen Tages weiterhin rosa, nicht aber im Tageskalender und im Wochenkalender. In diesen beiden Kalendern funktioniert in TB 102 offensichtlich der Code calendar-day label nicht mehr. Laut den Entwicklerwerkzeugen ist der Selektor nun .day-column-heading. Wenn ich diesen Selektor eintrage, werden aber alle Wochentage rosa, nicht nur der aktuelle Tag.

Ich habe schon vieles probiert, vergebens. Ich weiß nicht, mit welchem Code man bei dem jetzt gültigen Selektor den aktuellen Tag auswählt.

Hallo dharkness21,

Dein Code in Zeile 9 bewirkt, daß der Header im Tageskalender bei allen Tagen, nicht nur im aktuellen Tag, rosa ist. Soweit war ich auch schon. Das gleiche gilt für den Code in Zeile 1-4 zum Wochenkalender.

Im Tageskalender habe ich die gewünschte Farbe für den aktuellen Tag hinbekommen, indem ich vor .day-column-heading eingefügt habe .day-column-today. Damit ist der Tageskalender nun wie gewünscht.

Mit dem Code in Zeile 5-8 kann ich die Farbe des Headers im Wochenkalender nicht für den aktuellen Tag, sondern für den jeweils ausgewählten Tag bestimmen. Ist aber interessant, von der Existenz der Codes .day-column-selected und .day-column-today Kenntnis erlangt zu haben.

Der Code in Zeile 10 bewirkt, daß der Header im Wochenkalender nur für den aktuellen Tag rosa ist. Insoweit hat es geklappt. Was mich hier aber wundert, ist das Leerzeichen vor .day-column-heading. In meinem vorherigen Thread vom heutigen Tag mußte ich mich von Dir belehren lassen, daß zwischen zwei Klassen-Selektoren vor dem Punkt kein Leerzeichen gesetzt werden darf. Hier muß es gesetzt werden. Wenn ich es entferne, funktioniert der Code nicht.

Mit dem Code in Zeile 14-17 gibt es keinen Unterschied zum vorherigen Code. Der Unterschied besteht in .day-column-selected. Das bewirkt aber nichts.

Das Problem mit der Farbe des Headers ist damit erledigt. Zum Wochenkalender habe ich aber noch nicht alle Farbprobleme gelöst. Dazu werde ich micht in den nächsten Tagen nochmals melden.

Ich habe lediglich die nicht mehr funktionierende Erweiterung CalendarTweaks mit css nachgebaut. Bisher hat das mit css hingehauen. Nun sind seit TB 102 einige Anpassungen erforderlich. Bis auf einen Punkt im Wochenkalender ist jetzt alles wie bisher.

Im Wochenkalender soll die Spalte im aktuellen Tag rosa sein, wenn dieser Tag nicht ausgewählt ist, Wenn man den Wochenkalender aufruft, ist die Spalte des aktuellen Tages gelb (so bei mir). Klickt man in eine andere Spalte (einen andren Tag), dann soll die somit nicht ausgewählte Spalte des aktuellen Tages rosa sein. Das soll auch für das Feld unter dem Header des aktuellen Tages so sein. Dazu mein bisheriger Code:

#week-view .calendar-event-column-header[relation="today"]:Not([selected="true"]),
#week-view .calendar-event-column-linebox[relation="today"]:Not([off-time="true"]):Not([selected="true"]) {
   background-color: #FFF0F0 !important; 
}
#week-view .calendar-event-column-linebox[relation="today"][off-time="true"]:Not([selected="true"]) {
   background-color: #F5E6E6 !important;
}

Mein Problem besteht darin, daß ich nicht weiß, mit welchem Code ein nicht ausgewähltes Element angesprochen wird. So wie bisher geht es in TB 102 nicht.

Bis auf dieses noch verbliebene Problem konnte ich mit Deiner Hilfe meinen Kalender so gestalten, wie ich es gewohnt bin. Dafür einstweilen vielen Dank.

Zitat von bananovic

Mein Problem besteht darin, daß ich nicht weiß, mit welchem Code ein nicht ausgewähltes Element angesprochen wird. So wie bisher geht es in TB 102 nicht.

Jetz habe ich es hinbekommen

/* TB 102: Die einzelnen Zeilen im heutigen Tag, wenn nicht ausgewählt, im Wochenkalender mit 
verschiedenen Rosatönen für Tagesansicht und Nachtansicht */
#week-view .day-column-today:not(.day-column-selected) .allday-events-list,
#week-view .day-column-today:not(.day-column-selected) .multiday-hour-box {
   background-color: #FFF0F0 !important;
}
#week-view .day-column-today:not(.day-column-selected) .multiday-hour-box-off-time {
   background-color: #F5E6E6 !important;
}