This ticket tracks progress on the new theme system for v7.

Q & A

Q: Why did you decide to add such a large feature last-minute?
A: After releasing v7.0.0-rc.0, we noticed users having difficulties adapting their custom CSS to the new DOM structure. The DOM structure is "unstable" across major versions, so rather than forcing users to muscle through with converting their CSS, we decided to make a future-proof API for theming that does NOT break across versions. Coincidentally, it works very well with Tailwind.

Q: Why are you releasing 5 themes and 2 theme systems (Shadcn & MUI) all at the same time? Wouldn't cutting scope lead to a sooner release?
A: Yes, but we feel making multiple themes with very different designs will battle-test the theme API and lead to a more stable API in the future. The last thing we want is to change the theme API dramatically between major versions, which would defeat its purpose.

Q: I need v7 very soon. Should I wait for it or use v6?
A: Please use v6. Please continue to write custom CSS against the v6 DOM structure. When v7 is released, we will publish an extensive upgrade guide that includes instructions for converting common CSS selectors to the new theme API.

Q: Should I use v7.0.0-rc.0 in the meantime?
A: No. Please use v6 instead. If you have custom CSS, and you use v7.0.0-rc.0 (which does NOT have the theme API), you'll be writing CSS selectors that won't have a supported upgrade path to the official v7 theme API when it's released.

Preview URL

https://v7-dev.fc-v7-theme-preview.pages.dev/

Progress

🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜ (77%)

• Implemented or modified 138 new theming hooks (estimate: 6 days, actual: 12 days)
• SVG icons for classic theme (estimate: 1 day, actual: 1 day)
• Refactor CSS for cell/row borders (estimate: 2 days, actual: 2.5 days)
• Separate core CSS utilities from classic theme CSS (estimate: 5 days, actual 2.5)
• Expose date-formatting parts to theme (estimate: 1 day, actual: 1)
• Remove CSS injection & refactor entrypoints (estimate: 1 day, actual: 1 day)
• For core CSS utilities, use CSS modules and obfuscated classNames (estimate: 1 day, actual: 1 day)
• Fix new CSS techniques for web-component shadow DOM (estimate: 1 day, actual: 1 day)
• Implement a Tailwind-version of the classic-theme (unplanned, actual: 10 days)
• Borderless setting (estimate: 1 day, actual: 0.5 days)
• Dark-mode for classic theme (estimate: 0.5 days, actual: 1 days)
• Fixup print-view for classic theme (estimate: 0.5 days, actual 0.5 days)
• Various small bugfixes mentioned in TODO-v7 (estimate: 3 days, actual: 4 days)
• First pass as Material Design theme (called "Monarch") (estimated: 3 days, actual 5 days)
• Lots of theme system revisions to accomodate Monarch theme (unplanned, actual: 12 days)
• Improve datesSet for completely-custom toolbars. React use* hooks (estimate: 1 day, actual: 1 day)
• Demo project so showcase permutations of themes/component-libs/colors (unplanned, actual: 2 days)
• Multiple color schemes for Monarch theme, shadcn/mui demos (unplanned, actual: 1 day)
• System for generating distributables for all permutations of react/vue/vanilla-js, tailwind/vanilla-css, shadcn/mui/default-controls, js/ts (estimate: 4 days, actual: 10 days)
• Create Microsoft-inspired theme called "Forma" (estimate: 4 days, actual: 5 days)
• Create Apple-inspired theme called "Zen" (estimate: 4 days, actual: 5 days)
• Create Tailwind Plus-inspired theme called "Breezy" (unplanned, actual: 5 days)
• Unplanned: theme-system improvement work, pt 1, mostly default UI (actual: 5 days)
• Unplanned: theme-system improvement work, pt 2, mostly MUI/Shadcn (actual: 5 days)
• Unplanned: refactor theme CSS variables (actual: 2 days)
• Unplanned: lots of low-priority bugfixes (actual: 3 days)
• RTL positioning refactor (estimate: 2 days, actual: 1 day)
• Final visual cleanup of all themes (estimate: 4 days)
• Babysit AI as it creates tailwind/react/plugins for all themes. Proof-of-concept already created in "System for generating distributables..." above (estimate: 3 days)
• Minimal installation guide (estimate: 1 days)
• Beta release (estimate: 1 day)
  • Omit Shadcn support for now
  • Omit Vue & Angular support for now
• Installer for Shadcn theme (estimate: 2 days)
• Vue use* hooks (estimate: 1 day)
• Full docs & upgrade guide text (estimate: 4 days)
• Old tests passing since theme system revisions and modifying classic theme (estimate: 3 days)
• Write new tests for critical new features (estimate: 1 day)
• Lots of low-priority bugfixes (estimate: 3 days)
• Incorporate theme schematic graphics into docs (estimate: 1 day)
• DOM measurement refactor (estimate: 4 days)
• Manual testing & last-minute bugfixes (estimate: 2 days)

Dev Branch

https://github.com/fullcalendar/fullcalendar-workspace/tree/v7-dev