Calendar broken in dashboard

Help me!
1

Hey,

I have an issue with the following calendar example:

The calendar does work well in the preview mode but when I switch back to the dashboard, the calendar fails with the following error on the console:
VM2487:92 Uncaught (in promise) TypeError: Ember.$(…).fullCalendar is not a function.

Some folks on stack overflow pointed out that jquery might be loaded multiple time and cause this issue, so I decided to comment the jquery import, but it did not fix the issue as you can imagine.

Any idea on how I can solve this issue ?

Thx,

2

Hi @arms :wave: welcome to our community!
Before all, thank for your feedback!
I rewrote on my side a new smart view with the external lib last version.

Template

<div id={{this.calendarId}} class="calendar" {{did-insert this.onInsert}} {{did-update this.onRecordUpdate @records}}></div>

Component

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';

export default class extends Component {
  @service() router;

  calendar = null;

  @action
  async onInsert(element) {
    loadExternalStyle('https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css');
    await loadExternalJavascript('https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js');
    
    this.calendar = new FullCalendar.Calendar(element, {
      initialDate: "2006-02-14",
      eventClick: this.onEventClick,
    });
    this.calendar.render();
    this.setEvent();
  }
  
  @action
  onRecordUpdate() {
    this.setEvent();
  }
  
  @action
  onEventClick({ event }) {
    this.router.transitionTo(
      'project.rendering.data.collection.list.viewEdit.details',
      this.args.collection.id,
      event.id,
    );
  }
  
  setEvent() {
    if (!this.args.records || !this.calendar) { return; }
    
    this.calendar.getEvents().forEach(event => event.remove());

    this.args.records.forEach((record) => {
      const event = {
        id: record.get('id'),
        title: record.get('forest-firstName'),
        start: record.get('forest-createDate'),
        end: record.get('forest-lastUpdate')
      };

      this.calendar.addEvent(event);
    });
  }

  @action
  triggerSmartAction(...args) {
    return triggerSmartAction(this, ...args);
  }

  @action
  deleteRecords(...args) {
    return deleteRecords(this, ...args);
  }
}

Style

.calendar {
  padding: 20px;
  background: var(--color-beta-surface);
  height:100%;
  overflow: scroll;
}
.calendar .fc-toolbar.fc-header-toolbar {
  font-size: 14px;
  font-weight: bold;
}
.calendar .fc-col-header-cell {
  padding: 10px 0;
  background-color: var(--color-beta-secondary);
  color: var(--color-beta-on-secondary_dark)
}
.calendar .fc-event {
  border: none;
}
.calendar .fc-event-main-frame {
  background-color: var(--color-beta-info);
  color: var(--color-beta-on-info);
  font-size: 10px;
  padding: 2px;
  border-radius: 4px;
}
.calendar .fc-daygrid-day-number {
  color: var(--color-beta-on-surface_medium);
}
.calendar .fc-day-other .fc-daygrid-day-number {
  color: var(--color-beta-on-surface_disabled);
}

I know it change a little bit, you can take a look a this Documentation | FullCalendar to fully customize the calendar.

I don’t recode the viewRender: (view) => { } function from the exemple but I think the way is here => View Render Hooks - Docs | FullCalendar.

Let me know if that help.

3 Likes
3

Hello @Arnaud_Moncel,

Super helpful, I could easily extend the code you provided, great solution :smiley: ! And thanks for the links.

Have a great day,

2 Likes