feat(v2): localization support, custom renderers, and comprehensive testing#62
Merged
Jaganath-MSJ merged 47 commits intodevfrom Apr 8, 2026
Merged
feat(v2): localization support, custom renderers, and comprehensive testing#62Jaganath-MSJ merged 47 commits intodevfrom
Jaganath-MSJ merged 47 commits intodevfrom
Conversation
Fixing the build issue
- Add ESLint with TypeScript and React plugins for code quality - Include linting npm scripts for manual and auto-fix runs - Configure ESLint to ignore build and storybook directories
This resolves potential dependency conflicts when installing packages with mismatched peer dependencies, ensuring a smoother installation process.
- Add .prettierrc with formatting rules and .prettierignore file - Integrate eslint-config-prettier to avoid conflicts between ESLint and Prettier - Update package.json with format scripts and add eslint-config-prettier dependency - Apply Prettier formatting to existing code (quotes, semicolons, trailing commas) - Fix missing newline at end of file in index.css and preview.ts
- Add weekStartsOn and weekEndsOn props to various views - Update WeekView to calculate days based on config - Modify MonthView to generate custom week range grids - Extend useMonthGrid hook to accept week boundaries - Set default values (0 for Sun, 6 for Sat) in constants
… range - Add minHour and maxHour props to Calendar component and default constants - Update TimeColumn, DayColumn, DayView, WeekView and CurrentTimeLine to respect the time boundaries - Filter events in useDayEventLayout hook to only include those within the specified hour range - Adjust event positioning and current time line calculation based on minHour offset - Hide current time line when current time is outside the displayed range
Add storybook examples for the newly introduced props: - WithTimeLimits story in DayView and WeekView to demonstrate minHour/maxHour - CustomWeekStartEnd story in MonthView and WeekView to show weekStartsOn/weekEndsOn Update README and FEATURES documentation to include these new props
… display Add a new boolean prop showAdjacentMonths to CalendarProps that controls whether dates from adjacent months should be displayed in the month view. This provides users with the option to hide empty cells from previous/next months for a cleaner interface when desired. The prop defaults to true to maintain backward compatibility with existing behavior.
…display - Introduce new `customDays` view type for displaying 1-10 consecutive days - Add `CustomDaysView` with time grid layout and configurable day count - Update CalendarContext to handle navigation for custom day ranges - Extend Header component for date range and navigation in custom views - Add Storybook stories for custom day configurations (1, 3, 5, 10 days) - Include validation to ensure customDays is between 1 and 10 inclusive
…ures - Add storybook examples demonstrating showAdjacentMonths prop behavior - Update FEATURES.md to document adjacent months functionality and customDays view - Update README.md with customDays view example and prop documentation - Extend ECalendarViewType type definition to include "customDays"
- Rename CALENDAR_CONSTANTS to LAYOUT_CONSTANTS to better reflect its purpose - Move calendar-related constants from time.ts to new calendar.ts file - Fix typo in CALENDER_STRINGS to CALENDAR_STRINGS - Update all imports to reference new constant names and locations - Remove BOM character from theme.ts file
Move CalendarClassNames, ThemeStyle, and CalendarTheme interfaces from calendar.ts to a new theme.ts file for better organization. Update calendar.ts to import these types from the new module and re-export them via the main index.ts barrel file.
- Change CalendarEvent interface from color?: string to style?: CSSProperties - Update all event rendering components to use style prop with fallback to default color - Modify storybook examples and playground to use style.backgroundColor instead of color - This allows custom styling beyond just background color (e.g., borders, gradients)
Update all documentation files to reflect the change from `color` to `style` property in the CalendarEvent interface. Add migration guide section for v1.2.0 breaking change and include new Storybook stories demonstrating event styling customization.
Remove the 72-character line length restriction for commit message bodies to allow more flexible formatting.
- Add renderEvent prop to allow custom rendering of event items across all views - Add renderHeader prop to enable custom header component with navigation controls - Add renderHourCell prop for custom hour slot rendering in time grid views - Add renderDateCell prop for custom date cell rendering in month and week views - Update all view components (DayView, WeekView, MonthView, CustomDaysView, ScheduleView) to pass through render props - Update core components (Popover, AllDayBanner, DayColumn, DayWeekEventItem, MonthEventItem) to support custom rendering - Extend CalendarProps interface with new renderer type definitions
- Add comprehensive documentation for custom renderer props (renderEvent, renderHeader, renderHourCell, renderDateCell) in README.md and FEATURES.md - Update CustomView story title for better clarity in Storybook navigation - Add example story demonstrating all custom renderers in action
…change When enabled, changing the calendar view (e.g., from Month to Week) will automatically reset the selected date to today. This provides better UX when users switch views and want to quickly see the current period.
Add a new `showAllDayRow` prop to the Calendar component, allowing users to hide the all-day event banner at the top of the Day and Week views. When set to false, all-day and multi-day events are rendered within the main time grid, spanning from the configured minHour to maxHour. This provides more layout flexibility for applications that do not require a separate all-day section. - Extend dayjs with isBetween plugin to support date overlap checks. - Update layout hook logic to conditionally include all-day/multi-day events in the grid. - Add storybook example demonstrating the feature.
Introduce `renderScheduleSeparator` prop to Schedule view, allowing custom UI components to be rendered between date groups. This provides visual separation and customization options for multi-day schedules. The default border is conditionally hidden when a custom separator is provided.
Introduce a new prop to control overlapping event layout in day/week/custom views. When set to 0 (default), events use tiled layout with width expansion. When set to a positive percentage (e.g., 15), events stack with offset creating a layered appearance. This provides visual distinction for concurrent events while maintaining clear time boundaries.
- Replace CustomView.stories.tsx with enhanced CustomDayView.stories.tsx featuring mock events and improved layout - Update FEATURES.md with detailed descriptions of new calendar capabilities including all-day row, event overlap styling, and custom separators - Extend TEST_CASES.md with test scenarios for new props and view behaviors - Update README.md props table with showAllDayRow, eventOverlapOffset, resetDateOnViewChange, and renderScheduleSeparator
Add comprehensive test stories covering different view types, time formatting, user interactions, layout constraints, and edge cases. These stories help verify the calendar component's behavior across various scenarios including overlapping events, controlled state, time range limits, and data validation.
…events - Add `enableEnrichedEvents`, `eventsAreSorted`, `isEventOrderingEnabled`, and `sortedMonthView` props to skip expensive computations - Support pre-sorted and pre-filtered events via `enrichedEventsByDate` to reduce runtime processing - Bypass layout algorithms when ordering is disabled for faster rendering - Update all view components and hooks to accept new performance options
Ensure event z-index stays below timeHeaderSpacer (z-index: 15) and stickyTopContainer (z-index: 20) to prevent visual stacking issues. Also sets columnIndex to 0 when ordering is disabled for consistent DOM stacking.
- Add documentation for `enableEnrichedEvents`, `enrichedEventsByDate`, `eventsAreSorted`, `isEventOrderingEnabled`, and `sortedMonthView` props in README.md - Document performance optimization strategies in FEATURES.md - Add test cases for performance options in TEST_CASES.md - Create Performance.stories.tsx with stories demonstrating optimization techniques for handling large event datasets
- Configure vitest with jsdom environment and setup file - Add test script commands to package.json - Create initial unit tests for date utilities and Calendar component - Install required testing dependencies (@testing-library, jsdom, vitest)
…ontext - Add formatting.test.ts for generateTooltipText and getGmtOffset functions - Add common.test.ts for calculateMaxEvents, isAllDayEvent, and isMultiDay functions - Add CalendarContext.test.tsx for CalendarProvider and useCalendar hook - Tests cover various view types, date manipulations, and edge cases
- Test useEvents hook filtering and enriched events behavior - Test useAllDayBanner event stacking and visibility logic - Test useResizeObserver observation and size updates - Test useScheduleView event grouping and time/title rendering - Test useMonthGrid Tetris event placement and ordering options - Test useDayEventLayout overlapping event handling and layout modes
- Add tests for TimeColumn, DayColumn, CurrentTimeLine, DayWeekEventItem, MonthEventItem, AllDayBanner, Header, and Popover components - Verify rendering, user interactions, and edge cases for each component - Use Vitest and Testing Library for consistent testing approach
- Add DayView test file covering header rendering, custom date cell, and event display - Add WeekView test file verifying week headers, custom rendering, and event layout - Add CustomDaysView test file for custom day range rendering and event handling - Add MonthView test file for grid headers, date clicking, and custom renderers - Add ScheduleView test file for empty state, grouped events, and click handlers
This ensures tests are automatically run on every commit, catching regressions early.
- Sync external selectedDate prop changes to calendar context - Fix year list calculation to include current year - Add comprehensive tests for edge cases and integration scenarios - Improve type safety in CalendarContentProps interface
Add optional testId prop to CalendarProps to allow setting data-testid attributes throughout the calendar components. This enables easier end-to-end testing by providing stable selectors for all major calendar elements including views, headers, and event items. The testId prop is propagated through the CalendarContext and used to generate consistent test identifiers across the component tree.
Wrap component tests in CalendarProvider to ensure they have the required context for proper rendering. This resolves test failures that occurred when components relied on context values that were previously missing.
- Update event items and select elements to include unique identifiers - Use event IDs and component IDs to create predictable selectors - This enables more reliable and maintainable test automation
- Add `locale` and `localeMessages` props to Calendar component to support localization - Update `formatDate` utility to accept locale parameter for dayjs formatting - Replace hardcoded day and month name arrays with dynamic generation using dayjs locale - Pass locale through all view components (DayView, WeekView, MonthView, etc.) - Update header to use localized strings for "Today", view labels, and month names - Ensure tooltips and event times respect the specified locale - Provide default English messages while allowing full customization via localeMessages BREAKING CHANGE: add locale and localeMessages props for internationalization
Migrate from deprecated defineConfig API to tseslint.config with explicit plugin and rule configuration. This ensures compatibility with the latest ESLint flat config system and provides more explicit control over plugin configurations.
- Replace dayjs with luxon across all components, hooks, and utilities - Update date method calls to use luxon's API (toJSDate(), toFormat(), plus/minus, hasSame, etc.) - Adjust date format strings to match luxon's syntax (yyyy-MM-dd, HH:mm, etc.) - Update test files to use luxon-compatible assertions and mock data - Add @types/luxon to devDependencies and remove dayjs from dependencies - Fix date comparison logic to use luxon's comparison operators and methods - Update week day and month name generation to use luxon's Info utilities BREAKING CHANGE: The calendar now uses Luxon instead of Day.js for all date manipulation.
- Change Luxon's duration/interval unit from singular (day, month, minute) to plural (days, months, minutes) as required by the API - Add missing single quotes around 'T' in ISO date format strings (yyyy-MM-dd'T'HH:mm:00) - Fix weekEnd calculation to use processedWeek length instead of hardcoded index 6 - Render Popover content via React portal to ensure proper positioning - Update story imports to use dateFn utility instead of direct DateTime import BREAKING CHANGE: Units for Luxon durations/intervals are now plural, and ISO formatting with single quotes around 'T' is now mandatory.
- Add `locale` and `localeMessages` props for internationalization - Update date formatting functions to use locale-aware formatting - Add Storybook stories demonstrating various localization scenarios - Add comprehensive unit tests for localization features - Update documentation with localization examples and API reference
Update package.json to reference the local version of calendar-simple via file protocol instead of the published npm package. This allows for testing changes directly in the playground without needing to publish. Also remove the locale override props from the App component as they are no longer needed for current testing.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Change list item markers from asterisks to hyphens to maintain consistent formatting throughout the document.
This is required to allow the workflow to access repository contents during CI runs.
Remove Node.js 18 from the testing matrix as it is no longer supported. Simplify the `build` script by removing the manual `dist` folder cleanup, as Vite handles this automatically.
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
2 participants
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.
Pull Request Checklist
Description
This PR introduces the Version 2 feature set, representing a major overhaul of the calendar date handling. It migrates the primary runtime date engine from
dayjstoluxonto support advanced native internationalization (i18n).Additionally, it adds robust customizability via new render prop models (
events,header,hour, anddatecells) and adds a variety of highly-requested props out of the box (likecustomDays,eventOverlapOffset, andshowAdjacentMonths). It also significantly upgrades the underlying developer tooling by incorporating fully localizedVitestunit tests and standardizing conventional commit linting in pre-commit hooks.Type of change
How Has This Been Tested?
The following tests were introduced and passing to ensure everything works properly:
Vitestunit/functional tests on components, context, styling layouts, and formatting features.data-testidprops on interactive elements.npm run build)