Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture

Browse source
This commit is contained in:
Janus Knudsen 2025-07-24 22:17:38 +02:00
commit f06c02121c
38 changed files with 8233 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

122
wwwroot/index.html Normal file
View file

@ -0,0 +1,122 @@
<!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>