124 lines
No EOL
5 KiB
JavaScript
124 lines
No EOL
5 KiB
JavaScript
/**
|
|
* MonthViewStrategy - Strategy for month view rendering
|
|
* Completely different from week view - no time axis, cell-based events
|
|
*/
|
|
import { DateCalculator } from '../utils/DateCalculator';
|
|
import { calendarConfig } from '../core/CalendarConfig';
|
|
export class MonthViewStrategy {
|
|
constructor() {
|
|
DateCalculator.initialize(calendarConfig);
|
|
this.dateCalculator = new DateCalculator();
|
|
}
|
|
getLayoutConfig() {
|
|
return {
|
|
needsTimeAxis: false, // No time axis in month view!
|
|
columnCount: 7, // Always 7 days (Mon-Sun)
|
|
scrollable: false, // Month fits in viewport
|
|
eventPositioning: 'cell-based' // Events go in day cells
|
|
};
|
|
}
|
|
renderGrid(context) {
|
|
// Clear existing content
|
|
context.container.innerHTML = '';
|
|
// Create month grid (completely different from week!)
|
|
this.createMonthGrid(context);
|
|
}
|
|
createMonthGrid(context) {
|
|
const monthGrid = document.createElement('div');
|
|
monthGrid.className = 'month-grid';
|
|
monthGrid.style.display = 'grid';
|
|
monthGrid.style.gridTemplateColumns = 'repeat(7, 1fr)';
|
|
monthGrid.style.gridTemplateRows = 'auto repeat(6, 1fr)';
|
|
monthGrid.style.height = '100%';
|
|
// Add day headers (Mon, Tue, Wed, etc.)
|
|
this.createDayHeaders(monthGrid);
|
|
// Add 6 weeks of day cells
|
|
this.createDayCells(monthGrid, context.currentDate);
|
|
// Render events in day cells (will be handled by EventRendererManager)
|
|
// this.renderMonthEvents(monthGrid, context.allDayEvents);
|
|
context.container.appendChild(monthGrid);
|
|
}
|
|
createDayHeaders(container) {
|
|
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
dayNames.forEach(dayName => {
|
|
const header = document.createElement('div');
|
|
header.className = 'month-day-header';
|
|
header.textContent = dayName;
|
|
header.style.padding = '8px';
|
|
header.style.fontWeight = 'bold';
|
|
header.style.textAlign = 'center';
|
|
header.style.borderBottom = '1px solid #e0e0e0';
|
|
container.appendChild(header);
|
|
});
|
|
}
|
|
createDayCells(container, monthDate) {
|
|
const dates = this.getMonthDates(monthDate);
|
|
dates.forEach(date => {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'month-day-cell';
|
|
cell.dataset.date = DateCalculator.formatISODate(date);
|
|
cell.style.border = '1px solid #e0e0e0';
|
|
cell.style.minHeight = '100px';
|
|
cell.style.padding = '4px';
|
|
cell.style.position = 'relative';
|
|
// Day number
|
|
const dayNumber = document.createElement('div');
|
|
dayNumber.className = 'month-day-number';
|
|
dayNumber.textContent = date.getDate().toString();
|
|
dayNumber.style.fontWeight = 'bold';
|
|
dayNumber.style.marginBottom = '4px';
|
|
// Check if today
|
|
if (DateCalculator.isToday(date)) {
|
|
dayNumber.style.color = '#1976d2';
|
|
cell.style.backgroundColor = '#f5f5f5';
|
|
}
|
|
cell.appendChild(dayNumber);
|
|
container.appendChild(cell);
|
|
});
|
|
}
|
|
getMonthDates(monthDate) {
|
|
// Get first day of month
|
|
const firstOfMonth = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1);
|
|
// Get Monday of the week containing first day
|
|
const startDate = DateCalculator.getISOWeekStart(firstOfMonth);
|
|
// Generate 42 days (6 weeks)
|
|
const dates = [];
|
|
for (let i = 0; i < 42; i++) {
|
|
dates.push(DateCalculator.addDays(startDate, i));
|
|
}
|
|
return dates;
|
|
}
|
|
renderMonthEvents(container, events) {
|
|
// TODO: Implement month event rendering
|
|
// Events will be small blocks in day cells
|
|
}
|
|
getNextPeriod(currentDate) {
|
|
return new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
|
|
}
|
|
getPreviousPeriod(currentDate) {
|
|
return new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
|
|
}
|
|
getPeriodLabel(date) {
|
|
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
|
|
'July', 'August', 'September', 'October', 'November', 'December'];
|
|
return `${monthNames[date.getMonth()]} ${date.getFullYear()}`;
|
|
}
|
|
getDisplayDates(baseDate) {
|
|
return this.getMonthDates(baseDate);
|
|
}
|
|
getPeriodRange(baseDate) {
|
|
// Month view shows events for the entire month grid (including partial weeks)
|
|
const firstOfMonth = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
|
|
// Get Monday of the week containing first day
|
|
const startDate = DateCalculator.getISOWeekStart(firstOfMonth);
|
|
// End date is 41 days after start (42 total days)
|
|
const endDate = DateCalculator.addDays(startDate, 41);
|
|
return {
|
|
startDate,
|
|
endDate
|
|
};
|
|
}
|
|
destroy() {
|
|
}
|
|
}
|
|
//# sourceMappingURL=MonthViewStrategy.js.map
|