Zeiten Kalender Farbe ändern

Aushilfsarnie

Hallo zusammen,

ich habe schon einige Farben im Kalender via UserChrome angepasst. Leider kann ich die Uhrzeiten und die Tagesdaten nicht ansprechen...kann mir jemand helfen?

Vielen Dank im Voraus!

Viele Grüße

edvoldi

Hallo Aushilfsarnie und willkommen im Forum.

teste einmal das:

CSS

/*   weitere Tage in der Tagesansicht   */
    #day-view calendar-header-container[relation="future"],  
    #day-view .calendar-event-column-linebox[relation="future"] {
    background: #eeeeee !important; 
    }
    
/*   ---------------------------------------------------------   */

/*   Markierter Tag in der Wochenansicht   */
    #week-view calendar-header-container[relation="past"][selected="true"],
    #week-view .calendar-event-column-linebox[relation="past"][selected="true"],
    #week-view calendar-header-container[relation="future"][selected="true"],
    #week-view .calendar-event-column-linebox[relation="future"][selected="true"] { 
    background: #fffcd8 !important; 
    }

/*   ---------------------------------------------------------   */

/*   Tage in der Wochenansicht   */
    #week-view calendar-header-container[relation="past"],
    #week-view .calendar-event-column-linebox[relation="past"],
    #week-view calendar-header-container[relation="future"],
    #week-view .calendar-event-column-linebox[relation="future"] { 
    background: #eeeeee !important; 
    }

/*   ---------------------------------------------------------   */

/*   Wochenende   */
    #day-view calendar-header-container[weekend="true"],  
    #day-view .calendar-event-column-linebox[weekend="true"] {
    background: #f7ffe3 !important; 
    }
    #week-view calendar-header-container[weekend="true"],
    #week-view .calendar-event-column-linebox[weekend="true"] { 
    background: #f7ffe3 !important; 
    }

/*   ---------------------------------------------------------   */

/*   Aktueller Tag in der Tagesansicht   */
    .calendar-day-label-name[relation="today1day"] {
    color: red !important;
    font-weight: bold !important;   
    }
    #day-view calendar-header-container[relation="today1day"],  
    #day-view .calendar-event-column-linebox[relation="today1day"] {
    background: silver !important; 
    }
    
/*   ---------------------------------------------------------   */

/*   Aktueller Tag in der Wochenansicht   */
    .calendar-day-label-name[relation="today"] {
    color: red !important;
    font-weight: bold !important;   
    }
    #week-view calendar-header-container[relation="today"],
    #week-view .calendar-event-column-linebox[relation="today"] { 
    background: silver !important; 
    }

/*   ---------------------------------------------------------   */
    
/*   Letzter und kommender Monat in mehrwöchiger und Monatsansicht   */ 
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"],
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"],    
    .calendar-month-day-box-other-month[relation="past"],
    .calendar-month-day-box-other-month[relation="future"]    {
    background: #ffffff !important;
    }
    
/*   ---------------------------------------------------------   */
    
/*   Resttage in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-date-label,
    .calendar-month-day-box-current-month {
    background: #eeeeee !important; 
    }
    
/*   ---------------------------------------------------------   */
    
/*   Wochenede in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-day-off.calendar-month-day-box-current-month,
    .calendar-month-day-box-date-label[weekend="true"] {
    background: #f7ffe3 !important; 
    }
    
/*   ---------------------------------------------------------   */
    
/*   Aktueller Tag in mehrwöchiger und Monatsansicht   */ 
    .calendar-month-day-box-date-label[relation="today"] {
    color: red !important;
    font-weight: bold !important;   
    }
    .calendar-month-day-box-current-month[relation="today"],
    .calendar-month-day-box-day-off[relation="today"],
    .calendar-month-day-box-other-month[relation="today"] {
    border: 3px solid red !important; 
    }

    .calendar-month-day-box-current-month[relation="today"],
    .calendar-month-day-box-day-off[relation="today"],
    .calendar-month-day-box-other-month[relation="today"],
    .calendar-month-day-box-date-label[relation="today"] {
    background: silver !important; 
    }
    
/*   ---------------------------------------------------------   */

/*   Markierter Tag in mehrwöchiger und Monatsansicht   */
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="past"][selected="true"],
    .calendar-month-day-box-other-month .calendar-month-day-box-date-label[relation="future"][selected="true"],
    .calendar-month-day-box-other-month[relation="past"][selected="true"],
    .calendar-month-day-box-other-month[relation="future"][selected="true"],
    .calendar-month-day-box-current-month[relation="past"][selected="true"],
    .calendar-month-day-box-current-month[relation="future"][selected="true"] {
    background: #fffcd8 !important; 
    }
    
/*   ---------------------------------------------------------   */

Alles anzeigen

Zitat von Aushilfsarnie

Leider kann ich die Uhrzeiten

Hier weiß ich nicht was Du meinst, ein Bildschirmfoto ist immer hilfreich.

Gruß
EDV-Oldi

Aushilfsarnie

Die markierten Zeiten würde ich gerne ändern...vielen Dank!

edvoldi

Für den Mini Kalender

CSS

