Problem on Smart view calendar, event id undefined

Help me!
1

Feature(s) impacted

visualise data as a Calendar

Observed behavior

on click on event it doesn’t find the event id , it logs undefined instead.

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

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

  @tracked conditionAfter = null;
  @tracked conditionBefore = null;
  @tracked loaded = false;

  constructor(...args) {
    super(...args);

    this.loadPlugin();
  }

  get calendarId() {
    return `${guidFor(this)}-calendar`;
  }

  async loadPlugin() {
    loadExternalStyle('https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css');
    await loadExternalJavascript('https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js');
    this.loaded = true;
    const params ={
      allDaySlot: true,
      initialView: 'timeGridWeek',
      slotDuration: '00:30:00', 
    slotLabelInterval: '01:00',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaWeek,agendaDay'
      },
      minTime: '00:00:00',
      initialDate: new Date(),
      eventClick: (event, jsEvent, view) => {
        console.log("event id", event.id)
        // this.router.transitionTo(
        //   'project.rendering.data.collection.list.view-edit.details',
        //   this.args.collection.id,
        //   event.id,
        // );
      },
      events: async (info, successCallback, failureCallback) => {
        const field = this.args.collection.fields.findBy('fieldName', 'dateAction');

        if (this.conditionAfter) {
          this.args.removeCondition(this.conditionAfter, true);
          this.conditionAfter.unloadRecord();
        }
        if (this.conditionBefore) {
          this.args.removeCondition(this.conditionBefore, true);
          this.conditionBefore.unloadRecord();
        }

        const conditionAfter = this.store.createFragment('fragment-condition');
        conditionAfter.set('field', field);
        conditionAfter.set('operator', 'is after');
        conditionAfter.set('value', info.start);
        conditionAfter.set('smartView', this.args.viewList);
        this.conditionAfter = conditionAfter;

        const conditionBefore = this.store.createFragment('fragment-condition');
        conditionBefore.set('field', field);
        conditionBefore.set('operator', 'is before');
        conditionBefore.set('value', info.end);
        conditionBefore.set('smartView', this.args.viewList);
        this.conditionBefore = conditionBefore;

        this.args.addCondition(conditionAfter, true);
        this.args.addCondition(conditionBefore, true);

        await this.args.fetchRecords({ page: 1 });
        
        successCallback(this.args.records?.map((appointment) => {
          return {
            id: appointment.get('seqNum'),
            title: appointment.get('forest-name'),
            start: appointment.get('forest-dateAction')
          };
        }));
      }
    }
    this.onInsert(params);
  }
  
  @action
  onInsert(params) {
    if (!this.loaded || !document.getElementById(this.calendarId)) return;

    this.calendar = new FullCalendar.Calendar(document.getElementById(this.calendarId), params)

    this.calendar.render();

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

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

Expected behavior

it should get all event data
I want to redirect to specific url (of workspace) using the id.

Failure Logs

Context

  • Project name: clevermate dashboard
  • Environment name: Test
  • Database type: postgres
2

Hello @Adel_de_Clevermate,

As stated in the fullcalendar documentation, eventClick receives an object in param

Thank you for highlighting this, I will update the documentation snippets accordingly

eventClick must be called as following

-      eventClick: (event, jsEvent, view) => {
+      eventClick: ({ event, jsEvent, view }) => {

Here is a working implementation of redirecting to a workspace with a selected record when clicking on an event :

  eventClick: ({ event, jsEvent, view }) => {
    this.router.transitionTo(
      "project.rendering.workspaces.view",
      "931477a9-d33e-4a05-8664-6b0489613b50", // your workspace id
      { queryParams: { "collection1.selectedRecords": [event.id] } }
    );
  };

If you have any other questions on the calendar subject, please ask them in this thread

Regards,
Nicolas

1 Like