414ef1caaf
Refactors the grid management to use a strategy pattern, allowing for different calendar views (week, month, day) to be rendered using separate strategy implementations. This approach improves code organization, reduces complexity within the main grid manager, and makes it easier to add new view types in the future. The strategy pattern centralizes view-specific logic, improves testability, and reduces code duplication. A month view strategy has been added and is now selectable via UI.
75 lines
No EOL
3.5 KiB
HTML
75 lines
No EOL
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar Plantempus - Week View</title>
|
|
|
|
<!-- Modular CSS Files -->
|
|
<link rel="stylesheet" href="css/calendar-base-css.css">
|
|
<link rel="stylesheet" href="css/calendar-layout-css.css">
|
|
<link rel="stylesheet" href="css/calendar-components-css.css">
|
|
<link rel="stylesheet" href="css/calendar-events-css.css">
|
|
<link rel="stylesheet" href="css/calendar-popup-css.css">
|
|
</head>
|
|
<body>
|
|
<div class="calendar-wrapper">
|
|
<swp-calendar data-view="week" data-week-days="7" data-snap-interval="15" data-day-start-hour="6" data-day-end-hour="22" data-hour-height="80">
|
|
<!-- Navigation Bar -->
|
|
<swp-calendar-nav>
|
|
<swp-nav-group>
|
|
<swp-nav-button data-action="prev">←</swp-nav-button>
|
|
<swp-nav-button data-action="next">→</swp-nav-button>
|
|
<swp-nav-button data-action="today">Today</swp-nav-button>
|
|
</swp-nav-group>
|
|
|
|
<swp-week-info>
|
|
<swp-week-number>Week 3</swp-week-number>
|
|
<swp-date-range>Jan 15 - Jan 21, 2024</swp-date-range>
|
|
</swp-week-info>
|
|
|
|
<swp-search-container>
|
|
<swp-search-icon>
|
|
<svg width="16" height="16" viewBox="0 0 16 16">
|
|
<circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1.5"/>
|
|
<path d="M10 10l4 4" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</swp-search-icon>
|
|
<input type="search" placeholder="Search events..." />
|
|
<swp-search-clear hidden>
|
|
<svg width="14" height="14" viewBox="0 0 16 16">
|
|
<path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</swp-search-clear>
|
|
</swp-search-container>
|
|
|
|
<swp-view-selector>
|
|
<swp-view-button data-view="day">Day</swp-view-button>
|
|
<swp-view-button data-view="week" data-active="true">Week</swp-view-button>
|
|
<swp-view-button data-view="month">Month</swp-view-button>
|
|
</swp-view-selector>
|
|
|
|
<swp-workweek-presets>
|
|
<swp-preset-button data-workweek="standard" data-active="true">Mon-Fri</swp-preset-button>
|
|
<swp-preset-button data-workweek="compressed">Mon-Thu</swp-preset-button>
|
|
<swp-preset-button data-workweek="midweek">Wed-Fri</swp-preset-button>
|
|
<swp-preset-button data-workweek="weekend">Sat-Sun</swp-preset-button>
|
|
<swp-preset-button data-workweek="fullweek">7 Days</swp-preset-button>
|
|
</swp-workweek-presets>
|
|
</swp-calendar-nav>
|
|
|
|
<!-- Calendar Grid Container -->
|
|
<swp-calendar-container>
|
|
<!-- Headers and time slots will be generated dynamically by JavaScript -->
|
|
</swp-calendar-container>
|
|
|
|
<swp-loading-overlay hidden>
|
|
<swp-spinner></swp-spinner>
|
|
</swp-loading-overlay>
|
|
</swp-calendar>
|
|
</div>
|
|
|
|
<!-- JavaScript Bundle -->
|
|
<script type="module" src="js/calendar.js"></script>
|
|
</body>
|
|
</html> |