Our powerful JS Calendar component


Post by Nitish Kurhadkar »

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

Attachments
Untitled.png
Untitled.png (6.54 KiB) Viewed 812 times

Post by mats »

You mean you want to color the day cells for a specific time range? Or is that a regular event?


Post by Nitish Kurhadkar »

yes color also and i want to display some data inside that regular event block similar type of data that is shown in image is it possible?


Post by saki »

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:

Screen Shot 2021-06-04 at 13.37.40.png
Screen Shot 2021-06-04 at 13.37.40.png (626.3 KiB) Viewed 797 times

Post Reply