Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Janus Knudsen 2025-08-05 00:49:00 +02:00
parent dc5063729b
commit 914239fb70
2 changed files with 52 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/managers/EventManager.ts
View file

@ -42,7 +42,7 @@ export class EventManager {
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60, color: '#9c27b0' } // Purple
}, },
// Monday August 4, 2025 // Monday August 4, 2025
{ {
@ -53,7 +53,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 30 } metadata: { duration: 30, color: '#ff5722' } // Deep Orange
}, },
{ {
id: '3', id: '3',
@ -63,7 +63,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 90 } metadata: { duration: 90, color: '#e91e63' } // Pink
}, },
// Tuesday August 5, 2025 // Tuesday August 5, 2025
{ {
@ -74,7 +74,7 @@ export class EventManager {
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 120 } metadata: { duration: 120, color: '#3f51b5' } // Indigo
}, },
{ {
id: '5', id: '5',
@ -84,7 +84,7 @@ export class EventManager {
type: 'meal', type: 'meal',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60, color: '#ff9800' } // Orange
}, },
// Wednesday August 6, 2025 // Wednesday August 6, 2025
{ {
@ -95,7 +95,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60, color: '#795548' } // Brown
}, },
// Thursday August 7, 2025 // Thursday August 7, 2025
{ {
@ -106,7 +106,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 90 } metadata: { duration: 90, color: '#607d8b' } // Blue Grey
}, },
{ {
id: '8', id: '8',
@ -116,7 +116,7 @@ export class EventManager {
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60, color: '#009688' } // Teal
}, },
// Friday August 8, 2025 // Friday August 8, 2025
{ {
@ -127,7 +127,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 30 } metadata: { duration: 30, color: '#8bc34a' } // Light Green
}, },
{ {
id: '10', id: '10',
@ -137,7 +137,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 90 } metadata: { duration: 90, color: '#cddc39' } // Lime
}, },
// Saturday August 9, 2025 // Saturday August 9, 2025
{ {
@ -148,7 +148,7 @@ export class EventManager {
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 120 } metadata: { duration: 120, color: '#f44336' } // Red
}, },
// Test events for early/late hours // Test events for early/late hours
{ {
@ -159,7 +159,7 @@ export class EventManager {
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60, color: '#00bcd4' } // Cyan
}, },
{ {
id: '13', id: '13',
@ -169,7 +169,7 @@ export class EventManager {
type: 'meeting', type: 'meeting',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 60 } metadata: { duration: 60, color: '#673ab7' } // Deep Purple
}, },
{ {
id: '14', id: '14',
@ -179,14 +179,14 @@ export class EventManager {
type: 'work', type: 'work',
allDay: false, allDay: false,
syncStatus: 'synced', syncStatus: 'synced',
metadata: { duration: 120 } metadata: { duration: 120, color: '#ffc107' } // Amber
}, },
// All-day events for demo // All-day events for demo
{ {
id: '15', id: '15',
title: 'Company Holiday', title: 'Company Holiday',
start: '2025-08-04T00:00:00', start: '2025-08-04T00:00:00',
end: '2025-08-04T23:59:59', end: '2025-08-05T23:59:59',
type: 'milestone', type: 'milestone',
allDay: true, allDay: true,
syncStatus: 'synced', syncStatus: 'synced',

49
src/managers/GridManager.ts
View file

@ -330,32 +330,51 @@ export class GridManager {
const weekDays = calendarConfig.get('weekDays'); const weekDays = calendarConfig.get('weekDays');
const daysToShow = dates.slice(0, weekDays); const daysToShow = dates.slice(0, weekDays);
// Group all-day events by date // Process each all-day event to calculate its span
const eventsByDate = new Map<string, any[]>();
this.allDayEvents.forEach(event => { this.allDayEvents.forEach(event => {
const eventDate = new Date(event.start); const startDate = new Date(event.start);
const dateKey = this.formatDate(eventDate); const endDate = new Date(event.end);
if (!eventsByDate.has(dateKey)) { // Find start and end column indices
eventsByDate.set(dateKey, []); let startColumnIndex = -1;
let endColumnIndex = -1;
daysToShow.forEach((date, index) => {
const dateStr = this.formatDate(date);
const startDateStr = this.formatDate(startDate);
const endDateStr = this.formatDate(endDate);
if (dateStr === startDateStr) {
startColumnIndex = index;
}
// For end date, we need to check if the event spans to this day
// All-day events typically end at 23:59:59, so we check if this date is <= end date
if (date <= endDate) {
endColumnIndex = index;
} }
eventsByDate.get(dateKey)!.push(event);
}); });
// Render all-day events for each day // Only render if the event starts within the visible week
daysToShow.forEach((date, dayIndex) => { if (startColumnIndex >= 0) {
const dateKey = this.formatDate(date); // If end column is not found or is before start, default to single day
const dayEvents = eventsByDate.get(dateKey) || []; if (endColumnIndex < startColumnIndex) {
endColumnIndex = startColumnIndex;
}
dayEvents.forEach(event => {
const allDayEvent = document.createElement('swp-allday-event'); const allDayEvent = document.createElement('swp-allday-event');
allDayEvent.textContent = event.title; allDayEvent.textContent = event.title;
allDayEvent.style.gridColumn = `${dayIndex + 1} / ${dayIndex + 2}`; // Single column
// Set grid column span: start column (1-based) to end column + 1 (1-based)
const gridColumnStart = startColumnIndex + 1;
const gridColumnEnd = endColumnIndex + 2; // +2 because grid columns are 1-based and we want to include the end column
allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`;
allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800'; allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800';
console.log(`GridManager: All-day event "${event.title}" spans columns ${gridColumnStart} to ${gridColumnEnd-1} (${endColumnIndex - startColumnIndex + 1} days)`);
weekHeader.appendChild(allDayEvent); weekHeader.appendChild(allDayEvent);
}); }
}); });
} }