Skip to main content

templates

Description

Optional. An object with custom templates of the Event Calendar visual elements

Usage

templates?: {
weekEvent?: function({ event, calendar }), // => html string
monthEvent?: function({ event, calendar }), // => html string
yearEvent?: function({ event, calendar }), // => html string
agendaEvent?: function({ event, calendar }), // => html string
agendaDate?: function({ event, calendar }), // => html string
multievent?: function({ event, calendar }), // => html string
header?: function({ date, dateFormat }), // => html string
popup?: function({ event, calendar }) // => html string
};

Parameters

In the templates object you can specify custom templates for the following elements of Event Calendar:

  • weekEvent - (optional) a function needs to return a custom template of the event in the Week and Day modes. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
  • monthEvent - (optional) a function needs to return a custom template of the event in the Month mode. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
  • yearEvent - (optional) a function needs to return a custom template of the event in the Year mode. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
  • agendaEvent - (optional) a function needs to return a custom template of the event in the Agenda mode. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
  • agendaDate - (optional) a function needs to return a custom template of the Date cell in the Agenda mode. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
  • multievent - (optional) a function needs to return a custom template of the multievent. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
  • header - (optional) a function needs to return a custom template of the grid header. It takes an object with the following parameters:
    • date - a current date
    • dateFormat - a current date format
  • popup - (optional) a function needs to return a custom template of the info popup window. It takes an object with the following parameters:
    • event - current event data
    • calendar - current calendar data
info

To set the templates dynamically, you can use the setConfig() method

Example

const { format } = dateFns; // date-fns library  (https://date-fns.org/)
new eventCalendar.EventCalendar("#root", { // create Event Calendar
templates: {
// the event template of the "Week" and "Day" modes
weekEvent: ({ event, calendar }) => {
const start_date = format(event.start_date, "HH:mm");
const end_date = format(event.end_date, "HH:mm");
return `
<div className="week_event_wrapper">
<div>${event.text}</div>
<div> ${start_date} - ${end_date}</div>
${event.img ? `<img src=${event.img} alt="" />` : ""}
</div>`;
},
// the event template of the "Month" mode
monthEvent: ({ event, calendar }) => {
return `
<div>
<i className="mdi mdi-account-multiple"></i>
<span className="label"> ${event.text} </span>
</div>`;
},
// the event template of the "Year" mode
yearEvent: ({ event, calendar }) => {
return `
<div className="wrapper">
<i className="mdi mdi-calendar-multiple"> </i>
<span className="multievent_label">${event.text}</span>
</div>`;
},
// the event template of the "Agenda" mode
agendaEvent: ({ event, calendar }) => {
const { start_date, end_date, text } = event;
const start = format(start_date, "HH:mm");
const end = format(end_date, "HH:mm");
const label = `
<b>Event:</b> ${text} </br>
<b>Time:</b> ${start}-${end}`;
return `
<div>
<span className="label"> ${label} </span>
</div>
`;
},
// the template of the date cell in the "Agenda" mode
agendaDate: ({ event, calendar }) => {
const day = format(date, "do");
const week = format(date, "dddd");
return `
<div className="custom-date">
<b>${day}</b>
${week}
</div>
`;
},
// the template of the grid header
header: ({ date, dateFormat }) => {
const label = format(date, "DD MM YYYY");
return `
<div className="custom-date">
${label}
</div>`;
},
// the multievent template
multievent: ({ event, calendar }) => {
return `
<div className="wrapper">
<i
className="mdi mdi-calendar-multiple"
style={{color: '${calendar.color.border}'}}> </i>
<span className="multievent_label">${event.text}</span>
</div>`;
},
// the info popup template
popup: ({ event, calendar }) => {
const start_date = format(event.start_date, "MMM, do h:mm");
const end_date = format(event.end_date, "MMM, do h:mm");
return `
<div className="popup_wrapper">
<h1>${event.text}</h1>
<div className="popup_info">
<span><b>Description:</b></span>
<span>${event.details}</span>
<span><b>Date:</b></span>
<div>${start_date} - ${end_date}</div>
</div>
</div>`;
}
},
// other configuration parameters
});

Related sample: Event Calendar. Custom templates

Change log: The yearEvent, agendaEvent and agendaDate templates were added in v1.1