Our powerful JS Calendar component


Post by cgodwin_lm »

Hi,

We are trying to integrate the MonthView widget from the Bryntum Calendar into our application, which is built using ExtJs 7.3.1.

Within our ViewController code, we created a method, renderMonthView, that displays the MonthView widget within our application view.

I have noticed that if we navigate to another view and return back to the view that is displaying the monthView calendar widget, the view that is rendering the calendar displays the following error message,

calendar.umd.js?dc=1636563390750:26
Uncaught Error: Id monthViewCalendar already in use
at Function.registerInstance (calendar.umd.js?
dc=1636563390750:26)

What is the best practice for deleting the MonthView calendar widget from the view?

I did add the code, bryntumRef.Calendar.destroy(existingMonthCalendar), within the renderMonthView method, but it does not completely remove all references of the month view calendar widget.

    renderMonthView: function(){
        var me = this,
            calendarEventData,
            calendarEvents,
            shiftItems,
            calendarValue,
            calendarId = 'monthViewCalendar',
            startDate, endDate,
            vm = me.getViewModel(),
            monthTitle = vm.get('currentDateTitle'),
            monthContainer = me.lookupReference('SchedulingCoverageDetailsViewContainer');
            calendarEventData = vm.get('calendarEventData') || [];
        
calendarValue = vm.get('calendarValue'); startDate = me.startOfMonth(calendarValue); endDate = me.endOfMonth(calendarValue); calendarEvents = me.processCalendarEvents(calendarEventData, startDate, endDate); if(monthContainer && monthContainer.getEl()) { // Mount Bryntum Calendar and if old calendar exists, destory it var bryntumRef = window.bryntum; if (bryntumRef == null || bryntumRef.calendar == null){ monthContainer.update('No calendar library loaded'); } else { var calendar = new bryntum.calendar.MonthView({ id: calendarId, appendTo : monthContainer.getId().toString(), width : '100%', height: '100%', startDate : new Date(), title: monthTitle, startDate : startDate, events : calendarEvents, listeners: { } }, features: { // weekExpander: true, eventTooltip : { showOn: 'hover', minWidth : null, maxWidth: 300, header: { cls: 'lm-bryntum-tooltip-header' }, tools: { delete: null, edit: null, }, contentElementCls: 'lm-bryntum-tooltip-content', renderer: me.renderTooltipTemplate } }, eventHeight: '2.5em', minRowHeight: 200, eventRenderer: function({ eventRecord, renderData }) { var s = ''; s += `${Ext.Date.format(me.applyTimeZoneOffset(new Date(eventRecord.startDate)), 'g:i A')} - ${Ext.Date.format(me.applyTimeZoneOffset(new Date(eventRecord.endDate)), 'g:i A')} `; s += `<br />${eventRecord.providerName}`; s += ``; // Dummy Icon OR we can render an icon in the template if(eventRecord.shiftTitle) { renderData.iconCls = 'fas fa-redo-alt'; } return s; } }); } } },

Post by Animal »

Why delete it?

Render it once, then leave it there.


Post by cgodwin_lm »

ok. We can definitely take that approach. Thank you so much for your help!


Post Reply