b443649ced
Refactors the calendar grid to support smoother navigation transitions by using separate week containers. This change introduces a GridManager to handle grid rendering and interactions within these containers, enabling scroll synchronization and click event handling for each week view. Also, configures the calendar to start at midnight and span a full 24-hour day, providing a more comprehensive view.
76 lines
No EOL
3.1 KiB
HTML
76 lines
No EOL
3.1 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>
|
|
<swp-calendar data-view="week" data-week-days="7" data-snap-interval="15">
|
|
<!-- 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-calendar-nav>
|
|
|
|
<!-- Calendar Grid -->
|
|
<swp-calendar-container>
|
|
<swp-time-axis></swp-time-axis>
|
|
|
|
<swp-week-container>
|
|
<swp-week-header></swp-week-header>
|
|
|
|
<swp-scrollable-content>
|
|
<swp-time-grid>
|
|
<swp-grid-lines></swp-grid-lines>
|
|
<swp-day-columns></swp-day-columns>
|
|
</swp-time-grid>
|
|
</swp-scrollable-content>
|
|
</swp-week-container>
|
|
</swp-calendar-container>
|
|
|
|
<swp-loading-overlay hidden>
|
|
<swp-spinner></swp-spinner>
|
|
</swp-loading-overlay>
|
|
</swp-calendar>
|
|
|
|
<!-- JavaScript Bundle -->
|
|
<script type="module" src="js/calendar.js"></script>
|
|
</body>
|
|
</html> |