Implement calendar display with multi-day event support
- Added timezone support (Pacific/Auckland) for calendar events - Implemented recurring event handling using recurring_ical_events library - Created horizontal 5-day column layout for calendar display - Fixed multi-day event rendering to show events across all active days - Updated calendar to show next 5 days (today + 4) - Reduced font sizes and padding for compact display - Changed image rotation interval to 60 seconds - Added pytz and recurring_ical_events dependencies Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
BIN
static/backgrounds/Screenshot 2026-02-15 at 7.38.23 AM.png
Normal file
BIN
static/backgrounds/Screenshot 2026-02-15 at 7.38.23 AM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
@@ -34,7 +34,7 @@ body {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ body {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
@@ -150,7 +150,7 @@ body {
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
@@ -242,28 +242,75 @@ section h3 {
|
||||
|
||||
/* Calendar Section */
|
||||
.events-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0.8rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.day-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.day-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.6rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.day-date {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.8;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.day-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.no-events {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 0.8rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #4a9eff;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.event-location {
|
||||
@@ -282,7 +329,7 @@ section h3 {
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 1rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -114,26 +114,97 @@ async function updateCalendar() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Group events by day
|
||||
const eventsByDay = {};
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
// Create 5 days (today + 4 more)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const date = new Date(today);
|
||||
date.setDate(today.getDate() + i);
|
||||
const dateKey = date.toISOString().split('T')[0];
|
||||
eventsByDay[dateKey] = {
|
||||
date: date,
|
||||
events: []
|
||||
};
|
||||
}
|
||||
|
||||
// Group events by their date (including multi-day events)
|
||||
events.forEach(event => {
|
||||
const eventStart = new Date(event.start);
|
||||
const eventEnd = new Date(event.end);
|
||||
eventStart.setHours(0, 0, 0, 0);
|
||||
eventEnd.setHours(0, 0, 0, 0);
|
||||
|
||||
// Check each day in our 5-day view
|
||||
Object.keys(eventsByDay).forEach(dateKey => {
|
||||
const dayDate = new Date(eventsByDay[dateKey].date);
|
||||
dayDate.setHours(0, 0, 0, 0);
|
||||
|
||||
// Include event if this day falls within the event's duration
|
||||
if (dayDate >= eventStart && dayDate <= eventEnd) {
|
||||
eventsByDay[dateKey].events.push(event);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Render events grouped by day
|
||||
eventsContainer.innerHTML = '';
|
||||
|
||||
events.forEach(event => {
|
||||
const eventElement = document.createElement('div');
|
||||
eventElement.className = 'event';
|
||||
Object.keys(eventsByDay).sort().forEach(dateKey => {
|
||||
const dayData = eventsByDay[dateKey];
|
||||
const dayElement = document.createElement('div');
|
||||
dayElement.className = 'day-group';
|
||||
|
||||
const startTime = new Date(event.start);
|
||||
const endTime = new Date(event.end);
|
||||
// Format day header
|
||||
const dayDate = dayData.date;
|
||||
const isToday = dayDate.toDateString() === new Date().toDateString();
|
||||
const dayName = isToday ? 'Today' : dayDate.toLocaleDateString('en-NZ', { weekday: 'long' });
|
||||
const dateStr = dayDate.toLocaleDateString('en-NZ', { day: 'numeric', month: 'short' });
|
||||
|
||||
// Format time
|
||||
const timeOptions = { hour: '2-digit', minute: '2-digit', weekday: 'short', day: 'numeric', month: 'short' };
|
||||
const timeString = startTime.toLocaleDateString('en-NZ', timeOptions);
|
||||
|
||||
eventElement.innerHTML = `
|
||||
<div class="event-time">${timeString}</div>
|
||||
<div class="event-title">${event.title}</div>
|
||||
${event.location ? `<div class="event-location">📍 ${event.location}</div>` : ''}
|
||||
dayElement.innerHTML = `
|
||||
<div class="day-header">
|
||||
<span class="day-name">${dayName}</span>
|
||||
<span class="day-date">${dateStr}</span>
|
||||
</div>
|
||||
<div class="day-events"></div>
|
||||
`;
|
||||
|
||||
eventsContainer.appendChild(eventElement);
|
||||
const dayEventsContainer = dayElement.querySelector('.day-events');
|
||||
|
||||
if (dayData.events.length === 0) {
|
||||
dayEventsContainer.innerHTML = '<div class="no-events">No events</div>';
|
||||
} else {
|
||||
dayData.events.forEach(event => {
|
||||
const eventElement = document.createElement('div');
|
||||
eventElement.className = 'event';
|
||||
|
||||
const startTime = new Date(event.start);
|
||||
const endTime = new Date(event.end);
|
||||
|
||||
// Check if it's an all-day event (time is 00:00)
|
||||
const isAllDay = startTime.getHours() === 0 && startTime.getMinutes() === 0
|
||||
&& endTime.getHours() === 0 && endTime.getMinutes() === 0;
|
||||
|
||||
let timeString;
|
||||
if (isAllDay) {
|
||||
timeString = 'All day';
|
||||
} else {
|
||||
timeString = startTime.toLocaleTimeString('en-NZ', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
eventElement.innerHTML = `
|
||||
<div class="event-time">${timeString}</div>
|
||||
<div class="event-title">${event.title}</div>
|
||||
${event.location ? `<div class="event-location">📍 ${event.location}</div>` : ''}
|
||||
`;
|
||||
|
||||
dayEventsContainer.appendChild(eventElement);
|
||||
});
|
||||
}
|
||||
|
||||
eventsContainer.appendChild(dayElement);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user