Migration to newer versions
1.0 -> 1.1
Api
Properties
- The
mode
property was extended by the new modes. Starting from v1.1, you can use the year and agenda modes.
Before v1.1
mode: "day", // "week" | "month"
From v1.1
mode: "day", // "week" | "month" | "year" | "agenda"
- The
templates
property was extended by the new templates. Starting from v1.1, you can use the yearEvent, agendaEvent and agendaDate templates.
Before v1.1
templates: {
weekEvent: ({ event, calendar }) => {...},
monthEvent: ({ event, calendar }) => {...},
multievent: ({ event, calendar }) => {...},
header: ({ date, dateFormat }) => {...},
popup: ({ event, calendar }) => {...}
}
From v1.1
templates: {
weekEvent: ({ event, calendar }) => {...},
monthEvent: ({ event, calendar }) => {...},
yearEvent: ({ event, calendar }) => {...},
agendaEvent: ({ event, calendar }) => {...},
agendaDate: ({ event, calendar }) => {...},
multievent: ({ event, calendar }) => {...},
header: ({ date, dateFormat }) => {...},
popup: ({ event, calendar }) => {...}
}
- The
config
property was extended by the new parameter. Starting from v1.1, you can use the cellCss parameter.
Before v1.1
config: {
...,
views: {
day: { ... },
week: { ... },
month: { ... }
}
}
From v1.1
config: {
...,
views: {
day: {
...,
cellCss: (date) => {
...,
return string;
},
},
week: { ... },
month: { ... }
}
}
- The
editorShape
property was extended by the new editor types. Starting from v1.1, you can use the multiselect and radio editor types. For multiselect and combo types you can also customize options using the template parameter.
Before v1.1
editorShape: [
...,
{
type: "combo",
key: "priority_key",
label: "Event priority",
options: [
{ id: 1, label: "high" },
{ id: 2, label: "medium" },
{ id: 3, label: "low" }
],
config: {
disabled: false,
placeholder: "Select priority"
}
}
]
From v1.1
editorShape: [
...,
{
type: "multiselect", // or "combo"
key: "priority_key",
label: "Event priority",
options: [
{ id: 1, label: "high" },
{ id: 2, label: "medium" },
{ id: 3, label: "low" }
],
config: {
disabled: false,
placeholder: "Select priority"
},
template: (option) => {
return `<div className="multiselect-wraper">
<img src=${option.avatar} alt="" className="multieselectOption-img" />
${option.label} </div>`
}
},
{
type: "radio",
key: "priority",
label: "Priority",
options: [
{ id: 1, label: "High" },
{ id: 2, label: "Medium" },
{ id: 3, label: "Low" }
]
}
Methods
- The
setMode()
method was updated:
Before v1.1
setMode({ value: "day" }); // value: "day" | "week" | "month"
From v1.1
setMode({ value: "day" }); // value: "day" | "week" | "month" | "year" | "agenda"