Skip to main content

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​

Before v1.1
setMode({ value: "day" }); // value: "day" | "week" | "month"
From v1.1
setMode({ value: "day" }); // value: "day" | "week" | "month" | "year" | "agenda"