CSS Bastelecke 1.3 Termine

Zurück zur Übersicht

Die Anzeige von Terminen und Aufgaben im Kalenderblatt kann auf der Grundlage verschiedener Eigenschaften angepasst werden, im Folgenden veranschaulicht anhand der Hintergrundfarbe.

Mit folgenden Selektoren kann gebastelt werden, falls das Ergebnis nicht gleich wie gewünscht aussieht:

.calendar-event-box-container
.calendar-item
calendar-event-box
calendar-month-day-box-item

Kalendername

Anpassen der Anzeige abhängig vom Kalender, dem ein Eintrag angehört:

.calendar-event-box-container[calendar="privat"] {
    background-color: yellow !important;
}

Unabhängig vom tatsächlichen Namen (z.B. “Privat”) muss der Kalendername in der userChrome.css in Kleinbuchstaben (im obigen Beispiel: “privat”) geschrieben werden.

Leerzeichen in Kalendernamen werden beibehalten, “Mein Kalender” würde also zu “mein kalender”.

Kategorie

Anpassen der Anzeige, wenn für ein Termin oder eine Aufgabe einer Kategorie zugeordnet ist:

.calendar-event-box-container[categories~="anrufe"] {
    background-color: red !important;
}

Möglicherweise stört dann die kleine Standard-Box für die Kategoriefarbe, sodass die ausgeblendet werden soll:

calendar-category-box[categories~="anrufe"]{
   display: none !important;
}

Unabhängig vom tatsächlichen Kategorienamen (z.B. “Anrufe”) muss die Kategorie in der userChrome.css in Kleinbuchstaben (im obigen Beispiel: “anrufe”) geschrieben werden.

Status

Status: Benötigt Eingriff

Anpassen der Anzeige von Aufgaben, deren Status “Benötigt Eingriff” ist:

.calendar-event-box-container[status="NEEDS-ACTION"] {
    color: red !important;
}

Status: In Arbeit

Anpassen der Anzeige von Aufgaben, deren Status “In Arbeit” ist:

.calendar-event-box-container[status="IN-PROCESS"] {
    color: red !important;
}

Status: Abgebrochen

Anpassen der Anzeige von Aufgaben, deren Status “Abgebrochen” ist:

.calendar-event-box-container[status="CANCELLED"] {
    color: red !important;
}

Priorität

Priorität: Niedrig

Anpassen der Anzeige, wenn einem Termin oder einer Aufgabe eine niedrige (“low”) Priorität zugewiesen ist:

.calendar-event-box-container[priority="low"] {
    background-color: red !important;
}

Priorität: Hoch

Anpassen der Anzeige, wenn einem Termin oder einer Aufgabe eine hohe (“high”) Priorität zugewiesen ist:

.calendar-event-box-container[priority="high"] {
    background-color: red !important;
}

Ganztägig

Anpassen der Anzeige von ganztägigen Terminen:

.calendar-event-box-container[allday] {
    background-color: yellow !important;
}

Erinnerung

Anpassen der Anzeige von Einträgen, für die eine Erinnerung eingerichtet wurde:

.calendar-event-box-container[alarm] {
    background-color: yellow !important;
}

Schreibgeschützt

Anpassen der Anzeige von Einträgen, die einem schreibgeschützten Kalender angehören:

.calendar-event-box-container[readonly] {
    background-color: yellow !important;
}

Überfällige Aufgabe

Anpassen der Anzeige von Aufgaben, die überfällig sind:

.calendar-event-box-container[progress="overdue"] {
    background-color: red !important;
}