Hi,
Ist es möglich Orte für Termine eine Farbauswahl einzubauen und den aktuellen Tag farbig darzustellen. Hier mal ein Skript wie ich es gelöst habe als Beispiel.
CSS
<style>
/* Hervorhebung für MRT-Events (bereits vorhanden) */
.samson_red { background-color: red !important; color: white !important; }
.samson_red .eventlink { color: white !important; }
.samson_red:hover, .samson_red:hover .eventlink { color: black !important; }
@media (prefers-color-scheme: dark) {
.samson_red:hover, .samson_red:hover .eventlink { color: darkblue !important; }
}
.dark .samson_red:hover, .dark .samson_red:hover .eventlink { color: darkblue !important; }
/* Heutiger Tag im Kalender → nur Zahl in kräftigem Lila */
.cal-today {
background: none !important; /* kein Hintergrund */
color: #ff00ff !important; /* kräftiges Lila */
font-weight: bold; /* fett */
}
</style>
<script>
(function () {
// ----- Helfer -----
function isOffMonth(el) {
if (!el) return false;
const cls = (el.className || "").toString();
return /off|other|muted|disabled|adjacent-month|prev-month|next-month/i.test(cls);
}
function parseDateFromString(s) {
if (!s) return null;
s = s.trim();
// YYYY-MM-DD
let m = s.match(/(\d{4})-(\d{1,2})-(\d{1,2})/);
if (m) return { year: +m[1], month: +m[2]-1, day: +m[3] };
// DD.MM.YYYY
m = s.match(/(\d{1,2})\.(\d{1,2})\.(\d{4})/);
if (m) return { year: +m[3], month: +m[2]-1, day: +m[1] };
// e.g. "September 12, 2025" or "12 September 2025"
m = s.match(/([A-Za-zÄÖÜäöü]+)\s+(\d{4})/);
if (m) {
// try to find day in string as well
const monthNames = {
"januar":0,"februar":1,"märz":2,"maerz":2,"april":3,"mai":4,"juni":5,
"juli":6,"august":7,"september":8,"oktober":9,"november":10,"dezember":11,
"January":0,"February":1,"March":2,"April":3,"May":4,"June":5,
"July":6,"August":7,"September":8,"October":9,"November":10,"December":11
};
// try to extract day
const dayMatch = s.match(/(\d{1,2})/);
const day = dayMatch ? +dayMatch[0] : null;
const monKey = m[1].toLowerCase();
const mon = monthNames[monKey];
if (typeof mon === "number" && day) return { year: +m[2], month: mon, day: day };
}
return null;
}
function daysInMonth(year, month) {
return new Date(year, month+1, 0).getDate();
}
// ----- Markierungslogik für heute -----
function markTodayInCalendar() {
// clear old marks
document.querySelectorAll(".cal-today").forEach(el => el.classList.remove("cal-today"));
const today = new Date();
const tDay = today.getDate();
const tMonth = today.getMonth();
const tYear = today.getFullYear();
// Header: <b>September 2025</b>
const header = document.querySelector("b");
if (!header) return;
const headerText = header.textContent.trim(); // "September 2025"
const parts = headerText.split(/\s+/);
if (parts.length < 2) return;
const monthName = parts.slice(0, parts.length-1).join(" ");
const yearStr = parts[parts.length-1];
const displayedYear = parseInt(yearStr, 10);
const monthMap = {
"Januar":0,"Februar":1,"März":2,"April":3,"Mai":4,"Juni":5,
"Juli":6,"August":7,"September":8,"Oktober":9,"November":10,"Dezember":11,
// English variants (if necessary)
"January":0,"February":1,"March":2,"April":3,"May":4,"June":5,
"July":6,"August":7,"September":8,"October":9,"November":10,"December":11
};
const displayedMonth = monthMap[monthName];
if (typeof displayedMonth !== "number") return;
// Nur markieren, wenn Header-Monat == aktueller Monat/Jahr
if (displayedMonth !== tMonth || displayedYear !== tYear) return;
// 1) Direktes Erkennen per data-date / aria-label / title
const selectorCandidates = Array.from(document.querySelectorAll('[data-date], [data-day], [aria-label], [title], td, div'));
for (const el of selectorCandidates) {
// skip invisible elements
if (!el.offsetParent) continue;
// check data-date
const dd = el.getAttribute('data-date') || el.getAttribute('data-date-iso') || el.getAttribute('data-date-full');
if (dd) {
const parsed = parseDateFromString(dd);
if (parsed && parsed.day === tDay && parsed.month === tMonth && parsed.year === tYear) { el.classList.add('cal-today'); return; }
}
// check aria-label or title
const al = el.getAttribute('aria-label') || el.getAttribute('title');
if (al) {
const parsed = parseDateFromString(al);
if (parsed && parsed.day === tDay && parsed.month === tMonth && parsed.year === tYear) { el.classList.add('cal-today'); return; }
}
// check data-day + data-month/year
const dday = el.getAttribute('data-day');
if (dday) {
const dmonth = el.getAttribute('data-month');
const dyear = el.getAttribute('data-year');
if (dmonth !== null && dyear !== null) {
if (+dday === tDay && +dmonth === tMonth && +dyear === tYear) { el.classList.add('cal-today'); return; }
}
}
}
// 2) Fallback: mapping based on grid detection
// collect visible numeric cells
const allCells = Array.from(document.querySelectorAll('td, div')).filter(el => el.offsetParent && /^\s*\d{1,2}\s*(?:$|\n|[^\d])/.test((el.textContent||"").trim()));
if (!allCells.length) return;
// try to find candidate indices where cell text == "1" and cell not offMonth
const numeric = allCells.map(el => ({ el, n: parseInt((el.textContent||"").trim(),10) || 0, off: isOffMonth(el) }));
const candidates = numeric.reduce((acc, item, idx) => {
if (item.n === 1 && !item.off) acc.push(idx);
return acc;
}, []);
const dim = daysInMonth(displayedYear, displayedMonth);
let found = false;
for (const startIdx of candidates) {
// validate small run: check that next few cells increment 1,2,3...
let valid = true;
for (let k=0; k<Math.min(4, dim); k++) {
const idx = startIdx + k;
if (idx >= numeric.length) { valid = false; break; }
if (numeric[idx].n !== (k+1)) { valid = false; break; }
}
if (!valid) continue;
const targetIdx = startIdx + (tDay - 1);
if (targetIdx < numeric.length) {
const targetCell = numeric[targetIdx].el;
if (!isOffMonth(targetCell)) {
targetCell.classList.add('cal-today');
found = true;
break;
}
}
}
// 3) letzter Versuch: direkte match by text but ensure element is not marked as off-month and is inside calendar-range
if (!found) {
for (const item of numeric) {
if (item.n === tDay && !item.off) {
// sanity: ensure this element is in same row-group as other month-days (heuristic)
item.el.classList.add('cal-today');
found = true;
break;
}
}
}
// fertig (falls nicht gefunden: nichts markieren)
}
// ----- MRT-Event Hervorhebung (dein bestehendes) -----
function bimboHolen() {
const events = document.querySelectorAll(".withevent");
events.forEach((event, index) => {
const link = event.querySelector("a");
if (!link) return;
const title = link.title || "";
if (title.includes("MRT Rosenheim") || title.includes("MRT-Rosenheim")) {
if (!event.classList.contains("samson_red")) event.classList.add("samson_red");
}
});
// dann Kalender markieren
markTodayInCalendar();
}
// MutationObserver: kalenderupdates & DOM-Änderungen
const observer = new MutationObserver(() => {
// etwas debounce, damit bei vielen Änderungen nicht zu oft ausgeführt wird
clearTimeout(window.__calMarkTimeout);
window.__calMarkTimeout = setTimeout(() => { bimboHolen(); }, 120);
});
observer.observe(document.body, { childList: true, subtree: true });
// initial
document.addEventListener("DOMContentLoaded", bimboHolen);
// falls du manuell triggern willst:
window.markCalendarToday = markTodayInCalendar;
})();
</script>
Alles anzeigen