d017d48bd6
Implements configurable work week presets, allowing users to customize the days displayed in the calendar. This includes: - Defining work week settings (work days, day names, total days). - Providing predefined work week presets (standard, compressed, weekend, full week). - Adding UI elements to switch between presets. - Updating grid and header rendering logic to reflect the selected work week. - Emitting events when the work week changes, triggering necessary UI updates and data re-renders. This provides a more flexible and personalized calendar experience.
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" disabled>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> |