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

Improves grid layout and navigation

Browse source 
Refactors the calendar grid to support smoother navigation transitions by using separate week containers.

This change introduces a GridManager to handle grid rendering and interactions within these containers, enabling scroll synchronization and click event handling for each week view.

Also, configures the calendar to start at midnight and span a full 24-hour day, providing a more comprehensive view.
This commit is contained in:
Janus Knudsen 2025-07-25 00:24:15 +02:00
parent f06c02121c
commit b443649ced
12 changed files with 719 additions and 302 deletions
Download patch file Download diff file Expand all files Collapse all files

58
wwwroot/index.html
View file

@ -5,58 +5,12 @@
<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>
<!-- 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">
</head>
<body>
<swp-calendar data-view="week" data-week-days="7" data-snap-interval="15">