Adds functionality to collapse the all-day event rows when the number of rows exceeds a limit.
This improves the layout by preventing the all-day section from taking up too much space. A chevron button is added to allow users to expand/collapse the section.
Refactors drag and drop logic to use the dragged clone consistently, fixing issues with event handling and element manipulation during drag operations.
Also includes a fix where the original element is removed after a drag is completed.
Adds column bounds cache update after drag operations for improved column detection.
Refactors all-day event conversion during drag and drop to
use the event payload, improving code clarity and reducing
redundancy.
Removes unnecessary style settings and fixes column detection
logic. Addresses an issue where event removal occurred before
successful placement.
Refactors drag-to-all-day functionality to apply CSS styling and reposition the existing drag clone within the all-day container, rather than creating a new event element.
Centralizes all-day container creation in HeaderManager. Introduces `drag:mouseleave-header` to handle transitions from all-day back to timed events.
Ensures consistent styling and robust cleanup of drag clones for a smoother user experience.
Removes the `swp-allday-event` custom element, using `swp-event` for all-day events instead. All-day events are now distinguished by their parent `swp-allday-container`. Simplifies element management and CSS selectors.
Enhances the all-day event selection by creating transparent, full-height columns for each day, which enables more accurate and reliable hover detection across all-day events.
Now selects all-day events by hovering on the entire column, not just day headers.
Refactors drag and drop logic to dynamically find the dragged element, ensuring correct behavior even when the DOM changes during the drag operation.
Creates all-day container if it doesn't exist.
This resolves issues where drag and drop operations would fail if the original element was no longer present in the DOM or if the container didn't exist.
Improves code organization and maintainability by separating concerns related to all-day event rendering, header management, and event resizing.
Moves all-day event rendering logic into a dedicated `AllDayEventRenderer` class, utilizing the factory pattern for event element creation.
Refactors `AllDayManager` to handle all-day row height animations, separated from `HeaderManager`.
Removes the `ResizeManager` and related functionality.
These changes aim to reduce code duplication, improve testability, and enhance the overall architecture of the calendar component.
Enhances drag and drop behavior by introducing free positioning during auto-scroll and snapping to grid intervals.
- Introduces a `calculateFreePosition` method to allow events to follow the mouse exactly during auto-scroll.
- Modifies the drag move event to emit the snapped position during normal drag behavior.
- Updates event rendering to use grid settings for snap intervals.
- Updates grid styles to configure CSS variables dynamically.
Refactors the header animation to animate the calendar header's height instead of just the all-day container.
This change improves the perceived performance of the animation. It also reduces animation duration.
Simplifies header animation logic by leveraging CSS Grid for height transitions.
This change removes the direct height animation of the calendar header and relies on CSS Grid's auto row feature to manage the header expansion.
It also removes the manual spacer height calculations in Typescript, and relies on CSS variables to control this.
This results in a smoother and more efficient animation, especially when all-day events are present.
Simplifies and improves the all-day event rendering process, ensuring
consistent container creation and proper placement of events.
- Ensures all-day containers are consistently created during header
rendering, preventing potential issues with event placement.
- Removes the complex and unreliable mouseover detection for all-day
conversion, simplifying the event dragging logic.
- Eliminates the dynamic all-day row height calculation, relying on
CSS for layout control.
- Prevents errors when the all-day container is missing.
Refactors all-day event container creation to be lazy, improving
initial load performance. The container is now created and animated
into view only when needed, specifically when the first event is
dragged into the all-day section. This avoids unnecessary DOM
manipulation and improves the perceived responsiveness of the
calendar.
Ensures the all-day event container's grid layout is correctly updated to reflect the number of rows needed, even when the overall height doesn't change.
This prevents layout issues when events are rearranged without triggering a height recalculation.
Also updates the grid template when the height is updated in the BaseEventRenderer.
Handles dragging of both timed events (converting to all-day) and existing all-day events to different days.
Refactors all-day height recalculation to support animated transitions for a smoother user experience when all-day event counts change.
Uses event delegation for header mouseover detection.
Updates ScrollManager to listen for header height changes.
Enhances the drag and drop experience for all-day events by expanding the header to display the all-day row when dragging an event over it.
Introduces constants for all-day event layout.
Improves event rendering by introducing dedicated event
renderers and streamlining event display logic.
- Adds a base event renderer and specialized date and
resource-based renderers to handle event display logic.
- Renders all-day events within a dedicated container in the
calendar header.
- Removes the direct filtering of all-day events from the
`GridManager`.
- Fixes an issue where the 'Summer Festival' event started on the
wrong date.
The changes enhance the flexibility and maintainability of the
calendar, provide dedicated containers and styling for allday events and fix date issues related to certain events
Introduces work hours management with weekly default and date-specific overrides to support per-column scheduling.
Calculates and applies non-work hour overlays to columns.
This allows users to visualize working and non-working times.
Adjusts event rendering to prevent overlap with horizontal timelines.
Refactors how the calendar week information is updated to use the actual rendered column dates, ensuring accuracy after workweek changes. It also adjusts event rendering to target the swp-calendar-container element, preventing rendering issues. The change also addresses a styling issue that was preventing the scroll bar from appearing in the correct location.
Replaces custom scrollbar implementation with native scrollbars for better performance and accessibility.
Adds configuration options for scrollbar styling, including width, color, track color, hover color, and border radius.
Synchronizes week header and time axis scrolling with the scrollable content.
Improves event rendering by adding styling, filtering out all-day events (handled by GridManager), and calculating accurate positioning within the time grid.
Optimizes grid updates to avoid unnecessary rebuilding, instead updating only the week header for all-day events, leading to better performance.
Improves calendar week view by adding header sections.
This change introduces two new header sections, styled with an orange background, to the calendar week view. These sections are positioned in the second row of the week header, enhancing the visual organization and potentially providing space for additional information or actions related to the week view. The overall height of the header has also been adjusted to accommodate the new row.
Updates mock event data to reflect a more recent week and includes events spanning early/late hours.
Enhances event rendering by adjusting the top and height styles for better visual appearance.
Refactors CSS to improve grid line display and event hover effects, and moves hour marker styles to a more appropriate CSS file.
Provides default fallback values for time boundaries using CSS variables.
Updates mock event data to reflect future dates for testing purposes.
Adds console logging in various managers to aid in debugging and understanding the event loading and rendering process.
Specifically, logs the number of loaded events, the first and last event details, and information about event rendering and time axis creation.
Also, adds execution permission for PowerShell scripts in the .claude settings.
Changes the calendar week view to dynamically adjust its width based on the `--day-column-min-width` CSS variable.
This allows for more flexible and responsive layouts, avoiding fixed widths.
Also, the base calendar CSS file is now included in the index file.
Updates the grid structure to correctly position the scrollbars.
Replaces fixed scrollbars with a grid-based layout using spacers and
a right column for a more integrated and maintainable solution.
This change addresses layout issues related to scrollbar positioning
and ensures better alignment across different browsers.
