ad2df353b5
Introduces settings service for managing tenant-specific calendar configurations Enables dynamic workweek presets with configurable work days Improves view switching with enhanced UI components Adds flexible calendar rendering based on tenant settings Extends DateService to support workweek date generation
74 lines
2.7 KiB
HTML
74 lines
2.7 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 V2</title>
|
|
<link rel="stylesheet" href="css/v2/calendar-v2.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="team">Team</button>
|
|
<button class="view-chip" data-view="department">Dept</button>
|
|
</swp-view-switcher>
|
|
|
|
<!-- Workweek preset dropdown -->
|
|
<select id="workweek-select" class="workweek-dropdown">
|
|
<option value="standard">Man-Fre</option>
|
|
<option value="compressed">Man-Tor</option>
|
|
<option value="midweek">Ons-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>V2 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/v2-demo.js"></script>
|
|
</body>
|
|
</html>
|