Smart views calendar displaying only one or two records

Help me!
1

Feature(s) impacted

Please describe in this mandatory section the feature(s) that will be discussed in this topic.

  • Smart views calendar

Observed behavior

Please describe in this mandatory section the current behavior you observe.

  • The calendar only renders one or two records from the collection.

Expected behavior

Please describe in this mandatory section the behavior you are expecting.

  • Calendar should display all the records in the collection

Context

Hi FA Community,

I was here a week or two ago regarding an issue pulling data from a different collection to display on my smart view calendar, here is that thread. At the time, the calendar was rendering all the records, they were just missing a few pieces of information which were required. I was informed that it was an issue on FAs end which was quickly resolved. However, now I can only seem to render one of two records to the calendar.

The code is essentially all the same as posted in the previous thread with the only real change being made to the title inside the event object.
It now looks like this:

    this.get('records').forEach(function(holiday) {
      const firstName = holiday.get('forest-homeSupportWorker.forest-firstname')
      const lastName = holiday.get('forest-homeSupportWorker.forest-lastname')
      const event = {
        id: holiday.get('id'),
        title: `${firstName}  ${lastName}`,
        start: holiday.get('forest-startDate'),
        end: holiday.get('forest-endDate')
      };
       console.log(event)

      calendar.addEvent(event);
      calendar.fullCalendar('renderEvent', event, true)

    });

The console.log(event) returns this
Screenshot 2022-05-04 at 15.28.17

Can anybody help me figure out why the calendar no longer renders all the records?

Many thanks

2

Hey @Talha :wave:

Could you mind re-sharing the whole code for your smart view, just so I can give it a shot on my end? :pray:

Thanks in advance

4

Thanks for getting back to me

The code I’m using is below
template file contains:

<div id="{{calendarId}}" class="calendar"></div>

Component

'use strict';
import Ember from 'ember';
import SmartViewMixin from 'client/mixins/smart-view-mixin';

let calendar = null;

export default Ember.Component.extend(SmartViewMixin, {
  store: Ember.inject.service(),
  conditionAfter: null,
  conditionBefore: null,
  loaded: false,
  calendarId: null,
  tooltipId: null,
  loadPlugin: function() {
    const that = this;
    Ember.run.scheduleOnce('afterRender', this, function() {
      if (this.get('viewList.recordPerPage') !== 50) {
        this.set('viewList.recordPerPage', 50);
        this.sendAction('updateRecordPerPage');
      }
      that.set('calendarId', `${this.get('element.id')}-calendar`);
      that.set('tooltipId', `${this.get('element.id')}-tooltip`);
      Ember.$.getScript('//unpkg.com/popper.js/dist/umd/popper.min.js', function() {
        Ember.$.getScript('//unpkg.com/tooltip.js/dist/umd/tooltip.min.js', function() {
          Ember.$.getScript(
            '//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js',
            function() {
              Ember.$.getScript(
                '//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js',
                function() {
                  Ember.$.getScript(
                    '//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.js',
                    function() {
                      const calendarEl = document.getElementById(that.get('calendarId'));

                      calendar = new FullCalendar.Calendar(calendarEl, {
                        header: {
                          left: 'title',
                          center: '',
                          right: 'today prev,next dayGridMonth,timeGridWeek',
                        },
                        allDaySlot: false,
                        plugins: ['dayGrid', 'timeGrid'],
                        defaultView: 'timeGridWeek',
                        defaultDate: new Date(),
                        viewRender: function(view, element) {
                          const field = that.get('collection.fields').findBy('field', 'datetime');

                          that.sendAction('fetchRecords', { page: 1 });
                        },
                        eventRender: function(eventData) {
                          new Tooltip(eventData.el, {
                            title: eventData.event.extendedProps.description,
                            placement: 'top',
                            trigger: 'hover',
                            container: 'body',
                          });
                        },
                        eventClick: function(eventData, jsEvent, view) {
                          that
                            .get('router')
                            .transitionTo(
                              'project.rendering.data.collection.list.view-edit.details',
                              that.get('collection.id'),
                              eventData.event.id,
                            );
                        },
                      });

                      calendar.render();

                      that.set('loaded', true);
                    },
                  );
                },
              );
            },
          );
        });
      });

      const cssCoreLink = $('<link>');
      const cssDayGridLink = $('<link>');
      const cssTimegridLink = $('<link>');
      $('head').append(cssCoreLink);
      $('head').append(cssDayGridLink);
      $('head').append(cssTimegridLink);

      cssCoreLink.attr({
        rel: 'stylesheet',
        type: 'text/css',
        href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css',
      });
      cssDayGridLink.attr({
        rel: 'stylesheet',
        type: 'text/css',
        href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css',
      });
      cssTimegridLink.attr({
        rel: 'stylesheet',
        type: 'text/css',
        href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css',
      });
    });
  }.on('init'),
  setEvent: function() {
    if (!this.get('records')) {
      return;
    }
    
    this.get('records').forEach(function(holiday) {
      const firstName = holiday.get('forest-homeSupportWorker.forest-firstname')
      const lastName = holiday.get('forest-homeSupportWorker.forest-lastname')
      const event = {
        id: holiday.get('id'),
        title: `${firstName}  ${lastName}`,
        start: holiday.get('forest-startDate'),
        end: holiday.get('forest-endDate')
      };

      calendar.addEvent(event);
      calendar.fullCalendar('renderEvent', event, true)

    });
  }.observes('loaded', 'records.[]'),
});

