wip
This commit is contained in:
parent
dc5063729b
commit
914239fb70
2 changed files with 52 additions and 33 deletions
|
|
@ -42,7 +42,7 @@ export class EventManager {
|
|||
type: 'work',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 60 }
|
||||
metadata: { duration: 60, color: '#9c27b0' } // Purple
|
||||
},
|
||||
// Monday August 4, 2025
|
||||
{
|
||||
|
|
@ -53,7 +53,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 30 }
|
||||
metadata: { duration: 30, color: '#ff5722' } // Deep Orange
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
|
|
@ -63,7 +63,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 90 }
|
||||
metadata: { duration: 90, color: '#e91e63' } // Pink
|
||||
},
|
||||
// Tuesday August 5, 2025
|
||||
{
|
||||
|
|
@ -74,7 +74,7 @@ export class EventManager {
|
|||
type: 'work',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 120 }
|
||||
metadata: { duration: 120, color: '#3f51b5' } // Indigo
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
|
|
@ -84,7 +84,7 @@ export class EventManager {
|
|||
type: 'meal',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 60 }
|
||||
metadata: { duration: 60, color: '#ff9800' } // Orange
|
||||
},
|
||||
// Wednesday August 6, 2025
|
||||
{
|
||||
|
|
@ -95,7 +95,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 60 }
|
||||
metadata: { duration: 60, color: '#795548' } // Brown
|
||||
},
|
||||
// Thursday August 7, 2025
|
||||
{
|
||||
|
|
@ -106,7 +106,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 90 }
|
||||
metadata: { duration: 90, color: '#607d8b' } // Blue Grey
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
|
|
@ -116,7 +116,7 @@ export class EventManager {
|
|||
type: 'work',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 60 }
|
||||
metadata: { duration: 60, color: '#009688' } // Teal
|
||||
},
|
||||
// Friday August 8, 2025
|
||||
{
|
||||
|
|
@ -127,7 +127,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 30 }
|
||||
metadata: { duration: 30, color: '#8bc34a' } // Light Green
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
|
|
@ -137,7 +137,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 90 }
|
||||
metadata: { duration: 90, color: '#cddc39' } // Lime
|
||||
},
|
||||
// Saturday August 9, 2025
|
||||
{
|
||||
|
|
@ -148,7 +148,7 @@ export class EventManager {
|
|||
type: 'work',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 120 }
|
||||
metadata: { duration: 120, color: '#f44336' } // Red
|
||||
},
|
||||
// Test events for early/late hours
|
||||
{
|
||||
|
|
@ -159,7 +159,7 @@ export class EventManager {
|
|||
type: 'work',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 60 }
|
||||
metadata: { duration: 60, color: '#00bcd4' } // Cyan
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
|
|
@ -169,7 +169,7 @@ export class EventManager {
|
|||
type: 'meeting',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 60 }
|
||||
metadata: { duration: 60, color: '#673ab7' } // Deep Purple
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
|
|
@ -179,14 +179,14 @@ export class EventManager {
|
|||
type: 'work',
|
||||
allDay: false,
|
||||
syncStatus: 'synced',
|
||||
metadata: { duration: 120 }
|
||||
metadata: { duration: 120, color: '#ffc107' } // Amber
|
||||
},
|
||||
// All-day events for demo
|
||||
{
|
||||
id: '15',
|
||||
title: 'Company Holiday',
|
||||
start: '2025-08-04T00:00:00',
|
||||
end: '2025-08-04T23:59:59',
|
||||
end: '2025-08-05T23:59:59',
|
||||
type: 'milestone',
|
||||
allDay: true,
|
||||
syncStatus: 'synced',
|
||||
|
|
|
|||
|
|
@ -330,32 +330,51 @@ export class GridManager {
|
|||
const weekDays = calendarConfig.get('weekDays');
|
||||
const daysToShow = dates.slice(0, weekDays);
|
||||
|
||||
// Group all-day events by date
|
||||
const eventsByDate = new Map<string, any[]>();
|
||||
|
||||
// Process each all-day event to calculate its span
|
||||
this.allDayEvents.forEach(event => {
|
||||
const eventDate = new Date(event.start);
|
||||
const dateKey = this.formatDate(eventDate);
|
||||
const startDate = new Date(event.start);
|
||||
const endDate = new Date(event.end);
|
||||
|
||||
if (!eventsByDate.has(dateKey)) {
|
||||
eventsByDate.set(dateKey, []);
|
||||
}
|
||||
eventsByDate.get(dateKey)!.push(event);
|
||||
});
|
||||
// Find start and end column indices
|
||||
let startColumnIndex = -1;
|
||||
let endColumnIndex = -1;
|
||||
|
||||
// Render all-day events for each day
|
||||
daysToShow.forEach((date, dayIndex) => {
|
||||
const dateKey = this.formatDate(date);
|
||||
const dayEvents = eventsByDate.get(dateKey) || [];
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
// Only render if the event starts within the visible week
|
||||
if (startColumnIndex >= 0) {
|
||||
// If end column is not found or is before start, default to single day
|
||||
if (endColumnIndex < startColumnIndex) {
|
||||
endColumnIndex = startColumnIndex;
|
||||
}
|
||||
|
||||
dayEvents.forEach(event => {
|
||||
const allDayEvent = document.createElement('swp-allday-event');
|
||||
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';
|
||||
|
||||
console.log(`GridManager: All-day event "${event.title}" spans columns ${gridColumnStart} to ${gridColumnEnd-1} (${endColumnIndex - startColumnIndex + 1} days)`);
|
||||
|
||||
weekHeader.appendChild(allDayEvent);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue