v3.6.0
- Agenda List View: Added a new
createAgendaViewfactory for a scrollable agenda-style list layout. Events are grouped by day with configurable options includingdaysToShow,showEmptyDays, andtimeFormat(12h/24h). Supports both timed and all-day events, multi-day event continuation indicators, and full Content Slot integration. - Grid Date Click Callbacks: Added
gridDateClickandgridDateDoubleClickcallbacks to Month and Week views, enabling click and double-click handlers on empty date/time grid cells. - Mobile Event Detail as Content Slot: Migrated the internal
MobileEventDetailComponentto the Content Slot system, making the mobile event detail panel fully customizable via framework render props. - Keyboard Shortcuts Callbacks: Added lifecycle callbacks to the keyboard-shortcuts plugin (
onKeyDown,onKeyUp, and per-action hooks) for programmatic integration and custom shortcut handling. - Sidebar
onReorderCallback: Added anonReordercallback to the sidebar plugin, fired whenever the user drags calendars to reorder them in the list.
- Range Picker
startOfWeekProp: AddedstartOfWeekconfiguration to the range picker component so the calendar grid respects the locale or app-level week start setting. useEventDetailPanelAPI: MoveduseEventDetailPanelintouseCalendarApp, making the event detail panel controls accessible from the same unified app hook across React, Vue, Angular, and Svelte.- Framework Adapter Rendering: Updated core rendering and framework-specific adapters (Vue, Angular, Svelte) to align with the Content Slot architecture introduced in v3.5.0.
- View Rendering for Large Datasets: Significantly optimized event layout calculations across Month, Week, Day, and Year views for calendars with large numbers of events.
- Plugin Bundle Size: Reduced bundle size for the drag, keyboard-shortcuts, localization, sidebar, and UI packages by streamlining rollup configurations.
- Bundle Shrink & CSS Isolation: Reduced the core bundle footprint and eliminated residual CSS conflicts by refining the build pipeline and library import boundaries.
- fix(style): DayFlow internals remove Atomic CSS class names by @JayceV552 in https://github.com/dayflow-js/calendar/pull/106
- feat: add keyboard-shortcuts callbacks by @JayceV552 in https://github.com/dayflow-js/calendar/pull/108
- perf(core): shrink bundle and eliminate CSS conflicts by @JayceV552 in https://github.com/dayflow-js/calendar/pull/107
- fix: update core rendering and framework-specific adapters by @JayceV552 in https://github.com/dayflow-js/calendar/pull/111
- chore: code clean by @JayceV552 in https://github.com/dayflow-js/calendar/pull/113
- feat: range picker add startOfWeek props by @JayceV552 in https://github.com/dayflow-js/calendar/pull/114
- perf: reduce packages bundle size by @JayceV552 in https://github.com/dayflow-js/calendar/pull/115
- feat: add gridDateClick and gridDateDoubleClick to Month and Week views by @JayceV552 in https://github.com/dayflow-js/calendar/pull/117
- perf: improve view rendering for large data sets by @JayceV552 in https://github.com/dayflow-js/calendar/pull/118
- feat: add agenda list view support by @JayceV552 in https://github.com/dayflow-js/calendar/pull/119
- feat: sidebar plugin add componentsOrder by @JayceV552 in https://github.com/dayflow-js/calendar/pull/120
Full Changelog: https://github.com/dayflow-js/calendar/compare/v3.5.0...v3.6.0
v3.5.0
- Multi-calendar Events: Added native
calendarIdssupport on events. A single event can now belong to multiple calendars, stays visible as long as any linked calendar is visible, and renders with DayFlow's built-in multi-color striped styling.
- Style Self-Containment: Completed the style refactor so DayFlow no longer depends on internal atomic CSS classes or host-side
@sourcescanning.styles.cssandstyles.components.cssare now self-contained distribution artifacts. - Host Style Isolation: Tightened
df-*semantic styling contracts across core, UI packages, plugins, and dist CSS checks to reduce conflicts with UnoCSS, Tailwind, and other host styling systems. - Year / Day / Week View Polish: Refined several view-specific layout details, including year-view event rendering, day/week timezone labels, and overlay/token usage in complex UI surfaces.
- Added multi-calendar event documentation and showcase examples.
- Refreshed the website live demo controls and interactive examples.
- Updated setup and theme customization guidance to match the self-contained styling model and remove outdated
@source-based integration steps.
- refactor: replace useCalendarHeader function form with calendarHeader content slot by @JayceV552 in https://github.com/dayflow-js/calendar/pull/96
- refactor: unify calendar app config sync across framework adapters by @JayceV552 in https://github.com/dayflow-js/calendar/pull/98
- feat: add EventContextMenu.tsx and GridContextMenu.tsx by @JayceV552 in https://github.com/dayflow-js/calendar/pull/99
- feat: month/year view drag anchoring action redesign by @JayceV552 in https://github.com/dayflow-js/calendar/pull/101
- feat: extract ContextMenu and RangePicker into standalone UI packages by @JayceV552 in https://github.com/dayflow-js/calendar/pull/102
- feat: event add multi-calendars support by @JayceV552 in https://github.com/dayflow-js/calendar/pull/104
Full Changelog: https://github.com/dayflow-js/calendar/compare/v3.4.0...v3.5.0
v3.4.0
Mini calendar event dots style Day/Week View secondary timezone support
- Global Calendar Time Zone: Added
timeZonetouseCalendarApp/CalendarAppConfigas the primary display and editing timezone for all views. Day, Week, Month, and Year views now share the same calendar timezone semantics. - Secondary Timeline Refinement: Kept
secondaryTimeZonefor Day and Week views as a dedicated secondary timeline display setting, independent from the calendar's primary timezone. - Mini Calendar Event Dots: Added richer mini calendar event dot support, including calendar-color-aware dots with up to four unique indicators per day.
- Interactive Demo Controls: Updated the website interactive calendar controls to expose both the global timezone and the Day/Week secondary timezone with clearer guidance.
- Timezone Consistency Across Views:
- Unified event projection in Day/Week/Month/Year so view filtering, layout, and visible dates stay aligned with the configured calendar timezone.
- Canonical Callback Semantics:
- Editing in a different calendar timezone now behaves: switching timezone only changes display, while
onEventUpdate,onEventDrop, andonEventResizereturn canonical events after the edit is applied. - Aligned timed event creation flows such as quick create, context-menu paste, sidebar calendar drop, Month view create, and keyboard paste with
app.timeZone.
- Editing in a different calendar timezone now behaves: switching timezone only changes display, while
- Updated timezone documentation in English, Chinese, and Japanese to describe:
- the new app-level
timeZone - Day/Week-only
secondaryTimeZone - canonical callback semantics after drag/resize/edit operations
- the new app-level
- Refreshed the website interactive calendar help text and tooltips to match the new timezone model.
- feat: add source field to calendar type to display different calendar sources by @JayceV552 in https://github.com/dayflow-js/calendar/pull/80
- fix: all day event sort logic and update related document by @JayceV552 in https://github.com/dayflow-js/calendar/pull/81
- style: fix style.component.css layer order and dark mode reload bug by @JayceV552 in https://github.com/dayflow-js/calendar/pull/83
- feat: update calendar props for override build-in styles by @JayceV552 in https://github.com/dayflow-js/calendar/pull/86
- feat: add subscribe calendar callbacks by @JayceV552 in https://github.com/dayflow-js/calendar/pull/87
- fix: allow programmatic updates in read-only mode and hide mutation UI by @JayceV552 in https://github.com/dayflow-js/calendar/pull/88
- refactor: migrate calendar styles to shared df-* semantics and sync website by @JayceV552 in https://github.com/dayflow-js/calendar/pull/90
- feat: refactor subscription logic and enhance default protections by @JayceV552 in https://github.com/dayflow-js/calendar/pull/92
Full Changelog: https://github.com/dayflow-js/calendar/compare/v3.3.0...v3.4.0
v3.3.0
- Grid Year View: Added a new
gridmode forcreateYearView, providing a compact month-grid layout with heatmap intensity colors for event density visualization. @create-dayflowCLI: Introduced thenpm create dayflow@latestscaffolding tool. Interactively configures a new project with framework selection (React, Vue, Angular, Svelte), TypeScript support, and Tailwind CSS integration.renderSidebarHeader: Added arenderSidebarHeaderrender prop to the sidebar plugin, allowing full customization of the sidebar header area (e.g. user avatar, collapse toggle).
- Style Isolation: Fixed
tailwind-components.cssoverriding host application styles. DayFlow's component CSS no longer emits Tailwind utility classes or leaks bare pseudo-class selectors (:focus-visible,:checked) to the host app. bg-primaryPollution: Resolved context menu, sidebar merge menu, and calendar list items using the host application's--color-primaryinstead of DayFlow's own color variables. All interactive elements now usevar(--df-color-*)directly.- Month View Scroll: Clicking on cross-month dates (previous month's trailing dates in the first row, next month's leading dates in the last row) no longer triggers unwanted month navigation.
- Portal Color Scope: Added
df-portalclass to allcreatePortalroot elements so portaled components (context menus, dialogs, drawers) correctly inherit DayFlow's color token scope.
- feat: content slot support by @JayceV552 in https://github.com/dayflow-js/calendar/pull/65
- chore: release v3.2.2 by @JayceV552 in https://github.com/dayflow-js/calendar/pull/68
- style: separate CSS into 2 files for tailwind or none-tailwind app by @JayceV552 in https://github.com/dayflow-js/calendar/pull/70
- chore: update packages version by @JayceV552 in https://github.com/dayflow-js/calendar/pull/71
- docs: migration nextra to fumadocs by @JayceV552 in https://github.com/dayflow-js/calendar/pull/72
- feat: add grid year view(#44) by @JayceV552 in https://github.com/dayflow-js/calendar/pull/76
- fix: tailwind-components.css override host app styles by @JayceV552 in https://github.com/dayflow-js/calendar/pull/75
- feat: add create dayflow npx common line package by @JayceV552 in https://github.com/dayflow-js/calendar/pull/73
- feat: add renderSidebarHeader in sidebar plugin by @JayceV552 in https://github.com/dayflow-js/calendar/pull/77
- docs: update browser tab icon by @JayceV552 in https://github.com/dayflow-js/calendar/pull/74
Full Changelog: https://github.com/dayflow-js/calendar/compare/v3.2.0...v3.3.0
Release v3.2.0
- Drag & Drop Improvements:
- Added
onEventDropandonEventResizecallbacks to the drag plugin for better event handling. - Updated Month and Year View all-day event drag indicators for better visual feedback.
- Added
- View Enhancements:
- Added
secondaryTimeZonelabel support for Day and Week Views. - Added
timeFormatconfiguration for Day and Week Views. - Updated configuration options for
monthViewandyearView.
- Added
- Developer Experience:
- Introduced
oxlintfor faster linting and improved code quality. - Added
pre-commithooks andformat:checkscripts to ensure code consistency. - Migrated to
pnpm workspace catalogfor better dependency management. - Added
.editorconfigand improved VSCode settings/extensions recommendations.
- Introduced
- Scrolling: Optimized
MonthViewscrolling performance by memoizing scrollbar checks.
- Layout: Resolved
eventLayoutstacking issues and improved mobileWeekViewlayout. - Framework Support: Corrected
ng-packagrconfiguration schema path for Angular. - Build & Packaging:
- Fixed CSS export errors and website build issues.
- Removed duplicate
peerDependenciesinpackage.jsonfiles. - Fixed Tailwind CSS path configurations.
- UI/UX: Fixed an issue where the "+ more" click in the website had no reaction.
- Documentation: Corrected README image paths and updated view documentation.
- Improved Day/Week View event resize pointer display.
- Cleaned up Tailwind CSS class formatting.
- Resolved various lint warnings reported by
oxlint.
- feat: Mobile WeekView add compact and standard mode by @JayceV552 in https://github.com/dayflow-js/calendar/pull/57
- feat: add oxlint and editor settings by @imoize in https://github.com/dayflow-js/calendar/pull/58
- feat: Day/Week View add timeFormat and TimeZone Support by @JayceV552 in https://github.com/dayflow-js/calendar/pull/59
- @imoize made their first contribution in https://github.com/dayflow-js/calendar/pull/58
Full Changelog: https://github.com/dayflow-js/calendar/compare/v3.1.2...v3.2.0
v3.1.0
This release introduces a new plugin-based architecture, further reducing the core bundle size and providing greater flexibility. Core features have been extracted into independent, optional packages.
@dayflow/plugin-drag: Handles all drag-and-drop interactions (move, resize, and create).@dayflow/plugin-keyboard-shortcuts: Provides keyboard navigation and shortcuts support.@dayflow/plugin-localization: Dedicated package for multi-language support and internationalization.@dayflow/plugin-sidebar: Extracts the sidebar UI and logic into a standalone plugin.
- Enhanced Visibility Control:
- Added
onVisibleRangeChangecallback with areasonparameter (scroll vs. navigation). - Marked
onVisibleMonthChangeas deprecated in favor of the more flexible range change callback.
- Added
- Improved API: Simplified framework wrappers by removing the
sidebarConfigattribute (now handled via the sidebar plugin). - UI Refresh: Updated the view switching button styles for a more modern look and feel.
- Accessibility: Fixed an event scaling issue when using the keyboard
Tabkey for navigation. - Search: Improved search result location accuracy within the calendar views.
- Documentation: Comprehensive updates to plugin documentation and multi-language guides.
- Feature Extraction: Drag-and-drop, keyboard shortcuts, and the sidebar are no longer included in
@dayflow/coreby default. You must install and register the corresponding plugins to retain these features. - Sidebar Configuration: The
sidebarConfigprop has been removed from framework adapters. Configuration is now passed directly to the@dayflow/plugin-sidebarduring initialization.
- feat: onVisibleRangeChange callback by @Zoranais in https://github.com/dayflow-js/calendar/pull/52
- feat: extract (locale, keyboard-shortcut, sidebar, drag&drop) to independent package by @JayceV552 in https://github.com/dayflow-js/calendar/pull/53
- @Zoranais made their first contribution in https://github.com/dayflow-js/calendar/pull/52
Full Changelog: https://github.com/dayflow-js/calendar/compare/v3.0.0...v3.1.0
DayFlow Calendar v3.0.1 Release Notes
This version marks a complete rewrite of the DayFlow internal architecture, moving from a React-only library to a framework-agnostic monorepo structure.
@dayflow/core: The new heart of DayFlow. Powered by Preact, it handles all state management, layout algorithms, and the core rendering engine (~3KB gzipped).@dayflow/react: High-performance React adapter.@dayflow/vue: Brand new adapter for Vue 3.@dayflow/svelte: Brand new adapter for Svelte 5 (with full SSR support).@dayflow/angular: Brand new adapter for Angular (v14+).
- Framework Agnostic: Core logic and UI are now decoupled from specific frameworks.
- Improved Content Injection: New Content Slots system allowing users to inject native framework components (React/Vue/Svelte/Angular) into the Preact-driven calendar.
- SSR Ready:
- Svelte: Provided dedicated SSR bundles (
dist/index.ssr.js) to avoid DOM reference errors during server-side rendering. - React/Vue: Enhanced hydration safety.
- Svelte: Provided dedicated SSR bundles (
- Optimized mobile responsiveness for all framework adapters.
- Improved build process using Rollup and Turborepo for faster and smaller bundles.
- Package Names: If you were using the old
dayflowpackage, you should now migrate to framework-specific packages (e.g.,@dayflow/react). - Import Paths:
- Components and hooks are now exported from
@dayflow/[framework]. - Core types and utilities are exported from
@dayflow/core.
- Components and hooks are now exported from
- External Dependencies: To maintain framework-agnosticism, the built-in color picker (
react-color) has been removed. Users should now provide their own color picker via Content Slots.
- style: add df- prefix for custom style and update classNames.ts by @JayceV552 in https://github.com/dayflow-js/calendar/pull/36
- fix: monthView Event render overlapping by @JayceV552 in https://github.com/dayflow-js/calendar/pull/38
- feat: add blossom color picker option for calendar by @JayceV552 in https://github.com/dayflow-js/calendar/pull/39
- feat: add import/export .ics calendar support by @JayceV552 in https://github.com/dayflow-js/calendar/pull/40
- feat: add keyboard shortcuts and event right-click context menu support by @JayceV552 in https://github.com/dayflow-js/calendar/pull/41
- fix: Capitalize the H in GitHub on the homepage by @cassidoo in https://github.com/dayflow-js/calendar/pull/42
- feat: add showAllDay configuration to DayView and WeekView, and update tests and documentation by @jloria13 in https://github.com/dayflow-js/calendar/pull/33
- feat: add titleBarSlot at right top of calendar by @JayceV552 in https://github.com/dayflow-js/calendar/pull/45
- Fix docs link for getting started by @Amethystix in https://github.com/dayflow-js/calendar/pull/50
- @cassidoo made their first contribution in https://github.com/dayflow-js/calendar/pull/42
- @jloria13 made their first contribution in https://github.com/dayflow-js/calendar/pull/33
- @Amethystix made their first contribution in https://github.com/dayflow-js/calendar/pull/50
Full Changelog: https://github.com/dayflow-js/calendar/compare/v2.0.4...v3.0.1
DayFlow Calendar v2.0.3 Release Notes
The year-canvas mode provides the ability to 'Year as one canvas' and see the distribution of events for an entire year at once.
We have completely reimagined the Year View (FixedWeekYearView) to provide a more powerful and continuous planning experience.
- Continuous Grid Layout: Instead of 12 separate month grids, the year is now displayed as a continuous, scrollable grid of weeks. This "Fixed Week" layout aligns weeks vertically, making it perfect for long-term planning.
- Multi-Day Event Support: Events spanning multiple days, weeks, or even months are now rendered as continuous bars, providing a clear visual representation of duration and overlap.
- Drag & Drop: Full support for interactive event management.
- Move: Drag events to reschedule them.
- Resize: Drag the edges of an event to change its duration.
- Create: Double-click any day to quickly create a new event.
- Timed Events Display: A new configuration option
showTimedEventsInYearViewallows you to choose whether to display dot indicators for timed events alongside all-day event bars.
- Weekend Styling: Added global CSS classes
df-year-view-weekend-headeranddf-year-view-weekend-cellto easily customize the background color and appearance of weekends in the Year View.
- Week View: Fixed an issue where clicking on the Week View could incorrectly trigger the drag indicator display.
- Event Rendering: Resolved issues with all-day event rendering limits in Month View and Day View, ensuring events are correctly stacked and hidden/shown based on available space.
- Scroll Synchronisation: Improved the synchronisation between the week header, month sidebar, and content grid in the Year View.
To use the new Year View features, ensure you are using the latest version of @dayflow/core.
npm install @dayflow/core@latest
The new Year View is enabled by default when using createYearView().
import { createYearView } from '@dayflow/core';
// ... in your useCalendarApp config
views: [
createYearView({
mode: 'fixed-week', // default is year-canvas
showTimedEventsInYearView: true // Enable dots for timed events
})
]