122 lines
No EOL
4 KiB
HTML
122 lines
No EOL
4 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>
|
|
|
|
<!-- CSS Files -->
|
|
<link rel="stylesheet" href="css/calendar.css">
|
|
|
|
<!-- Additional styles for view selector -->
|
|
<style>
|
|
swp-view-selector {
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-view-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-view-button:not(:last-child) {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-view-button[data-active="true"] {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
}
|
|
|
|
/* Week info display */
|
|
swp-week-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
justify-self: start;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
swp-week-number {
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-date-range {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|
|
</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> |