fullcalendar/fullcalendar-workspace v7.0.0-beta.0

on GitHub

This is a beta release for the upcoming v7. It includes a complete refactor of the HTML/CSS to allow for increased performance, better accessibility, and to serve as a foundation for advanced features in future releases such as virtual rendering and infinite scrolling.

v7 has very few breaking changes. However, If you've written custom CSS that overrides any of FullCalendar's default styles, there's a chance your CSS will need to be updated. We will release an upgrade guide specifically for how to upgrade CSS statements as soon as all v7 classNames become stable. In the meantime, it's recommended to simply disable your custom CSS.

# Installation options:

# A) use NPM and append the @beta tag to all packages:
npm install @fullcalendar/core@beta @fullcalendar/daygrid@beta

# B) download the .ZIP archives at the footer of this release

Please test things out! and report bugs on the issue tracker.

You can find the source code at the v7-dev branch in the fullcalendar-workspace repo.

✨ Features

• More streamlined HTML skeleton and more flexbox-based CSS (as opposed to table-based)
• No longer a need to call .updateSize() after the page's dimensions have been programmatically changed. All sizing/positioning of events and views will stay updated automatically. Related to the "resizing" bugfixes below.
• In Resource Timeline view, resourceAreaHeaderContent above columns now stays fixed during horizontal scrolling (#7779)

⌚ Performance

• DayGrid/TimeGrid rendering 2x performance gain (#7677)
• MultiMonth performance gain, solving "Forced reflow while executing JavaScript took <#> ms" violation (#7209)
• Likely less layout thrashing (#4906), awaiting confirmation
• Likely less flickering during event rerendering for React connector (#7488), awaiting confirmation

Performance is expected to improve between now and the v7 official release. Profiling will eventually be conducted.

🪲 Bugfixes

• Responsiveness
  • "More" button (events) on smartphones not working properly (#2991)
  • Toolbar CSS is more robust on smaller screens and more customizable for desired responsive behavior (#4638)
• Accessibility
  • No role attributes on td/th/tr elements inside a table element (#7568)
  • Event time order different than DOM order, bad for tabbing (#6943)
• Resizing
  • Layout does not resize to new container width after browser resizing (#6407)
  • Resource rows don't adjust height to fit resourceLaneContent (#6103)
  • Resource rows don't render with correct height (#6082)
  • Dynamic calendar width doesn't adjust (#5507)
  • Adjust calendar sizing when scrollbar width changes (or (de)activated) (#5561)
  • Day number in day cells are hidden by vertical scrollbar (#6798)
• Scrollbars
  • Don't show MacOS/iOS hovering scrollbars in timeline header/left (#5180)
  • Disable hovering scrollbars in header/resourceArea (#6894)
  • Unnecessary scrollbars in day headers (#6047)
• List View sticky headers lack bottom border (#7778)
• Vertical Resource views with no resources shows blank resource row (#7377)
• DayGrid view
  • Better dayGrid height row height, height:auto, and +more link behavior (#6033)
  • Day cells are not always equal height with calendar height set to auto (#5762)
  • Events not rendered when container is resized (#7555)
  • Events overflow below day cell with dayMaxEvents:true and showNonCurrentDates:false (#6749)
  • Events times are cutoff with eventDisplay: "block" when there is not enough space for the title (#6457)
  • Compressed space between events in dayGrid when month-start title (#7184)

⚠️ Breaking Changes

• Some custom CSS will need to be rewritten (upgrade guide coming soon)
• .updateSize() method deprecated
• windowResize event no longer fires
• windowResizeDelay setting removed
• handleWindowResize callback removed
• FullCalendar-internal exports
  • DayTable from '@fullcalendar/daygrid/internal' removed
  • DayTableView from '@fullcalendar/daygrid/internal' renamed to DayGridView
  • DayTimeCols from '@fullcalendar/timegrid/internal' removed
  • DayTimeColsView from '@fullcalendar/timegrid/internal' renamed to TimeGridView

⏪ Temporary Regressions

These will be addressed before v7 official release. No need to report bugs related to these.

• Accessibility - almost all role and aria-* attributes have been stripped out
• Print mode - very broken
• Angular support - not working and not yet released, caused by this Preact issue
• Minimum browser support - because ResizeObserver is now used internally, and because newer ES syntax is used in places, the minimum supported browsers have been temporarily raised. However ponyfills and transpiling will come to the rescue before official release. Temporary minimum versions:
  • Safari: Sept 2020
  • Firefox: July 2020
  • Chrome: Aug 2020
  • Edge: Aug 2020
• List view - currently still leverages <table>, but will be refactored away soon
• Other bugs
  • The space to accommodate scrollbars needs better styling (#7780)
  • TimeGrid time-axis isn't text-selectable (#7781)

🚦 Not Yet Implemented

These will be addressed before v7 official release:

• All remaining a11y-* in the v7 milestone of the GitHub Project
• Event titles repeated each day in print (#6657)
• Upgrade to peerDep ical.js v2 (#7734)
• moreLinkClick date is not adjusted for moment timezone (#7314)
• resource open/close animation (#4844)

⏩ Features Postponed Until v7.1

Unfortunately we didn't have time to do these but will implement them in a follow-up minor release:

• Improve resource timeline performance with virtual rendering (#5673)