Implementing smart view callendar with data from a collection

Help me!
1

Feature(s) impacted

Smart view, calendar

Expected behavior

I followed the doc Create a Calendar view - Developer Guide to create a calendar smart view.
I want to get events from this collection below and show them into the calendar.
image

Observed behavior

The calendar is emty

Code:

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;

  @tracked appointments;
  
  constructor(...args) {
    super(...args);

    this.loadPlugin();
  }

  async fetchData(startDate, endDate) {
    const params = {
      filters: JSON.stringify({
        aggregator: 'and',
        conditions: [{
          field: 'start_date',
          operator: 'greater_than',
          value: startDate
        }, {
          field: 'start_date',
          operator: 'less_than',
          value: endDate
        }],
      }),
      timezone: 'America/Los_Angeles',
      'page[number]': 1,
      'page[size]': 50
    };

    this.appointments = await this.store.query('forest-prospects-list'); 
  }
  
  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;
    
    this.onInsert();
  }
  
  @action
  onInsert() {
    if (!this.loaded || !document.getElementById(this.calendarId)) return;

    this.calendar = new FullCalendar.Calendar(document.getElementById(this.calendarId), {
      allDaySlot: false,
      minTime: '00:00:00',
      initialDate: new Date(),
      eventClick: (event, jsEvent, view) => {
        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('field', '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.id,
            title: 'appointment.forest-name,
            start: appointment.forest-dateAction,
            end: appointment.forest-dateAction
          };
        }));
      }
    })

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

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

Failure Logs

Context

  • Project name: Clevermate dashboard
  • Environment name: TEST
  • Agent (forest package) name & version: 8
  • Database type: postgres
2

Hello @Adel_de_Clevermate,

On line 74 try replacing field by fieldName, I will update the documentation accordingly

-       const field = this.args.collection.fields.findBy('field', 'dateAction');
+       const field = this.args.collection.fields.findBy('fieldName', 'dateAction');
1 Like