I want to customize calendar somewhat like this and i want to add some extra json data. so is it possible below i am sharing one example
Support Forum
The color of the events is determined by the resource to which the event belong and color are defined on per-resource basis. If you want the solid background color for events use a custom CSS.
I have added the following rules to resources/app.css
of custom-rendering demo to illustrate it:
.b-dayview-day-container .b-calendar-cell .b-cal-event-body {
background-color:transparent ;
}
.b-dayview-day-container .b-calendar-cell .b-cal-event {
border-radius : 0.1em;
}
Also, an additional data can be processed in the custom renderer. For illustration I have added Att:
to the renderer:
week : {
// Render an icon showing number of invitees (editable in the event editor)
eventRenderer : ({ eventRecord, renderData }) => {
if (eventRecord.important) {
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
}
else if (eventRecord.nbrAttachments > 0) {
renderData.iconCls['b-fa b-fa-paperclip'] = 1;
}
else if (eventRecord.invitees.length > 0) {
renderData.iconCls['b-fa b-fa-user-friends'] = 1;
}
return `
<span class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</span>
${eventRecord.image ? `<img src="${eventRecord.image}" alt="${
StringHelper.encodeHtml(eventRecord.name)}" class="b-event-image"/>` : ''}
<span>Att: ${eventRecord.nbrAttachments ?? '0'}</span>
`;
}
},
Then the result is: