_docs-v5/upgrading-from-v4.md
This guide outlines the changes between v4 and v5.
Major breaking changes:
defaultView and defaultDatetext, html, or render in it, it has probably been replaced by something else.Major new features:
@fullcalendar/react package) (see below)Want the full docs in a non-changelog format? [View the docs]({{ site.baseurl }})
Found a bug? Report it on the issue tracker
Have a comment? Comment on the latest blog post
</div> <div class='sidebar-layout__sidebar sidebar-layout__sidebar--bordered' id='toc' markdown='1'>You can install with npm just like in v4:
npm install --save @fullcalendar/core @fullcalendar/daygrid
Or, you can use one of the new pre-built bundles (see below)
FullCalendar now internally uses a miniature virtual-DOM library called Preact. Aside from making the codebase more maintainable, it makes FullCalendar more performant to end-users. DOM manipulations and page reflows are kept to a minimum. This is especially true for rerendering events. FullCalendar no longer needs to rerender ALL events when just one event changes. It rerenders only what it needs to (#3003).
Just because we use a virtual DOM doesn't mean we no longer think about performance. We still care about limiting the amount of rerender execution, even though it performs fewer real DOM operations. This will continue to be a priority as we further develop FullCalendar.
How does this affect FullCalendar's API? It doesn't really. From any of the content injection options like eventContent you are able to construct and return a virtual DOM node. Learn more in this article. Aside from that, you won't need to think about the virtual DOM.
The @fullcalendar/react package is no longer merely a connector. It leverages the actual React virtual DOM engine the rest of your React app uses. It swaps out the Preact rendering engine it normally uses for real React, so you can take advantage of Fiber. This is sourcery that Adam will likely blog about in the future.
Firstly, the DOM structure of the calendar has been simplified quite a bit. There is less nesting. Month view and daygrid view have particularly benefitted from this. Each row is represented by a single <tr> and events are rooted in individual <td> cells, whereas in v4 we had many tables-within-tables (addresses #2853)
The CSS has been completely rewritten. Most importantly, the selectors are flatter. Instead of a selector like .fc-event .fc-title we now use something like .fc-event-title. This results in fewer selectors battling for precedence and makes styling easier to override.
As a result, if you've written custom styling, <strong>it will most likely need to be rewritten for v5</strong>, or at the very least you will need to swap out your classNames. To help you do this, we will likely release a className-upgrade document prior to the official release.
<strong>CSS variables</strong> are a new feature. They allow you to manipulate fullcalendar's CSS in a more surgical way than simply overriding existing rules. Some build-system magic is required for this. Read more on <a href='css-customization#css-variables'>how to use CSS variables »</a>
In v4, it was your responsibility to import all of fullcalendar's stylesheets. You may have done this in one your project's SASS files. Or, if you had a build system that handled CSS, you may have done this from your JavaScript.
In v5, you no longer need to do this! The plugins will import their own stylesheets (with the exception of the bootstrap plugin). So, you'll be able remove lines like these:
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid'
// DON'T DO THIS ANYMORE! it will happen automatically
// import '@fullcalendar/core/main.css';
// import '@fullcalendar/daygrid/main.css'; // a dependency of timegrid
// import '@fullcalendar/timegrid/main.css';
let calendar = new Calendar(calendarEl, {
plugins: [ timeGridPlugin ]
// other options...
})
<strong>HOWEVER</strong>, you'll need a build system that is able to handle CSS. Some popular ones:
Configuring your build system to handle CSS is beyond the scope of this document. There are many examples out there.
<strong>If you don't use a build system</strong>, meaning you use manual <code><script></code> tags and browser globals, then please read the next section...
What if you want to avoid using a build system? What if you prefer manual <script> tags and browser globals? This is why we are beginning to offer pre-built bundles of plugins (#4566). In fact, using the pre-built bundles will be the <strong>ONLY</strong> way to use manual <script> tags going forward. The individual plugins will no longer provide browser-runnable UMD files.
First, get the bundle distro files on the Getting Started page »
To use a bundle, do something like this:
<link ref='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar')
var calendar = new FullCalendar.Calendar(calendarEl, {
// plugins: [ 'dayGrid' ] // DON'T DO THIS ANYMORE!
})
calendar.render()
})
</script>
You'll still need to include the CSS file. You won't need to define the plugins array anymore.
For initializing scheduler, do something like this:
<link ref='fullcalendar-scheduler/main.css' rel='stylesheet' />
<script src='fullcalendar-scheduler/main.js'></script><!-- only one JS file. don't include the other bundle -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar')
var calendar = new FullCalendar.Calendar(calendarEl, {
// plugins: [ 'resourceTimeline' ] // DON'T DO THIS ANYMORE!
})
calendar.render()
})
</script>
When using the scheduler bundle, you don't need to include both the standard bundle <strong>AND</strong> the scheduler bundle. The scheduler bundle already <strong>INCLUDES</strong> the standard plugins.
Rendering for print has been greatly improved, especially for timeline view (#4813). You must use the new @fullcalendar/adaptive plugin, which conditionally renders the calendar when the user clicks Print/Print-Preview in their browser. This new plugin is a premium plugin.
<a href='print' class='more-link'>Learn more about rendering for print</a>
When specifying headerToolbar and footerToolbar, the { left, center, right } properties are still available to you. However, the following properties have been added to better support RTL locales:
start - if the calendar is left-to-right, it will appear on the left. if right-to-left, it will appear on the right.end - if the calendar is left-to-right, it will appear on the right. if right-to-left, it will appear on the left.See below for changes to how Custom JS Views are implemented.
The header elements above the day cells in daygrid and timegrid views. Also, the title elements for each day in list view. For the timeline view, jump down to <a href='#slot-rendering'>slot rendering</a>.
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>columnHeader</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='dayHeaders' class='diff-added'>dayHeaders</a> - simply renamed. Accepts <code>true</code> or <code>false</code> for enabling headers. </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>columnHeaderFormat</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='dayHeaderFormat' class='diff-added'>dayHeaderFormat</a> - simply renamed </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>columnHeaderText</li> <li class='diff-removed'>columnHeaderHtml</li> </ul> </td> <td> <p> Use the <a href='day-header-render-hooks'>day-header render hooks</a> instead: </p> <ul class='diff-list'> <li> <span class='diff-added'>dayHeaderClassNames</span> </li> <li> <span class='diff-added'>dayHeaderContent</span> - for emulating <span class='diff-removed'>columnHeaderText</span>, return a string. For emulating <span class='diff-removed'>columnHeaderHtml</span>, return an object like <code>{ html: '' }</code>. The received arguments are different. </li> <li> <span class='diff-added'>dayHeaderDidMount</span> </li> <li> <span class='diff-added'>dayHeaderWillUnmount</span> </li> </ul> </td> </tr> </table>The days cells in daygrid and timegrid views:
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>dayRender</li> </ul> </td> <td> <p> Use the <a href='day-cell-render-hooks'>day-cell render hooks</a> instead: </p> <ul class='diff-list'> <li> <span class='diff-added'>dayCellClassNames</span> - for injecting classNames </li> <li> <span class='diff-added'>dayCellContent</span> - for if you injected DOM content via <span class='diff-removed'>dayRender</span> </li> <li> <span class='diff-added'>dayCellDidMount</span> - for if you needed the DOM element in <span class='diff-removed'>dayRender</span> </li> <li> <span class='diff-added'>dayCellWillUnmount</span> </li> </ul> </td> </tr> <tr> <td></td> <td> <ul class='diff-list'> <li> <a href='dayMinWidth' class='diff-added'>dayMinWidth</a> - creates a horizontal scrollbar if day cells get any narrower. For daygrid and timegrid views only. Requires the <code>@fullcalendar/scrollgrid</code> <strong>premium plugin</strong>. </li> </ul> </td> </tr> </table> <p id='slot-rendering'> The horizontal time slots in timegrid view or the vertical datetime slots in timeline view. In timeline view, even though these slots might represent distinct days, they are still considered "slots" as opposed to "day cells". </p> <table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>minTime</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='slotMinTime' class='diff-added'>slotMinTime</a> - simply renamed </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>maxTime</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='slotMaxTime' class='diff-added'>slotMaxTime</a> - simply renamed </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>slotWidth</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='slotMinWidth' class='diff-added'>slotMinWidth</a> - simply renamed. same exact behavior. only applies to timeline view </li> </ul> </td> </tr> <tr> <td></td> <td> <p> The following <a href='slot-render-hooks'>slot render hooks</a> are now available: </p> <ul class='diff-list'> <li class='diff-added'>slotLabelClassNames</li> <li class='diff-added'>slotLabelContent</li> <li class='diff-added'>slotLabelDidMount</li> <li class='diff-added'>slotLabelWillUnmount</li> </ul> </td> </tr> <tr> <td></td> <td> <p> You can now customize the long span of content next to the slot's date/time text. In timegrid view, this is the horizontal space that passes under all of the days. In timeline view, this is the vertical space that passes through the resources. Use the following <a href='slot-render-hooks'>slot render hooks</a>: </p> <ul class='diff-list'> <li class='diff-added'>slotLaneClassNames</li> <li class='diff-added'>slotLaneContent</li> <li class='diff-added'>slotLaneDidMount</li> <li class='diff-added'>slotLaneWillUnmount</li> </ul> </td> </tr> <tr> <td> <p>timeline slot classNames</p> </td> <td> <p> In timeline view, slots now have more descriptive classNames like <code>fc-slot-future</code>, <code>fc-slot-past</code>, <code>fc-slot-fri</code>, <code>fc-slot-sat</code>, <code>fc-slot-today</code>, etc. </p> </td> </tr> </table>Dates, in aggregate:
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>datesRender</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='datesSet' class='diff-added'>datesSet</a> - renamed from <span class='diff-removed'>datesRender</span>. Called after a view's dates are initialized or when they change. For rendering, you are encouraged to use the render hooks on the <em>individual</em> date cells instead, like the <a href='day-header-render-hooks'>day header</a>, <a href='day-cell-render-hooks'>day cell</a>, and <a href='slot-render-hooks'>slot</a> render hooks. </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>datesDestroy</li> </ul> </td> <td> <p> No direct replacement. For rendering, handle <em>individual</em> date cells via <span class='diff-added'>dayHeaderWillUnmount</span>, <span class='diff-added'>dayCellWillUnmount</span>, or <span class='diff-added'>slotLabelWillUnmount</span>. </p> </td> </tr> </table>Week numbers:
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>weekNumbersWithinDays</li> </ul> </td> <td> <p> This is now the default behavior. The <code>weekNumbersWithinDays:false</code> behavior has been retired. <a href='{{ site.baseurl }}/v4/weekNumbersWithinDays'>See the old docs</a> for an illustration of the difference. </p> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>weekLabel</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='weekText' class='diff-added'>weekText</a> - simply renamed. the text that gets prefixed to the formatted week number </li> </ul> </td> </tr> <tr> <td></td> <td> <ul class='diff-list'> <li> <a href='weekNumberFormat' class='diff-added'>weekNumberFormat</a> - a <a href='date-formatting'>date formatting config</a> that controls how week numbers look. By default it's set to <code>{ week: 'narrow' }</code> and will look like "W6". </li> </ul> </td> </tr> <tr> <td> <p> default week number formatting </p> </td> <td> <p> Week numbers were previously formatted as plain numeric values like "6". Now, by default, they are formatted with their <a href='weekText' class='diff-added'>weekText</a> prefix, so they'll look like "W6". To change back to the old behavior, change <a href='weekNumberFormat' class='diff-added'>weekNumberFormat</a> to <code>{ week: 'numeric' }</code> </p> </td> </tr> <tr> <td></td> <td> <p> The following <a href='week-number-render-hooks'>week-number render hooks</a> are now available: </p> <ul class='diff-list'> <li class='diff-added'>weekNumberClassNames</li> <li class='diff-added'>weekNumberContent</li> <li class='diff-added'>weekNumberDidMount</li> <li class='diff-added'>weekNumberWillUnmount</li> </ul> </td> </tr> </table>The area where the "all-day" text is displayed, both in timegrid view and list view:
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>allDayText</li> <li class='diff-removed'>allDayHtml</li> </ul> </td> <td> <p> Use the <a href='all-day-render-hooks'>all-day render hooks</a> instead: </p> <ul class='diff-list'> <li> <span class='diff-added'>allDayClassNames</span> </li> <li> <span class='diff-added'>allDayContent</span> - for emulating <span class='diff-removed'>allDayText</span>, assign a string. For emulating <span class='diff-removed'>allDayHtml</span>, assign an object like <code>{ html: '' }</code> </li> <li> <span class='diff-added'>allDayDidMount</span> </li> <li> <span class='diff-added'>allDayWillUnmount</span> </li> </ul> </td> </tr> </table> By default, single-day timed events in daygrid will render with a dot as opposed to a solid filled rectangle. To revert to the old behavior, set the calendar-wide <a href='eventDisplay' class='diff-added'>eventDisplay</a> option to <code>'block'</code>. See above for other choices.
</p>
</td>
Background events now display their title (addresses #2746). They previously did not. To prevent this, don't assign a title to the <a href='event-parsing'>Event Object Input</a>. Alternatively, you can override the rendering like this:
eventContent: function(arg) {
if (arg.event.display.match(/background/)) { // handles inverse-background too
return null
}
}
When there are too many events to fit within a single day:
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>eventLimit</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='dayMaxEventRows' class='diff-added'>dayMaxEventRows</a> - the max number of stacked event levels within a given day. This <em>includes</em> the +more link if present. This is the same behavior as v4's <span class='diff-removed'>eventLimit</span>. Just as in v4, setting it to <code>true</code> uses the cell's natural dimensions to limit events. </li> </ul> </td> </tr> <tr> <td></td> <td> <ul class='diff-list'> <li> <a href='dayMaxEvents' class='diff-added'>dayMaxEvents</a> - the max number of events within a given day, <em>not</em> counting the +more link (addresses <a href='https://github.com/fullcalendar/fullcalendar/issues/3035'>#3035</a>) </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>eventLimitClick</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='moreLinkClick' class='diff-added'>moreLinkClick</a> - renamed from <span class='diff-removed'>eventLimitClick</span>. No longer receives the <code>moreEl</code> or <code>dayEl</code> properties. The <code>segs</code> property has been rename to <code>allSegs</code>. </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>eventLimitText</li> </ul> </td> <td> <p> Use the <a href='more-link-render-hooks'>more link render hooks</a> instead: </p> <ul class='diff-list'> <li> <span class='diff-added'>moreLinkClassNames</span> </li> <li> <span class='diff-added'>moreLinkContent</span> - for emulating <span class='diff-removed'>eventLimitText</span>, return a string. The received arguments are different. </li> <li> <span class='diff-added'>moreLinkDidMount</span> </li> <li> <span class='diff-added'>moreLinkWillUnmount</span> </li> </ul> </td> </tr> </table>When resources are grouped together in resource-timeline view:
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>resourceGroupText</li> </ul> </td> <td> <p> A resource group "label" is where a group's name is displayed. </p> <p> Use the following <a href='resource-group-render-hooks'>resource group render hooks</a> going forward: </p> <ul class='diff-list'> <li> <span class='diff-added'>resourceGroupLabelClassNames</span> </li> <li> <span class='diff-added'>resourceGroupLabelContent</span> - you can emulate <span class='diff-removed'>resourceGroupText</span> by returning a string. The received arguments are different. </li> <li> <span class='diff-added'>resourceGroupLabelDidMount</span> </li> <li> <span class='diff-added'>resourceGroupLabelWillUnmount</span> </li> </ul> </td> </tr> <tr> <td></td> <td> <p> A resource group "lane" is the horizontal area running along the time slots. </p> <p> The following <a href='resource-group-render-hooks'>resource group render hooks</a> are now available: </p> <ul class='diff-list'> <li class='diff-added'>resourceGroupLaneClassNames</li> <li class='diff-added'>resourceGroupLaneContent</li> <li class='diff-added'>resourceGroupLaneDidMount</li> <li class='diff-added'>resourceGroupLaneWillUnmount</li> </ul> </td> </tr> </table>The area on the side of resource-timeline view that contains resource names and data.
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>resourceLabelText</li> </ul> </td> <td> <p> The "resource-area header" is above the resource data and displays the text "Resources" by default. It was previously called the "resource label", a term which is now being used to describe something else! When <a href='resourceAreaColumns' class='diff-added'>resourceAreaColumns</a> is activated, it will not be displayed. </p> <p> Use the <a href='resource-area-header-render-hooks'>resource-area header render hooks</a> going forward: </p> <ul class='diff-list'> <li> <span class='diff-added'>resourceAreaHeaderClassNames</span> </li> <li> <span class='diff-added'>resourceAreaHeaderContent</span> - for emulating <span class='diff-removed'>resourceLabelText</span>, assign a string </li> <li> <span class='diff-added'>resourceAreaHeaderDidMount</span> </li> <li> <span class='diff-added'>resourceAreaHeaderWillUnmount</span> </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>resourceColumns</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='resourceAreaColumns' class='diff-added'>resourceAreaColumns</a> - simply renamed </li> </ul> </td> </tr> <tr> <td> <p> Properties within <span class='diff-removed'>resourceColumns</span>: </p> <ul class='diff-list'> <li class='diff-removed'>labelText</li> </ul> </td> <td> <p> Renamed to these properties within <a href='resourceAreaColumns' class='diff-added'>resourceAreaColumns</a>: </p> <ul class='diff-list'> <li> <span class='diff-added'>headerClassNames</span> </li> <li> <span class='diff-added'>headerContent</span> - for emulating <span class='diff-removed'>labelText</span>, assign a string. </li> <li> <span class='diff-added'>headerDidMount</span> </li> <li> <span class='diff-added'>headerWillUnmount</span> </li> </ul> </td> </tr> <tr> <td> <p> Properties within <span class='diff-removed'>resourceColumns</span>: </p> <ul class='diff-list'> <li class='diff-removed'>text</li> <li class='diff-removed'>render</li> </ul> </td> <td> <p> Renamed to these properties within <a href='resourceAreaColumns' class='diff-added'>resourceAreaColumns</a>: </p> <ul class='diff-list'> <li> <span class='diff-added'>cellClassNames</span> - for injecting classNames </li> <li> <span class='diff-added'>cellContent</span> - for if you injected DOM content via <span class='diff-removed'>render</span>. For emulating <span class='diff-removed'>text</span>, return a string. The received arguments have changed. </li> <li> <span class='diff-added'>cellDidMount</span> - for if you needed the DOM element in <span class='diff-removed'>render</span> </li> <li> <span class='diff-added'>cellWillUnmount</span> </li> </ul> </td> </tr> </table>In list view, the "No events to display" message.
<table> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>listDayAltFormat</li> </ul> </td> <td> <ul class='diff-list'> <li> <a href='listDaySideFormat' class='diff-added'>listDaySideFormat</a> - simply renamed </li> </ul> </td> </tr> <tr> <td> <ul class='diff-list'> <li class='diff-removed'>noEventsMessage</li> </ul> </td> <td> <p> The following <a href='no-events-render-hooks'>render hooks</a> are now available: </p> <ul class='diff-list'> <li> <span class='diff-added'>noEventsClassNames</span> </li> <li> <span class='diff-added'>noEventsContent</span> - for emulating <span class='diff-removed'>noEventsMessage</span>, assign a string </li> <li> <span class='diff-added'>noEventsDidMount</span> </li> <li> <span class='diff-added'>noEventsWillUnmount</span> </li> </ul> </td> </tr> </table>In v5, duration is an Event class property and will no longer be accessible from event.extendedProps. To keep your duration in extendedProps, provide an alternate name like in the example below:
let calendar = new Calendar({
//...
events: [
{
id: 'a',
title: 'my event',
start: '2020-07-25',
myDuration: '15'
}
],
eventContent: function(info) {
console.log(info.event.extendedProps.myDuration);
}
//...
})
Custom views written as JavaScript classes will need to be refactored to work. Subclasses of View are no longer accepted. Instead, you specify a plain configuration object.
In the old way, you had different methods that were called when different pieces of data changed:
class CustomView extends View { // a class. this is the OLD way
renderSkeleton() {
this.el.classList.add('custom-view')
this.el.innerHTML =
'<div class="view-title"></div>' +
'<div class="view-events"></div>'
}
renderDates(dateProfile) {
this.el.querySelector('.view-title').innerHTML = dateProfile.currentRange.start.toUTCString()
}
renderEvents(eventStore) {
this.el.querySelector('.view-events').innerHTML = Object.keys(eventStore).length + ' events'
}
}
Now, the content function gets called when ANY change occurs:
const CustomViewConfig = { // a plain object. this is the NEW way
classNames: [ 'custom-view' ],
content: function(props) {
let html =
'<div class="view-title">' +
props.dateProfile.currentRange.start.toUTCString() +
'</div>' +
'<div class="view-events">' +
Object.keys(props.eventStore).length + ' events' +
'</div>'
return { html: html }
}
}
You can return any of the available content injection formats such as HTML, real DOM nodes, or virtual DOM nodes.
If you want to maintain state across calls to content, you are better off writing a Preact/React component instead. More information »
The @fullcalendar/interaction plugin's browser globals have changed:
new FullCalendarInteraction.Draggable(settings) // the OLD way
new FullCalendar.Draggable(settings) // the NEW way
The @fullcalendar/moment package's ES6 exports have changed:
// OLD
import { toDuration } from '@fullcalendar/moment'
// NEW
import { toMomentDuration } from '@fullcalendar/moment'
Also, when used with Webpack, the @fullcalendar/moment package will now import ALL locale data, which most people will not need. This was not the case in v4. To avoid this, install a Webpack plugin specifically for this purpose. More info.
When used with Webpack, the @fullcalendar/moment-timezone package will now import ALL timezone data, which most people will not need. This was not the case in v4. To avoid this, install a Webpack plugin specifically for this purpose. More info.
The @fullcalendar/luxon package can no longer be used with script tags and browser globals. It can ONLY be used used with an ES6 build system.
Also, the package's ES6 exports have changed:
// OLD
import { toDateTime, toDuration } from '@fullcalendar/luxon'
// NEW
import { toLuxonDateTime, toLuxonDuration } from '@fullcalendar/luxon'
Calendar::render method again after initializationrerenderDelay causes selectable and editable lag (#4770)eventSourceSuccess callback throws error, looks like JSON parsing failed (#4947)0 (#2978)When using the React connector, you can now return virtual DOM nodes to customize rendering (react#12):
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
export const DemoApp(props) => (
<div className='wrapper'>
<FullCalendar
plugins={[dayGridPlugin]}
eventContent={(arg) => (
<div class='custom-event-content'>
<b>{arg.timeText}</b>
<i>{arg.event.title}</i>
</div>
)}
/>
</div>
)
Also, any utilities that normally would be accessed via @fullcalendar/core can now be accessed via @fullcalendar/react. This will prevent you from needing to import the core package. More info »
Previouly, when using the Vue connector, you specified each option as its own attribute in your template:
<!-- the old way -->
<FullCalendar
:weekends='false'
@dateClick='handleDateClick'
/>
Now, you specify them as a single root options object:
<!-- the new way -->
<FullCalendar
:options='calendarOptions'
/>
Of course you'll need to create this object somewhere:
const AppComponent = {
data: function() {
return {
calendarOptions: {
weekends: false,
dateClick: this.handleDateClick
}
}
},
methods: {
handleDateClick: function(arg) {
alert('clicked on ' + arg.dateStr)
}
}
}
This results in less duplication between your Vue component's JS and template (vue#47). It also thankfully blurs the distinction between props and "handlers" for which you'd need to use v-on or @. All properties are treated equally, resuling in a simpler API.
You now have the ability to customize rendering with the use of Vue scoped slots (addresses vue#14):
{% raw %}<FullCalendar :options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>{% endraw %}
This is possible with any of the *Content options in the API.
Also, any utilities that normally would be accessed via @fullcalendar/core can now be accessed via @fullcalendar/vue. This will prevent you from needing to import the core package. More info »
Also,
Firstly, the Angular connector now requires Angular 9.
In v4, when using the Angular connector, you specified each option as its own attribute in your template:
<!-- the old way -->
<full-calendar
[weekends]="false"
(dateClick)="handleDateClick"
></full-calendar>
Now, you specify them as a single root options object:
<!-- the new way -->
<full-calendar
[options]="calendarOptions"
></full-calendar>
Of course you'll need to create this object somewhere:
class AppComponent {
calendarOptions = {
weekends: false,
dateClick: this.handleDateClick.bind(this) // binding is important!
}
handleDateClick(arg) {
alert('clicked on ' + arg.dateStr)
}
}
This results in less duplication between your Angular component's JS and template. It also thankfully blurs the distinction between props and "handlers" for which you'd need to use (parentheses) instead of [brackets]. All properties are treated equally, resuling in a simpler API.
Also, any utilities that normally would be accessed via @fullcalendar/core can now be accessed via @fullcalendar/angular. This will prevent you from needing to import the core package. More info »
Many developers will be upgrading from <strong>v3</strong> instead of v4. We will likely release a separate guide for this process before the official v5 is released. In the meantime, here are some tips for upgrading from v3 -> v5 in lieu of a full guide:
<script> tags or stylesheetsrender, text, or html in them