2025-07-24 22:17:38 +02:00
|
|
|
<!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>
|
|
|
|
|
|
2025-07-25 00:24:15 +02:00
|
|
|
<!-- 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">
|
2025-07-24 22:17:38 +02:00
|
|
|
</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>
|
