Updates header and viewport components to use CSS subgrid for more flexible layout
Improves grid structure by:
- Replacing fixed grid columns with subgrid
- Adjusting scrollbar and overflow properties
- Simplifying header and track element positioning
Introduces HeaderDrawerRenderer and HeaderDrawerLayoutEngine to support dragging events into an all-day header drawer
Enables dynamic event placement and conversion between timed and all-day events through new drag interactions
Implements flexible layout calculation for header items with column and row management
Extends DragDropManager to handle header zone interactions
Adds new event types for header drag events
Prevents text selection for calendar-related custom elements to improve user interaction and prevent accidental text highlighting
Enhances UI consistency across calendar components
Introduces comprehensive schedule management for resources:
- Adds DateService with advanced time and date utilities
- Implements ResourceScheduleService for managing work hours
- Creates ScheduleRenderer to visualize unavailable time zones
- Extends resource model to support default weekly schedules
Enables granular tracking of resource availability and working hours
Updates ScrollManager to dynamically sync header spacer height using ResizeObserver
Removes explicit spacer animation from HeaderDrawerManager
Simplifies header and scroll interaction by moving height synchronization logic to ScrollManager
Updates time axis and calendar to focus on 6-18 hour range
Modifies CSS to support nested selectors and time range configuration
Enhances DateService to support flexible week date generation
Introduces ScrollManager to synchronize time axis and header scrolling
Improves user experience by keeping time axis and header aligned during scrolling
Enables dynamic vertical and horizontal scroll tracking for calendar components
Introduces dependency injection container and composition root
Adds core services like DateService and NavigationAnimator
Simplifies CalendarOrchestrator with improved store handling
Implements mock stores and demo application for V2 calendar
Introduces a new color customization approach for calendar events using CSS custom properties and metadata
- Adds support for dynamic color assignment via event metadata
- Implements a flexible color utility class system
- Replaces hardcoded event type colors with a more generic color-mix() approach
- Provides broader color palette for event styling
Improves event description display using modern CSS container queries
- Adds responsive layout techniques for event descriptions
- Implements dynamic hiding/showing of description based on event height
- Adds fade-out effect for long descriptions
Enables more flexible and adaptive calendar event rendering
Extends event model to include optional description field
Enhances event rendering with:
- New description getter/setter in base event element
- Updated CSS grid layout for description display
- Dynamic description handling in event rendering
- Updated mock event data with descriptions
Improves visual information density and event context in calendar view
Removes redundant state tracking for all-day event layouts
Shifts from maintaining internal layout state to reading directly from DOM elements
Simplifies event handling and updates by using DOM as the source of truth
Improves performance by reducing unnecessary state management
Enhances event resizing functionality with smoother animation and more robust handling
Removes complex resize zone tracking in favor of simplified resize mechanism
Improves performance and simplifies event resize interactions
Cleans up unnecessary complexity in pointer and animation management
Adds locale support to the date header renderer and date service.
This change ensures that the day names are displayed correctly based on the user's configured locale.
The date header now uses the configured locale to display the day name in the correct language.
The day name is now displayed in uppercase.
Additionally, styles the date header to highlight today's date.
Enhances the visual feedback during and after event drag and drop operations in the calendar.
- Preserves the full opacity of the dragged event clone during the drag operation for better visibility.
- Applies a highlight class to the event after it's dropped to visually indicate the new location.
- Adds specific styling for the highlighted state based on event type.
Enhances the event drag and drop functionality by setting the initial position of the dragged event to prevent it from jumping to the top of the column.
Also adjust event transition for a smoother user experience.
Removes unused resize logic.
Replaces the previous rough event resizing implementation with a smooth, animated approach.
Uses pointer events for accurate tracking and adds a visual resize handle
for better user interaction.
Also refactors drag and drop to exclude resize handle.
Uses CSS classes for event hover highlighting,
instead of directly manipulating the background color.
This allows for more flexible and maintainable styling.
Re-enables resize handle manager.
Removes console logs.
Removes `pointer-events: none` from various calendar elements.
This ensures that the elements are correctly interactive,
allowing the user to click on them as intended.
Enhances the visual design of the resize handle for calendar events, making it more prominent and user-friendly.
- Updates the handle's styling with a darker background, increased size, and refined shadow.
- Replaces grip dots with grip lines for a cleaner look.
Enhances the resize handle indicator for calendar events by using cached event elements for efficiency.
This eliminates the need to constantly query the DOM, and only refreshes the cache on relevant event changes.
Additionally updates the resize indicator style for improved visual clarity and user experience.
Adds a resize handle manager to handle mouse hover
effects on calendar events and display a resize indicator.
This allows users to visually identify and initiate
event resizing by hovering near the bottom edge of an event.
Introduces a 3-phase algorithm in `EventStackManager` for dynamic event positioning. Groups events by start time proximity to determine optimal layout.
Optimizes horizontal space by using side-by-side grid columns for simultaneous events and allowing non-overlapping events to share stack levels. Supports nested stacking for late-arriving events within grid columns.
Includes comprehensive documentation (`STACKING_CONCEPT.md`) and a visual demonstration (`stacking-visualization.html`) to explain the new layout logic. Updates event rendering to utilize the new manager and adds extensive test coverage.
Introduces web components for event elements, separating timed and all-day events into distinct components for better organization and reusability.
This change also simplifies event rendering and drag-and-drop operations by leveraging the properties and lifecycle methods of web components.
Enhances date validation and timezone handling using DateService, ensuring data integrity and consistency.
Refactors event rendering and dragging to correctly handle date transformations.
Adds a test plan for event stacking and z-index management.
Fixes edge cases in navigation and date calculations for week/year boundaries and DST transitions.
Ensures correct display of all-day events when collapsed or expanded.
Improves the transition between collapsed and expanded states by
adjusting the overflow event visibility.
Improves the visual appearance of all-day events
by adjusting padding and margins.
Reduces padding in the all-day container and adds
margins to individual events for better spacing.
Ensures consistent all-day event row height calculation across CSS and TypeScript.
The all-day event row height calculation is adjusted by removing redundant container padding from the TypeScript constant and synchronizing the CSS variable with the event height.
Additionally, the layout engine is directly tested in the test file for better coverage.
Enhances the all-day event display when collapsed by showing four rows (three events plus an overflow indicator).
Updates the overflow indicator logic to dynamically display the number of hidden events and allow the user to expand the view.
