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
Zeiten Kalender Farbe ändern
-
- 60.*
- Windows
- Aushilfsarnie
- Thread is Unresolved
-
edvoldi
Approved the thread. -
Hallo Aushilfsarnie und willkommen im Forum.
teste einmal das:
CSS
Display More/* 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; } /* --------------------------------------------------------- */Leider kann ich die Uhrzeiten
Hier weiß ich nicht was Du meinst, ein Bildschirmfoto ist immer hilfreich.
Gruß
EDV-Oldi -
Die markierten Zeiten würde ich gerne ändern...vielen Dank!
-
Für den Mini Kalender
CSS
Display More/* 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; } /* --------------------------------------------------------- */ -
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 -
Hallo edvoldi , vielen Dank für die Codeschnipsel, die mir geholfen haben.
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
Display More/* 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; } -
Hallo 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
Display More/* 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 */
Gruß
EDV-Oldi
