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
})
]