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

Renaming part 1

Browse source
This commit is contained in:
Janus Knudsen 2025-08-07 00:15:44 +02:00
parent 36ac8d18ab
commit 29811fd4b5
20 changed files with 1424 additions and 582 deletions
Download patch file Download diff file Expand all files Collapse all files

32
calendar-poc-single-file.html
View file

@ -64,7 +64,7 @@
swp-calendar-nav,
swp-calendar-container,
swp-time-axis,
swp-week-header,
swp-calendar-header,
swp-scrollable-content,
swp-time-grid,
swp-day-columns,
@ -228,7 +228,7 @@
}
/* Week container for sliding */
swp-week-container {
swp-grid-container {
grid-column: 2;
display: grid;
grid-template-rows: auto 1fr;
@ -237,19 +237,19 @@
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
swp-week-container.slide-out-left {
swp-grid-container.slide-out-left {
transform: translateX(-100%);
}
swp-week-container.slide-out-right {
swp-grid-container.slide-out-right {
transform: translateX(100%);
}
swp-week-container.slide-in-left {
swp-grid-container.slide-in-left {
transform: translateX(-100%);
}
swp-week-container.slide-in-right {
swp-grid-container.slide-in-right {
transform: translateX(100%);
}
@ -287,7 +287,7 @@
}
/* Week header */
swp-week-header {
swp-calendar-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--color-surface);
@ -522,8 +522,8 @@
<swp-calendar-container>
<swp-time-axis></swp-time-axis>
<swp-week-container>
<swp-week-header></swp-week-header>
<swp-grid-container>
<swp-calendar-header></swp-calendar-header>
<swp-scrollable-content>
<swp-time-grid>
@ -531,7 +531,7 @@
<swp-day-columns></swp-day-columns>
</swp-time-grid>
</swp-scrollable-content>
</swp-week-container>
</swp-grid-container>
</swp-calendar-container>
<swp-loading-overlay hidden>
@ -607,7 +607,7 @@
}
renderWeekHeaders() {
const weekHeader = document.querySelector('swp-week-header');
const weekHeader = document.querySelector('swp-calendar-header');
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
weekHeader.innerHTML = ''; // Clear any existing content
@ -818,12 +818,12 @@
animateTransition(direction, targetWeek) {
const container = document.querySelector('swp-calendar-container');
const currentWeek = document.querySelector('swp-week-container');
const currentWeek = document.querySelector('swp-grid-container');
// Create new week container
const newWeek = document.createElement('swp-week-container');
const newWeek = document.createElement('swp-grid-container');
newWeek.innerHTML = `
<swp-week-header></swp-week-header>
<swp-calendar-header></swp-calendar-header>
<swp-scrollable-content>
<swp-time-grid>
<swp-grid-lines></swp-grid-lines>
@ -844,7 +844,7 @@
container.appendChild(newWeek);
// Render new content in the new container using targetWeek
const tempHeader = newWeek.querySelector('swp-week-header');
const tempHeader = newWeek.querySelector('swp-calendar-header');
const tempColumns = newWeek.querySelector('swp-day-columns');
// Clear any existing content
@ -1027,7 +1027,7 @@
updateCalendar() {
// This method is now only used for initial render
document.querySelector('swp-week-header').innerHTML = '';
document.querySelector('swp-calendar-header').innerHTML = '';
document.querySelector('swp-day-columns').innerHTML = '';
this.renderWeekHeaders();
this.renderDayColumns();