and styling

.calendar {
    padding: 20px;
    background: white;
    height: 100%;
    overflow: scroll;
  }
  .calendar .fc-toolbar.fc-header-toolbar .fc-left {
    font-size: 14px;
    font-weight: bold;
  }
  .calendar .fc-day-header {
    padding: 10px 0;
    background-color: #f7f7f7;
  }
  .calendar .fc-event {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    color: #555;
    font-size: 14px;
  }
  .calendar .fc-day-grid-event {
    background-color: #4285f4;
    color: white;
    font-size: 10px;
    border: none;
    padding: 2px;
  }
  .calendar .fc-time-grid-event {
    background-color: #4285f4;
    color: white;
    font-size: 10px;
    border: none;
    padding: 2px;
  }
  .popper,
  .tooltip {
    position: absolute;
    z-index: 9999;
    background: #71ba84;
    color: white;
    font-weight: bold;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    padding: 10px;
    text-align: center;
  }
  .style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
  }
  
    .popper .popper__arrow,
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
  }
  
    .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: #71ba84;
  }
  .style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
  
    .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  
    .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
    .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: 5px;
  }

  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }


  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }

  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
5

@Talha

On my end, replacing

      calendar.addEvent(event);
      calendar.fullCalendar('renderEvent', event, true)

by

if (calendar) {
      calendar.addEvent(event);
      calendar.fullCalendar('renderEvent', event, true);
}

seems to display the calendar as expected. Could you give this a try ? :pray:

6

The calendar renders for me fine, it just doesn’t render all the records in the collection as events.
This is all I see, when I am supposed to have many more.

Screenshot 2022-05-04 at 17.02.15
Screenshot 2022-05-04 at 17.02.15602×513 20.5 KB

1 Like
7

Ok. At least, the calendar is visible :smiley:

this.get('records') will, by default, render the 15 first records (The one that you should be able to see in the table view).

You can check this by opening your browser Network developer console, locate the HTTP GET call on holiday, and check the records that are returned.

You can also follow this part of our documentation, that explains how to fetch more records (Or to be more precise on the records you want to fetch)

You could also log this.get('records') to check the list of records that are returned by the default HTTP call.

(As a side note, I’m not super familiar with fullCalendar so I may have missed something obvious regarding your smart view code. Maybe you already have multiples records of this.get('records') that should be visible. Let me know if that’s your case. For example, switching calendar.fullCalendar(xxx ...) to if (calendar && calendar.fullCalendar) calendar.fullCalendar(xxx ...) seems display more results on my end)