863b433eba
Consolidates V2 codebase into main project directory Updates build script to support simplified entry points Removes redundant files and cleans up project organization Simplifies module imports and entry points for calendar application
83 lines
3 KiB
HTML
83 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar</title>
|
|
<link rel="stylesheet" href="css/calendar.css">
|
|
</head>
|
|
<body>
|
|
<div class="calendar-wrapper">
|
|
<swp-calendar>
|
|
<swp-calendar-nav>
|
|
<!-- View switcher (small chips) -->
|
|
<swp-view-switcher>
|
|
<button class="view-chip active" data-view="simple">Datoer</button>
|
|
<button class="view-chip" data-view="day">Dag</button>
|
|
<button class="view-chip" data-view="resource">Resource</button>
|
|
<button class="view-chip" data-view="picker">Picker</button>
|
|
<button class="view-chip" data-view="team">Team</button>
|
|
<button class="view-chip" data-view="department">Dept</button>
|
|
</swp-view-switcher>
|
|
|
|
<!-- Resource selector (only visible in picker view) -->
|
|
<swp-resource-selector class="hidden">
|
|
<fieldset>
|
|
<legend>Vælg resources</legend>
|
|
<div class="resource-checkboxes"></div>
|
|
</fieldset>
|
|
</swp-resource-selector>
|
|
|
|
<!-- Workweek preset dropdown -->
|
|
<select id="workweek-select" class="workweek-dropdown">
|
|
<option value="standard">Man-Fre</option>
|
|
<option value="compressed">Man-Ons</option>
|
|
<option value="midweek">Tors-Fre</option>
|
|
<option value="weekend">Weekend</option>
|
|
<option value="fullweek">Alle dage</option>
|
|
</select>
|
|
|
|
<!-- Navigation -->
|
|
<swp-nav-group>
|
|
<swp-nav-button id="btn-prev">←</swp-nav-button>
|
|
<swp-nav-button id="btn-next">→</swp-nav-button>
|
|
</swp-nav-group>
|
|
|
|
<swp-week-info>
|
|
<swp-week-number>Demo</swp-week-number>
|
|
<swp-date-range id="view-info"></swp-date-range>
|
|
</swp-week-info>
|
|
|
|
<swp-nav-button id="btn-drawer" class="btn-small">Drawer</swp-nav-button>
|
|
</swp-calendar-nav>
|
|
|
|
<swp-calendar-container>
|
|
<swp-time-axis>
|
|
<swp-header-spacer></swp-header-spacer>
|
|
<swp-time-axis-content id="time-axis"></swp-time-axis-content>
|
|
</swp-time-axis>
|
|
<swp-grid-container>
|
|
<swp-header-viewport>
|
|
<swp-header-track>
|
|
<swp-calendar-header></swp-calendar-header>
|
|
</swp-header-track>
|
|
<swp-header-drawer></swp-header-drawer>
|
|
</swp-header-viewport>
|
|
<swp-content-viewport>
|
|
<swp-content-track>
|
|
<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-content-track>
|
|
</swp-content-viewport>
|
|
</swp-grid-container>
|
|
</swp-calendar-container>
|
|
</swp-calendar>
|
|
</div>
|
|
|
|
<script type="module" src="js/demo.js"></script>
|
|
</body>
|
|
</html>
|