Enhanced multi-day event rendering and support | Beta#40
Merged
Conversation
switch minifier from terser to esbuild remove always-auth flag
The git+https protocol is more explicit and standard for npm packages, ensuring compatibility with npm's expectations for repository URLs.
chore: update repository URL to use git+https protocol
The registry URL was already set to the default npmjs.org, but the line was duplicated. Remove the redundant line to keep the configuration clean.
fix: restore npm registry URL to default
Update publish workflow to publish to the public npm registry instead of GitHub Packages. Change registry-url and update authentication token from GITHUB_TOKEN to NPM_TOKEN for proper npmjs.org authorization.
ci: switch npm registry from GitHub Packages to npmjs.org
The file was missing a trailing newline, which is a best practice and can cause issues with some text processing tools.
fix: fix missing newline at end of publish workflow file
- Bump version from 1.0.5 to 1.0.6 - Fix repository URL by removing redundant 'git+' prefix
- Replace simple ReactNode array with structured DataType containing start/end dates - Implement event sorting and filtering by date - Add visual rendering for multi-day events with calculated widths - Update playground example to demonstrate range events
- Fix event continuation logic to properly display multi-day events that span weeks - Update data item styling to show overflow and add tooltip for full text - Adjust width calculation for event items to maintain consistent spacing - Clean up component structure and remove unused console logs
- Add DataTypeList interface with week-specific date properties - Introduce isCurrentMonth flag to DateDataType for better visual distinction - Implement event slot assignment algorithm to prevent overlapping in week view - Add spacer elements in DateData component for consistent event alignment - Sort events by start date and duration for optimal layout - Handle multi-day events spanning across weeks with proper rendering
…day events - Fix event width calculation by using startDateWeek/endDateWeek properties instead of startDate/endDate - Adjust styling to properly handle events spanning multiple weeks - Fix indentation and formatting issues in calendar component - Add $isCurrentMonth prop to control date text color - Ensure proper event display across week boundaries
- Replace styled-components with CSS modules for better performance and maintainability - Add TypeScript declarations for CSS modules - Move inline styles to dedicated CSS files for Calendar and DateData components - Update class name handling to use classnames library - Improve event tooltip formatting in DateData component
The styled-components library is no longer used in the project, as the Calendar.styles.ts file has been deleted. This removal reduces bundle size and simplifies dependencies.
Introduce CalendarTheme interface to allow custom styling of default, selected, and today date cells. This enables visual customization through color and background color properties without requiring CSS class overrides.
Modify onClick handler to pass DateType instead of day number for more precise date selection. Add click handler to event items that calculates target date based on click position within the cell, allowing users to select specific dates by clicking on individual events rather than just the date cell.
- Add maxEvents prop to Calendar component with default value of 3 - Implement logic to show only limited number of events with "+ X more" indicator - Update CSS to style the "more events" indicator with hover effect - Update playground example to demonstrate the feature with maxEvents=2 - Fix color hex values to use lowercase for consistency
- Add `isSpacer` flag to DataTypeList to distinguish spacer events from real events - Add `totalEvents` prop to DateDataType for accurate hidden event calculation - Fix event display logic to properly handle spacer events in month view - Update hidden event count calculation to consider total events and visible real events - Remove debug console.log and simplify display array construction
Normalize all date comparisons to use .startOf("day") to prevent time-of-day differences from affecting sorting, overlap detection, and event rendering logic. This fixes issues where events spanning multiple days could be incorrectly positioned or filtered due to time component variations.
Move header-related styles and logic from Calendar component to dedicated Header component. This improves separation of concerns and makes the Calendar component more focused on its core functionality.
- Replace arrow-only navigation with Today button and improved navigation section - Update CSS to use Google Calendar-like styling with proper spacing and hover states - Change component syntax from arrow function to function declaration - Reorganize header structure for better visual hierarchy and usability
- Move DateData component to common directory as EventItem for reusability - Extract calendar cell styling into separate EventItem.module.css - Add support for event limit and "more events" indicator - Improve event display logic with proper hidden events calculation
- Add onEventClick and onMoreClick props to CalendarType interface - Pass callbacks down from Calendar to EventItem components - Connect onEventClick to event items and onMoreClick to "more" button
- Create CalendarContext to centralize state management for current date, view, and events - Add CalendarProvider wrapper component to initialize and provide context - Update Calendar component to use context state instead of local useState - Modify Header component to consume calendar context for navigation actions - Add CalendarContentType interface for internal component props - Maintain backward compatibility with existing props and callbacks
- Move component files to root src directory for cleaner structure - Create separate directories for utils, types, and context - Extract date utilities and constants into dedicated modules - Implement context provider for state management - Improve event rendering logic with proper week-based slot allocation - Fix tooltip text generation for multi-day events - Add CSS modules for styling separation
- Move complex date and event processing from Calendar.tsx to calendarLogic.ts - Introduce generateCalendarGrid function that handles grid generation, event sorting, and slot assignment - Simplify Calendar.tsx component by replacing inline logic with utility function - Improve code organization and maintainability while preserving existing functionality
- Create reusable Popover component with click-outside detection - Replace plain text "more events" with interactive button that triggers popover - Show all hidden events in popover with date header and clickable items - Convert CalendarProvider to regular function component for consistency - Style popover with proper positioning, shadows, and hover effects
Fix incorrect color assignment for current/non-current month dates and adjust popover item styling to indicate multi-day events. Prevent popover from reopening when already visible. - Swap currentMonth color logic in EventItem to properly dim non-current months - Add CSS classes to show event continuation in popover with clipped corners - Conditionally set showPopover to prevent unnecessary re-triggers - Update popover item padding and spacing for better visual hierarchy
- Update CSS modules for Calendar, Header, EventItem, and Popover with modern design tokens - Improve arrow icons to use currentColor for better theme consistency - Adjust calendar layout with better spacing, borders, and shadow effects - Refactor Calendar.tsx to destructure props and improve readability - Reduce maxEvents from 2 to 1 in playground example for testing
Add calculateMaxEvents utility to determine optimal event display count per cell. Remove hardcoded maxEvents from default props and playground example. Export common utilities from utils index for better module organization.
- Extend DataType interface to include optional color field - Apply color to event items in both EventItem and Popover components - Update playground examples with color demonstrations
- Replace JSON config (.releaserc) with CommonJS (release.config.cjs) for flexibility - Add @semantic-release/git plugin to automatically commit version updates - Simplify GitHub Actions workflow by removing custom version parsing logic - Update branch order in workflow for consistency
- Move constants from utils to dedicated constants module - Add default theme merging in EventItem for better customization - Update package.json exports to include CSS styles - Remove unused exports and clean up imports
- Add useResizeObserver hook to dynamically adjust calendar dimensions - Remove fixed width/height from default props and use container size instead - Update CSS to support fluid layout and overflow scrolling - Fix maxEvents calculation to handle zero value correctly - Export new hooks module from utils index
- Modify build script to clean dist directory before building on Windows - Add MIT license file - Rewrite README with comprehensive documentation, usage examples, and API reference
- Extract inline data to a separate eventsList variable for better readability - Replace EDayType import with DataType import and use type-only import - Remove deprecated Calendar props (dayType, width, height, pastYearLength, futureYearLength, theme) - Wrap Calendar in a div with fixed dimensions instead of using width/height props - Comment out unused CSS import
Enhanced multi-day event rendering and support
|
🎉 This PR is included in version 1.1.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR introduces improvements to event rendering in the calendar component, specifically focusing on multi-day events and their visual representation across week boundaries.
Changes:
Implemented support for events spanning multiple days with improved visual rendering.
Fixed event rendering logic to correctly handle week boundaries, preventing visual glitches.
Updated package-lock.json to ensure consistent dependency versions.
Minor updates to CI/CD configuration.