Major calendar overhaul with Day/Week/Schedule views, all-day event support, and comprehensive documentation | Beta Version#52
Merged
Jaganath-MSJ merged 50 commits intobetafrom Mar 8, 2026
Merged
Conversation
- Add new DayView component with hourly time grid layout - Add MonthView component extracted from main Calendar for modularity - Implement view selector in Header to switch between month/week/day views - Extend CalendarContext to support view state management - Add CSS modules for DayView and MonthView components - Update type definitions to support CalendarViewType - Refactor Calendar component to conditionally render views based on state
- Rename `data` prop to `events` across components for clarity - Sync `view` prop from props to context to control calendar view - Adjust DayView height to account for header - Update default calendar props and types accordingly
…ypes - Replace CalendarViewType string union with ECalendarViewType enum - Replace DAY_TYPE constant with EDayType enum - Update imports and exports accordingly - Improve type safety and maintainability
…factor demo Update the playground to use the local source of calendar-simple instead of the published npm package. This allows testing the latest changes directly. Also refactor the demo data generation to better showcase day/week views with precise datetime events and improve event categorization.
Introduce a new utility function to calculate event positions for overlapping events in day view. This replaces the previous simple top/height calculation with a column-based layout algorithm that properly handles overlapping events by distributing them horizontally. - Add calculateEventLayout function that groups overlapping events into clusters - Assign columns within each cluster to prevent visual overlaps - Update DayView component to use the new layout utility - Add Storybook example demonstrating overlapping event rendering - Update playground data to test overlapping scenarios
- Implement sweep-line algorithm for accurate cluster grouping - Add greedy column assignment with expansion to fill available space - Fix event width calculation using CSS custom properties - Ensure minimum event height and proper z-index stacking - Handle edge cases like zero-duration events
…ties - Remove columnIndex, totalColumns, and clusterSize from DayEventLayout interface - Rename internal properties from _prefix to regular names for clarity - Simplify layout calculation by removing redundant cluster size parameter - Clean up playground demo data by removing commented/test events
- Change default event duration from 60 to 1 minute when no end date is provided - Add responsive event item styling for small and tiny time slots - Improve tooltip formatting to handle events without end dates
- Move EventItem component to its own directory with dedicated styles - Create new Popover component for displaying overflow events - Improve code organization and maintainability by separating concerns
- Introduce new WeekView component with time grid layout - Update calendar header navigation to support week and day views - Add CSS module for week view styling - Integrate week view into main calendar component with view switching logic - Extend event calculation utilities to support weekly layout
- Remove events from CalendarContext and pass them directly to views - Simplify NEXT/PREV actions using view as unit parameter - Add onViewChange callback to CalendarType interface - Remove currentDate prop from view components, use context instead - Clean up Header month navigation logic
- Create TimeColumn component to display hour slots - Create DayColumn component to render event slots and layout - Create DayWeekEventItem component for day/week event rendering - Extract MonthEventItem into separate component with its own styles - Move shared CSS from view modules to component modules - Add generateTooltipText utility for consistent event tooltips - Update DayView and WeekView to use new components
- Add DATE_FORMATS constant to consolidate date format strings - Add CALENDAR_ACTIONS constant for action type strings - Extend CALENDAR_CONSTANTS with new height constants and default color - Replace hardcoded strings with constants across components - Use ECalendarViewType enum values instead of string literals
Add is12Hour prop to calendar configuration to allow displaying times in 12-hour format (hh:mm A) instead of 24-hour format. This includes updates to: - Date constants to add TIME_12H format - All calendar view components (Day, Week, Month) - Event tooltips and time displays - Time column rendering
Add an optional `id` field to the DataType interface to uniquely identify calendar events. Use this id as the React key for event components (DayWeekEventItem, Popover items, MonthEventItem) to improve rendering performance and stability. Extract view options into a constant array for cleaner code in the header dropdown. Update playground example data to include sample ids.
Introduce a new "schedule" view that displays events grouped by date in a vertical list, similar to Google Calendar's agenda view. The view includes date headers, event times, colored dots, and supports multi-day events with appropriate labeling. Also updates the view selector and playground example to include the new view.
- Use 'month' as unit when navigating in schedule view instead of view type - Remove unused imports and dead code (current time line, table styles, DataType) - Export ManipulateType from date utils for type safety
- Update header to show dynamic title based on current view (day, week, schedule) - Add day header styling with day name and number in day view - Pass events prop to header for schedule view date range calculation - Propagate dayType prop to DayView component - Refactor DayColumn props to extend CalendarContentType
- Add view field to CalendarContentType to track current calendar view - Change is12Hour from optional to required boolean with default false - Add new date format constants for consistent date formatting across views - Update all view components to use proper CalendarContentType props - Fix date formatting in various components to use centralized constants - Add day header improvements to DayView showing day name and number
- Rename `DataType` to `CalendarEvent` and `CalendarType` to `CalendarProps` for better semantic meaning - Rename `DataTypeList` to `EventListType` and `CalendarContentType` to `CalendarContentProps` - Replace `isSelectDate` prop with `selectable` for clearer intent - Update `currentDate` references to `selectedDate` in context and views - Remove unused date utility functions and simplify type exports - Update default props to include `classNames` and reorder for consistency
Update the navigation logic for schedule view to use "day" instead of "month" when moving to next/previous periods. This ensures consistent navigation behavior across all calendar views. Also remove default theme from constants and add today styling support to schedule, day, and week views.
Add missing classNames properties to DayView, WeekView, MonthView, and ScheduleView components to allow custom styling of all calendar elements. This provides consistent styling API across all view types and enables fine-grained CSS customization for time slots, day headers, schedule items, and other UI components.
- Change EDayType keys from 'fullName'/'halfName' to 'full'/'half' for consistency - Update all references to use new constant names - Import CSSProperties type explicitly instead of using React.CSSProperties - Use Dispatch type from React instead of React.Dispatch
…rver - Remove .calendarContainer CSS class and replace with inline styles to set width/height - Add optional `notNeeded` parameter to useResizeObserver hook to skip observation when dimensions are provided - Pass width/height props to skip resize observation when dimensions are explicitly set - Import CSSProperties and useRef for better type safety and consistency
- Split monolithic Calendar.stories.tsx into separate files for each view (Month, Day, Week, Schedule) - Each view file includes relevant stories showcasing specific features and configurations - Maintain all existing functionality while improving Storybook navigation and maintainability
- Add flexbox properties to header for better wrapping on small screens - Make calendar container use flex column layout to prevent overflow issues - Fix time column positioning to remain visible during horizontal scrolling - Add horizontal scrolling support to day and week views - Refactor month view to use flex layout with sticky headers - Ensure consistent box-sizing across components
- Introduce AllDayBanner component to display multi-day events - Filter single-day events from main grid layout to prevent duplication - Implement row-based layout algorithm for overlapping multi-day events - Support clipped edges for events that extend beyond visible date range
Add a "more" chip to show count of hidden all-day events beyond the first three rows, allowing users to expand and view all events. This improves usability when many all-day events are scheduled on the same day.
- Add GMT+00 label and expand/collapse button to the time header spacer - Adjust TIME_12H format to show only hour with AM/PM - Improve hidden events logic: show "+ X more" only when 2+ events are hidden - Increase effective max rows when hiding would take same space as showing - Refactor layout to use bannerWrapper for better structure
Move the complex layout calculation logic from the AllDayBanner component into a dedicated utility function getAllDayBannerLayout. This improves code separation, maintainability, and reusability while keeping the component focused on rendering.
- Extract sticky positioning into dedicated `.stickyTopContainer` for DayView and WeekView to ensure consistent header behavior - Add background color and subtle shadow to sticky container for better visual separation - Implement dynamic GMT offset label in AllDayBanner based on user's timezone - Add grid background to AllDayBanner for visual column separation
Add a visual indicator that shows the current time as a red line with a circle in day and week views. The indicator updates every minute and only appears when the `showCurrentTime` prop is true and the displayed day is today. This helps users quickly reference the current time while scheduling events. - Add `showCurrentTime` prop to CalendarProps - Create CurrentTimeLine component with CSS module - Update DayView and WeekView to conditionally render the indicator - Separate 12-hour time format constants for hour-only and hour:minute display - Update playground example to demonstrate the feature
- Add maxEvents prop to CalendarContent and views to control visible rows in all-day banner - Refactor banner layout logic into getBannerViewState for better state management - Add tooltips to events in schedule and banner views using generateTooltipText - Show GMT offset in banner header and clean up CSS comments - Improve expand/collapse behavior to show "+X more" only when count > 0
- Add `isAllDayEvent` utility to detect date-only events - Exclude all-day events from regular event layout in month view - Include all-day events in banner view alongside multi-day events - Improve schedule view to properly display all-day and multi-day events with correct day numbering - Fix time display for events spanning midnight/end-of-day boundaries - Sort date groups chronologically in schedule view
Add autoScrollToCurrentTime prop to CalendarProps that enables automatic scrolling to the current time in DayView, WeekView, and ScheduleView when enabled. DayView and WeekView scroll vertically to the current hour, while ScheduleView scrolls horizontally to today's date. This improves user experience by immediately showing relevant time slots without manual scrolling. Update playground example to demonstrate the feature and add Storybook stories for all three view types.
This change centralizes dayjs usage through a single exported function to improve maintainability and allow for easier future replacements or modifications of the date library.
…ectable dates The onDateClick callback was being called before checking if the date was selectable, causing it to fire even when the date wasn't selectable or was already selected. The callback is now only invoked when a new, selectable date is clicked.
- Add showCurrentTime and autoScrollToCurrentTime props to calendar configuration - Filter out invalid events where end date occurs before start date - Pass validated events to CalendarContent component
…e test cases Update the event generation function to use a systematic test suite covering edge cases like zero/negative duration, overlapping events, and various date formats. This improves the playground's utility for testing calendar component behavior across different scenarios.
- Extract theme variables and constants into separate files for better maintainability - Reorganize component structure with clear separation of core components, views, and UI elements - Move hooks and utilities into dedicated directories with focused responsibilities - Split monolithic type definitions into modular files (calendar.ts, events.ts) - Create dedicated CSS modules for each component to improve style isolation - Update imports to reflect new file structure throughout the codebase
Move complex event grouping, time rendering, and title formatting logic from ScheduleView component into a dedicated useScheduleView hook. This improves code organization, reduces component complexity, and enables reuse of the scheduling logic across different components. Also remove unused imports from DayView, AllDayBanner, and common utilities, and reorder enum declarations in Header component for better readability.
Add detailed JSDoc comments to all React hooks in the codebase to improve code documentation and developer experience. Each hook now includes: - File-level descriptions explaining the hook's purpose - Function-level documentation with parameter and return type definitions - Section comments within complex algorithms - Clear explanations of internal data structures and algorithms The documentation covers useEvents, useResizeObserver, useScheduleView, useDayEventLayout, and useAllDayBanner hooks, providing insight into their validation logic, layout algorithms, and data processing workflows.
Improve code documentation by adding detailed file-level and function-level JSDoc comments across all utility modules. This enhances maintainability and developer experience by clearly explaining the purpose, parameters, and return values of shared utility functions. - Add descriptive file headers explaining each module's role - Document all public functions with @param and @returns tags - Reorganize date.ts with logical section comments for better readability
- Update copyright year range in LICENSE file. - Update README to reflect new features (multiple views, time formatting, current time indicator) and API changes (renamed props, new types, classNames support). - Replace deprecated bundle size badge with unpacked size badge.
Add CONTRIBUTING.md with setup instructions, development workflow, and coding standards. Add CODE_OF_CONDUCT.md to establish community behavior expectations and enforcement procedures.
Add templates for feature requests, bug reports, and pull requests to standardize community contributions and improve issue tracking.
Add comprehensive Storybook stories demonstrating calendar features and interactions including time formats, event selection, navigation, theming, and overflow handling. Create detailed FEATURES.md documentation covering all calendar capabilities, customization options, and usage patterns to help developers understand the library's full potential.
Add a security policy document outlining supported versions and vulnerability reporting procedures. Provide a migration guide for users upgrading from v1.x to v2.0, detailing breaking changes and required updates.
Add TEST_CASES.md to document all supported features, configurations, and edge cases for the Calendar component. This serves as a testing manifest to ensure future updates preserve functional, interaction, and rendering logic across all views.
Major calendar overhaul with Day/Week/Schedule views, all-day event support, and comprehensive documentation
|
🎉 This PR is included in version 1.3.0-beta.1 🎉 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.
Overview
This PR introduces a massive architectural overhaul and feature expansion to the calendar core. It adds dedicated Day, Week, and Schedule views, introduces comprehensive support for all-day and multi-day events, refactors the underlying logic into clean, reusable hooks and components, and establishes a robust suite of community and technical documentation.
Key Changes
✨ New Features & Capabilities
DayView,WeekView, andScheduleViewcomponents with seamless view switching capability.AllDayBannerto day and week views with smart expand/collapse logic and expandable overflow for hidden events.🛠 Refactoring & Architecture
MonthView,DayView,WeekView, andScheduleView.useDayEventLayout,useMonthGrid,useScheduleView,useAllDayBanner).idfield for React keys.dayjscalls in favor of a centralized wrapper to ensure consistency.dataprop toeventsand synchronized theviewprop.🐛 Bug Fixes
DayView.onDateClickfrom firing on non-selectable dates inMonthView.divwrappers and conditionally invoked the resize observer.📖 Documentation & Community
DayView,WeekView,MonthView,ScheduleView) and added detailedFeatures.stories.CODE_OF_CONDUCT.md,CONTRIBUTING.md,SECURITY.md, and standard GitHub Issue/PR templates.README.md, addedMIGRATION.mdfor breaking changes, and created a comprehensiveTEST_CASES.mdandFEATURES.md.Type of Change