renderHeader in event calendar not rendering the HTML properly

#1

Hi, we are using Mobiscroll in Lightning web component in Salesforce, using Javascript. We are having issues with the renderHeader function. We want to add buttons to switch views but the function seems to only display the 4 radio buttons, but does not display the prev, today, and next buttons. We are currently using the 5.21.2 version.

This is the code snippet of our config:
config = {
timezonePlugin: mobiscroll.momentTimezone,
dataTimezone: ‘utc’,
displayTimezone: ‘utc’,
theme: ‘ios’,
themeVariant: ‘light’,
clickToCreate: false,
dragToCreate: false,
dragToMove: false,
dragToResize: false,
eventDelete: false,
view: {
schedule: {
type: ‘week’,
startDay: 1,
endDay: 5,
startTime: ‘08:00’,
endTime: ‘19:00’,
timeCellStep: 30,
timeLabelStep: 30,
}
},
eventOrder: function (event) {
return event.accepted ? 1 : -1;
},
onEventClick: function (event, config) {
new ShowToastEvent({
message: event.event.title
});
},
height: ‘auto’,
renderHeader: function () { // More info about renderHeader: https://docs.mobiscroll.com/5-21-2/javascript/eventcalendar#opt-renderHeader
return ‘

Test
’ +
‘
’ +
‘Work Week’ +
‘Daily’ +
‘Monthy’ +
‘Yearly’ +
‘
’ +
‘
’ +
‘
’ +
‘
’;
}
}

And this is how it looks like:

image
image.png1241×665 25.8 KB

If we don’t use the renderHeader function, the usual header seems to appear like usual (with the year and prev, today, next buttons showing).

#2

Hello @Ari_Murugesan :wave:

This use case is already implemented in this demo: https://demo.mobiscroll.com/javascript/scheduler/switching-calendar-scheduler-agenda# - so, you can use this example or see the renderHeader implementation.

#3

Hi @Zsombor, we have used that code since the start and it’s not working. Are there other reasons why the prev, today, and next buttons are not displaying? The HTML seems to be rendered but it’s just not displaying in the UI.

image
image.png1703×220 59.3 KB

#4

My understanding is that once the code is rendered, the HTML should have extra classes like in the demo page.

image
image.png1804×373 71 KB

#5

Hi @Ari_Murugesan,
Are you using ES Modules? In that case you should register the components like the following:

import { eventcalendar, CalendarNav, CalendarNext, CalendarPrev, registerComponent} from '.\esm5\mobiscroll.javascript.min.js';

registerComponent(CalendarNav);
registerComponent(CalendarNext);
registerComponent(CalendarPrev);

Here’s a bit more information about it.

#6

Hi @gabi,

Thanks for the suggestion. I have followed the suggestion and I think the components are registered now but they don’t seem to be applied to the HTML automatically. My understanding is that it’s supposed to be automatically applied after we have registered the component. Is this not right? Do we need to add something else inside the renderHeader function for the components to be applied?

We already registered eventcalendar as shown in the screenshot and it worked fine. Not sure why these other components are not working?

image
image.png965×362 24.2 KB

#7

Hi @Ari_Murugesan,
After registering the components, you can use them like as shown in the demos:

renderHeader: function () {
  return '<div mbsc-calendar-prev></div>' +
    '<div mbsc-calendar-nav></div>' +
    '<div mbsc-calendar-next></div>'
  },
})