tdoh image, calendar improvements, minor changes to a few articles
This commit is contained in:
Marek Krug
parent
2178fe4504
commit
03af7ae63a
12 changed files with 358 additions and 72 deletions
|
|
@ -22,7 +22,7 @@ menu:
|
|||
}
|
||||
#event-panel {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
min-width: 30%;
|
||||
background-color: var(--color-bg-secondary);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -48,38 +48,62 @@ menu:
|
|||
border-collapse: collapse;
|
||||
}
|
||||
#calendar-table th, #calendar-table td {
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
height: 60px;
|
||||
width: 14.28%;
|
||||
}
|
||||
#calendar-table th {
|
||||
background-color: var(--color-bg-secondary);
|
||||
height: 50px;
|
||||
width: 15%;
|
||||
}
|
||||
#calendar-table th
|
||||
#calendar-table td {
|
||||
background-color: var(--color-bg-primary);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
#calendar-table td:hover {
|
||||
background-color: var(--color-bg-hover);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.event-dot {
|
||||
.event-dot-greenyellow {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: greenyellow;
|
||||
background-color: #9acd32;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 5px auto 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.event-dot-orange {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: #ffa500;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 5px auto 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.event-dot-red {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: #ff4500;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 5px auto 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.has-event {
|
||||
background-color: var(--color-bg-secondary) !important;
|
||||
|
||||
}
|
||||
.selected-day {
|
||||
background-color: var(--color-bg-hover) !important;
|
||||
font-weight: bold;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 5px solid grey;
|
||||
font-weight: lighter;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
#event-date {
|
||||
font-size: 1.2em;
|
||||
|
|
@ -153,14 +177,22 @@ menu:
|
|||
if (colonIndex > -1) {
|
||||
let key = line.substring(0, colonIndex);
|
||||
let value = line.substring(colonIndex + 1);
|
||||
if (key.startsWith("DTSTART")) {
|
||||
|
||||
// Handle properties with parameters (like TZID)
|
||||
const baseKey = key.split(";")[0];
|
||||
|
||||
if (baseKey === "DTSTART") {
|
||||
event.start = value;
|
||||
} else if (key.startsWith("DTEND")) {
|
||||
event.startParams = key.includes(";") ? key.substring(key.indexOf(";") + 1) : null;
|
||||
} else if (baseKey === "DTEND") {
|
||||
event.end = value;
|
||||
} else if (key.startsWith("SUMMARY")) {
|
||||
event.endParams = key.includes(";") ? key.substring(key.indexOf(";") + 1) : null;
|
||||
} else if (baseKey === "SUMMARY") {
|
||||
event.summary = value;
|
||||
} else if (key.startsWith("DESCRIPTION")) {
|
||||
} else if (baseKey === "DESCRIPTION") {
|
||||
event.description = value;
|
||||
} else if (baseKey === "RRULE") {
|
||||
event.rrule = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -170,13 +202,18 @@ menu:
|
|||
|
||||
// Hilfsfunktion: Parst einen ICS-Datum-String ins Format "YYYY-MM-DD"
|
||||
function parseDateString(icsDateStr) {
|
||||
// Erwartet entweder ganztägige Daten (YYYYMMDD) oder Datum+Zeit (YYYYMMDDTHHmmssZ)
|
||||
// Handle different date formats
|
||||
if (!icsDateStr) return null;
|
||||
|
||||
// For basic date format: YYYYMMDD
|
||||
if (icsDateStr.length === 8) {
|
||||
let year = icsDateStr.substring(0, 4);
|
||||
let month = icsDateStr.substring(4, 6);
|
||||
let day = icsDateStr.substring(6, 8);
|
||||
return `${year}-${month}-${day}`;
|
||||
} else if (icsDateStr.length >= 15) {
|
||||
}
|
||||
// For datetime formats: YYYYMMDDTHHmmssZ or YYYYMMDDTHHmmss
|
||||
else if (icsDateStr.includes("T")) {
|
||||
let year = icsDateStr.substring(0, 4);
|
||||
let month = icsDateStr.substring(4, 6);
|
||||
let day = icsDateStr.substring(6, 8);
|
||||
|
|
@ -185,6 +222,114 @@ menu:
|
|||
return null;
|
||||
}
|
||||
|
||||
// Extract date components from different date formats
|
||||
function getDateComponents(icsDateStr) {
|
||||
if (!icsDateStr) return null;
|
||||
|
||||
// Basic handling - extract YYYY, MM, DD regardless of format
|
||||
const year = parseInt(icsDateStr.substring(0, 4));
|
||||
const month = parseInt(icsDateStr.substring(4, 6)) - 1; // 0-based months
|
||||
const day = parseInt(icsDateStr.substring(6, 8));
|
||||
|
||||
return { year, month, day };
|
||||
}
|
||||
|
||||
function expandRecurringEvents(event, year, month) {
|
||||
if (!event.rrule) return [event];
|
||||
|
||||
const rruleStr = event.rrule;
|
||||
|
||||
// Get start date components
|
||||
const startComponents = getDateComponents(event.start);
|
||||
if (!startComponents) return [event];
|
||||
|
||||
const startDate = new Date(
|
||||
startComponents.year,
|
||||
startComponents.month,
|
||||
startComponents.day
|
||||
);
|
||||
|
||||
const rangeStart = new Date(year, month, 1);
|
||||
const rangeEnd = new Date(year, month + 1, 0);
|
||||
const expandedEvents = [];
|
||||
|
||||
if (rruleStr.includes("FREQ=WEEKLY") && rruleStr.includes("BYDAY")) {
|
||||
const bydayMatch = rruleStr.match(/BYDAY=([^;]+)/);
|
||||
if (bydayMatch) {
|
||||
const dayCode = bydayMatch[1];
|
||||
const dayMap = {
|
||||
'MO': 1, 'TU': 2, 'WE': 3, 'TH': 4, 'FR': 5, 'SA': 6, 'SU': 0
|
||||
};
|
||||
const targetDay = dayMap[dayCode];
|
||||
|
||||
if (targetDay !== undefined) {
|
||||
// Create events for each matching day in the month
|
||||
let day = 1;
|
||||
while (day <= rangeEnd.getDate()) {
|
||||
const testDate = new Date(year, month, day);
|
||||
if (testDate.getDay() === targetDay && testDate >= startDate) {
|
||||
const newEvent = {...event};
|
||||
const eventDate = formatDateForICS(testDate);
|
||||
|
||||
// Preserve time portion from original event
|
||||
const timePart = event.start.includes('T') ?
|
||||
event.start.substring(event.start.indexOf('T')) : '';
|
||||
const endTimePart = event.end.includes('T') ?
|
||||
event.end.substring(event.end.indexOf('T')) : '';
|
||||
|
||||
newEvent.start = eventDate + timePart;
|
||||
newEvent.end = eventDate + endTimePart;
|
||||
expandedEvents.push(newEvent);
|
||||
}
|
||||
day++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (rruleStr.includes("FREQ=MONTHLY") && rruleStr.includes("BYDAY")) {
|
||||
const bydayMatch = rruleStr.match(/BYDAY=([^;]+)/);
|
||||
if (bydayMatch) {
|
||||
const bydays = bydayMatch[1].split(',');
|
||||
const dayMap = {
|
||||
'MO': 1, 'TU': 2, 'WE': 3, 'TH': 4, 'FR': 5, 'SA': 6, 'SU': 0
|
||||
};
|
||||
|
||||
bydays.forEach(byday => {
|
||||
const occurrence = parseInt(byday) || 1;
|
||||
const dayCode = byday.slice(-2);
|
||||
const dayIndex = dayMap[dayCode];
|
||||
|
||||
let day = 1;
|
||||
let count = 0;
|
||||
|
||||
while (day <= rangeEnd.getDate()) {
|
||||
const testDate = new Date(year, month, day);
|
||||
if (testDate.getDay() === dayIndex) {
|
||||
count++;
|
||||
if (count === occurrence || (occurrence < 0 && day > rangeEnd.getDate() + occurrence * 7)) {
|
||||
const newEvent = {...event};
|
||||
const eventDate = new Date(year, month, day);
|
||||
|
||||
// Preserve time portion from original event
|
||||
const timePart = event.start.includes('T') ?
|
||||
event.start.substring(event.start.indexOf('T')) : '';
|
||||
const endTimePart = event.end.includes('T') ?
|
||||
event.end.substring(event.end.indexOf('T')) : '';
|
||||
|
||||
newEvent.start = formatDateForICS(eventDate) + timePart;
|
||||
newEvent.end = formatDateForICS(eventDate) + endTimePart;
|
||||
expandedEvents.push(newEvent);
|
||||
}
|
||||
}
|
||||
day++;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return expandedEvents.length > 0 ? expandedEvents : [event];
|
||||
}
|
||||
|
||||
// Kalender initialisieren
|
||||
let currentYear, currentMonth;
|
||||
const currentMonthElem = document.getElementById("current-month");
|
||||
|
|
@ -199,17 +344,56 @@ menu:
|
|||
currentMonth = 11;
|
||||
currentYear--;
|
||||
}
|
||||
renderCalendar(currentYear, currentMonth);
|
||||
updateEventsForMonth(currentYear, currentMonth);
|
||||
});
|
||||
document.getElementById("next-month").addEventListener("click", function(){
|
||||
currentMonth++;
|
||||
if (currentMonth > 11) {
|
||||
currentMonth = 0;
|
||||
currentYear++;
|
||||
currentMonth = 0;
|
||||
currentYear++;
|
||||
}
|
||||
renderCalendar(currentYear, currentMonth);
|
||||
updateEventsForMonth(currentYear, currentMonth);
|
||||
});
|
||||
|
||||
function updateEventsForMonth(year, month) {
|
||||
// Clear existing events for this month view
|
||||
eventsByDate = {};
|
||||
|
||||
// Process each event, expanding recurring ones
|
||||
events.forEach(ev => {
|
||||
if (ev.rrule) {
|
||||
// For recurring events, expand them for current month
|
||||
const expandedEvents = expandRecurringEvents(ev, year, month);
|
||||
expandedEvents.forEach(expandedEv => {
|
||||
let dateKey = parseDateString(expandedEv.start);
|
||||
if (dateKey) {
|
||||
if (!eventsByDate[dateKey]) {
|
||||
eventsByDate[dateKey] = [];
|
||||
}
|
||||
eventsByDate[dateKey].push(expandedEv);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// For regular events, check if they fall in current month
|
||||
let dateKey = parseDateString(ev.start);
|
||||
if (dateKey) {
|
||||
// Check if this event belongs to current month view
|
||||
const eventYear = parseInt(dateKey.split('-')[0]);
|
||||
const eventMonth = parseInt(dateKey.split('-')[1]) - 1;
|
||||
|
||||
if (eventYear === year && eventMonth === month) {
|
||||
if (!eventsByDate[dateKey]) {
|
||||
eventsByDate[dateKey] = [];
|
||||
}
|
||||
eventsByDate[dateKey].push(ev);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
renderCalendar(year, month);
|
||||
}
|
||||
|
||||
function renderCalendar(year, month) {
|
||||
// Setze die Monatsbeschriftung (in Deutsch)
|
||||
const monthNames = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
|
||||
|
|
@ -241,11 +425,42 @@ menu:
|
|||
let dateKey = year + "-" + monthStr + "-" + dayStr;
|
||||
|
||||
if (eventsByDate[dateKey]) {
|
||||
let eventDot = document.createElement("div");
|
||||
eventDot.className = "event-dot";
|
||||
cell.appendChild(document.createElement("br"));
|
||||
cell.appendChild(eventDot);
|
||||
let dotsContainer = document.createElement("div");
|
||||
dotsContainer.className = "event-dots-container";
|
||||
cell.classList.add("has-event");
|
||||
|
||||
// Gruppe Events nach Typ
|
||||
const events = eventsByDate[dateKey];
|
||||
const hasMembersOnly = events.some(e => e.summary.toLowerCase().includes("members only"));
|
||||
const hasSubbotnik = events.some(e => e.summary.toLowerCase().includes("subbotnik"));
|
||||
const hasBastelabend = events.some(e => e.summary.toLowerCase().includes("bastelabend"));
|
||||
const hasSpieleabend = events.some(e => e.summary.toLowerCase().includes("spieleabend"));
|
||||
const hasRegular = events.some(e => {
|
||||
const title = e.summary.toLowerCase();
|
||||
return !title.includes("members only") &&
|
||||
!title.includes("subbotnik") &&
|
||||
!title.includes("bastelabend") &&
|
||||
!title.includes("spieleabend");
|
||||
});
|
||||
|
||||
// Füge Dots entsprechend der Event-Typen hinzu
|
||||
if (hasMembersOnly) {
|
||||
let dot = document.createElement("div");
|
||||
dot.className = "event-dot event-dot-red";
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
if (hasSubbotnik || hasBastelabend || hasSpieleabend) {
|
||||
let dot = document.createElement("div");
|
||||
dot.className = "event-dot event-dot-orange";
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
if (hasRegular) {
|
||||
let dot = document.createElement("div");
|
||||
dot.className = "event-dot event-dot-greenyellow";
|
||||
dotsContainer.appendChild(dot);
|
||||
}
|
||||
|
||||
cell.appendChild(dotsContainer);
|
||||
cell.dataset.dateKey = dateKey;
|
||||
cell.addEventListener("click", function() {
|
||||
// Clear previous selections
|
||||
|
|
@ -294,9 +509,8 @@ menu:
|
|||
eventTitle.className = "event-title";
|
||||
|
||||
// Create a link for the event title
|
||||
let titleLink = document.createElement("a");
|
||||
let titleLink = document.createElement("h");
|
||||
titleLink.textContent = ev.summary;
|
||||
titleLink.href = createEventLink(ev.summary);
|
||||
titleLink.target = "_blank";
|
||||
eventTitle.appendChild(titleLink);
|
||||
|
||||
|
|
@ -307,14 +521,26 @@ menu:
|
|||
eventTime.textContent = `Start: ${formatTime(ev.start)}, End: ${formatTime(ev.end)}`;
|
||||
eventItem.appendChild(eventTime);
|
||||
|
||||
if (ev.description) {
|
||||
let eventDescription = document.createElement("div");
|
||||
eventDescription.className = "event-description";
|
||||
eventDescription.textContent = ev.description;
|
||||
eventItem.appendChild(eventDescription);
|
||||
}
|
||||
if (ev.description) {
|
||||
let eventDescription = document.createElement("div");
|
||||
eventDescription.className = "event-description";
|
||||
|
||||
// Check if the description is a URL and make it a clickable link
|
||||
if (ev.description.trim().startsWith('http')) {
|
||||
let linkElement = document.createElement("a");
|
||||
linkElement.href = ev.description.trim();
|
||||
linkElement.textContent = ev.description.trim();
|
||||
linkElement.target = "_blank";
|
||||
eventDescription.innerHTML = '';
|
||||
eventDescription.appendChild(linkElement);
|
||||
} else {
|
||||
eventDescription.textContent = ev.description;
|
||||
}
|
||||
|
||||
eventItem.appendChild(eventDescription);
|
||||
}
|
||||
|
||||
eventDetailsElem.appendChild(eventItem);
|
||||
eventDetailsElem.appendChild(eventItem);
|
||||
});
|
||||
} else {
|
||||
let noEvents = document.createElement("div");
|
||||
|
|
@ -334,37 +560,44 @@ menu:
|
|||
|
||||
function formatTime(icsTimeStr) {
|
||||
// Format time for display
|
||||
if (!icsTimeStr) return "";
|
||||
|
||||
if (icsTimeStr.length === 8) {
|
||||
// All-day event
|
||||
return "Ganztägig";
|
||||
} else if (icsTimeStr.length >= 15) {
|
||||
// Time-specific event
|
||||
const hour = icsTimeStr.substring(9, 11);
|
||||
const minute = icsTimeStr.substring(11, 13);
|
||||
} else if (icsTimeStr.includes("T")) {
|
||||
// Time-specific event (with or without timezone)
|
||||
const timeStart = icsTimeStr.indexOf("T") + 1;
|
||||
const hour = icsTimeStr.substring(timeStart, timeStart + 2);
|
||||
const minute = icsTimeStr.substring(timeStart + 2, timeStart + 4);
|
||||
return `${hour}:${minute}`;
|
||||
}
|
||||
return icsTimeStr;
|
||||
}
|
||||
|
||||
function formatDateForICS(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
return `${year}${month}${day}`;
|
||||
}
|
||||
|
||||
// ICS-Datei abrufen und Events verarbeiten
|
||||
fetch('/all.ics')
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
events = parseICS(data);
|
||||
events.forEach(ev => {
|
||||
let dateKey = parseDateString(ev.start);
|
||||
if (dateKey) {
|
||||
if (!eventsByDate[dateKey]) {
|
||||
eventsByDate[dateKey] = [];
|
||||
}
|
||||
eventsByDate[dateKey].push(ev);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize with current date
|
||||
let today = new Date();
|
||||
currentYear = today.getFullYear();
|
||||
currentMonth = today.getMonth();
|
||||
renderCalendar(currentYear, currentMonth);
|
||||
|
||||
// Process events for current month
|
||||
updateEventsForMonth(currentYear, currentMonth);
|
||||
})
|
||||
.catch(err => console.error('Fehler beim Laden der ICS-Datei:', err));
|
||||
})();
|
||||
</script>
|
||||
|
||||
Keinen Termin mehr verpeilen? Einfach den [Veranstaltungskalender abonnieren](all.ics)!
|
||||
Loading…
Add table
Add a link
Reference in a new issue