/*   Minikalender - Aufgaben - Kalenderliste   */
/*    KW per Symbol     */

    #ltnSidebar,
    #calMinimonth {
    background: linear-gradient(#c8c8c8, #f2f2f2) !important;
    }

    .minimonth-month-box {
    background: #c8c8c8!important;
    }
    .minimonth-row-header-week {    
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAABVUlEQVQokU3RPUiVYRjG8V8ULQ1B4RS0HASh1nDIuaWhhk6Eg0MiUUNrDQ4FEbgEQiY6HgQbTpCIcsqvzkdW2tvxoO9R+4C08Ci26BJE+jY8L+mzXfd1Pf+b+77xImK4HXh8mtIchQl6rlJeI9+KI7y8S6VB/mbIDl3izTrKW8zcCsV6xEKD55mg44RKZwAszLCasPgqeOVB5l+j2GC0g9Ik1W06T/n/PsxTHcRRPv5m+inLa8F7v070CMWf1H5R3yP+wZNDgHI3tYiBNuIGD1qo79N3gS8Js9kU8PkvhXNUv/Nu/ACQO09tj7c5FsdCLdqg0M/qH/ItKG4y1RXMuduBPHIj6PEmlrZZTpi9n47Vz0pCvJV2qewyfScVx6h+Y2WHqTPkThB/4mvCyMUQmbgcmpTy6Z+HV+jOhE3DQIZn7WTPpqdtpe8a2eMhc+8kvdfpbYZ/IN+Cfrl5ZsUAAAAASUVORK5CYII=") no-repeat !important;
    background-position:3px 5px!important;
    }
    .minimonth-week {
    background: #dcdcdc !important;
    color: blue !important;
    font-weight: bold !important; 
    }
    
/*   ---------------------------------------------------------   */

Alles anzeigen

edvoldi

Mit den Uhrzeiten habe ich auch so meine Probleme, da habe ich den Code noch nicht gefunden.
Die Datumszeile sollte in meinem ersten Code mit drin sein.

Gruß
EDV-Oldi

Thomas S.

Hallo edvoldi , vielen Dank für die Codeschnipsel, die mir geholfen haben.

Zitat von edvoldi

Mit den Uhrzeiten habe ich auch so meine Probleme, da habe ich den Code noch nicht gefunden.

Falls das noch zutrifft, hier mein Code (alle Variablen enthalten Farbwerte). Ganz unten sind zwei einfache Bezeichner für die Uhrzeiten.

CSS

/* Variable (Farben)  */
:root {

/* Kalender */
    --HighlightBorderColor: red;
    --DayTodayBackground: lightgrey;
    --DayTodayBorderColor: red;
    --DaySelectedBackground: #f6f6f6;
    --DaySelectedBorderColor: grey;
    --DaySelectedTodayBackground: lightgrey;
    --DaySelectedTodayBorderColor: red;
    --KWBackground: #dcdcdc;
}


/* Anpassungen Kalenderübersicht  */

/* Farbe Text */
.minimonth-day {
    color: black !important;
}
.minimonth-day[othermonth="true"] {
    color: gray !important;
}

/* Hover Rahmenfarbe */
.minimonth-day:hover[interactive] {
    cursor: pointer;
    border: 1px solid var(--HighlightBorderColor) !important;
}

/* aktueller Tag */
.minimonth-day[today="true"] {
    background-color: var(--DayTodayBackground) !important;
    border: 1px solid var(--DayTodayBorderColor) !important;
}
/* aktueller Tag selektiert */
.minimonth-day[selected="true"][today="true"] {
    background-color: var(--DaySelectedTodayBackground) !important;
    border: 1px solid var(--DaySelectedTodayBorderColor) !important;
}
/* Tag selektiert */
.minimonth-day[selected="true"] {
    background-color: var(--DaySelectedBackground) !important;
    border: 1px solid var(--DaySelectedBorderColor) !important;
}

/* Spaltenüberschrift Kalenderwoche per Grafiksymbol*/
.minimonth-row-header-week {
    background: var(--KWBackground) url("./icons/KW.png") !important;
    background-position: 1px 1px !important;
}

/* Spalte Kalenderwoche */
.minimonth-week {
    background: var(--KWBackground) !important;
    color: black !important;
    border: 1px solid  var(--KWBackground) !important;
    /* font-weight: bold !important;   */
}

/* Zeitspalte im Hauptkalender */
.calendar-time-bar-box-even {
    color: black !important;
}
.calendar-time-bar-box-odd {
    color: black !important;
}

Alles anzeigen

edvoldi

Hallo Thomas S.

Zitat von Thomas S.

Ganz unten sind zwei einfache Bezeichner für die Uhrzeiten.

danach habe ich lange gesucht, vielleicht funktioniert das erst an TB68, keine Ahnung.

Ich habe den Code direkt für mich angepasst und auch einen Farbunterschied zwischen dem ausgewähltten Zeitraum und dem Freien Zeitraum eingebunden.

CSS

/* Zeitspalte im Hauptkalender */
    .calendar-time-bar-box-even[off-time="true"],
    .calendar-time-bar-box-odd[off-time="true"]{
    background: yellow !important;
    color: red !important; }
    
    .calendar-time-bar-box-even,
    .calendar-time-bar-box-odd {
    border: 1px solid #c0c0c0;
    width: 30em; }

    .calendar-time-bar-box-even,
    .calendar-time-bar-box-odd {
    background: #E5E5E5 !important;
    color: black !important; }
    
    .calendar-time-bar-box-even,
    .calendar-time-bar-box-odd {
    border: 1px solid #c0c0c0;
    width: 30em; }
/* Zeitspalte im Hauptkalender Ende */

Alles anzeigen

Gruß
EDV-Oldi

Zeiten Kalender Farbe ändern

edvoldi 11. Januar 2019 um 15:10

Community-Bot 3. September 2024 um 20:40

Thunderbird 138.0 veröffentlicht

Thunderbird 128.10.0 ESR veröffentlicht