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
Enhances calendar flexibility by introducing group-based column spanning and improving cross-mode event handling
Adds support for:
- Dynamic column grouping in date and resource modes
- Consistent event drag-and-drop across different calendar views
- More robust all-day event layout calculations
Improves event management logic to handle resource and date mode transitions more elegantly
Introduces new ResourceColumnDataSource and ResourceHeaderRenderer to support column rendering by resources instead of dates
Enables dynamic calendar mode switching between date and resource views
Updates core managers and services to support async column retrieval
Refactors data source interfaces to use Promise-based methods
Improves calendar flexibility and resource management capabilities
Implements polymorphic data seeding mechanism for initial application setup
- Adds Mock repositories for Event, Booking, Customer, and Resource entities
- Creates DataSeeder to automatically populate IndexedDB from JSON sources
- Enhances index.ts initialization process with data seeding step
- Adds mock JSON data files for comprehensive test data
Improves offline-first and development testing capabilities
Updates IndexedDB database schema to version 2
Adds support for bookings, customers, and resources stores
Includes new serialization methods for booking data
Extends events store with additional indexes for improved querying
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
Introduces ViewSelectorManager to handle view state and UI interactions
Separates view logic from configuration management
Adds explicit tracking of current calendar view
Enhances view selection and state management
Improves modularity and separation of concerns
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
Converts CalendarConfig to a pure static configuration management class with improved initialization and dependency handling
Removes event bus dependencies and simplifies configuration loading
Adds static methods for config management and initialization
Improves flexibility and reduces class complexity
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.
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 all-day event drag and drop handling for improved accuracy and performance.
Introduces a shared `ColumnDetectionUtils` for consistent column detection.
Simplifies all-day conversion during drag, placing events in row 1 and calculating the column from the target date.
Implements differential updates during drag end, updating only changed events for smoother transitions.
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.
