Zeiten Kalender Farbe ändern

Aushilfsarnie · January 11, 2019 at 3:07 PM

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 · January 11, 2019 at 3:16 PM

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; 
    }
    
/*   ---------------------------------------------------------   */

Display More

Quote from Aushilfsarnie

Leider kann ich die Uhrzeiten

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

Gruß
EDV-Oldi

Aushilfsarnie · January 11, 2019 at 4:14 PM

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

edvoldi · January 11, 2019 at 5:25 PM

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; 
    }
    
/*   ---------------------------------------------------------   */

Display More

edvoldi · January 11, 2019 at 5:29 PM

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. · October 11, 2019 at 12:32 PM

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

Quote from 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;
}

Display More

edvoldi · October 11, 2019 at 2:08 PM

Hallo Thomas S.

Quote from 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 */

Display More

Gruß
EDV-Oldi

Zeiten Kalender Farbe ändern

edvoldi January 11, 2019 at 3:10 PM

Thunderbird 115.5.1 veröffentlicht