Feature(s) impacted
Please describe in this mandatory section the feature(s) that will be discussed in this topic.
- Smart Views: Calendars routing
Observed behaviour
Please describe in this mandatory section the current behaviour you observe.
- When clicking an event on the smart calendar, FA reports that the route does not exist.
Expected behaviour
Please describe in this mandatory section the behaviour you are expecting.
- When clicking the calendar event, the user will be redirected to a the details page of the record.
Context
Please provide in this mandatory section, the relevant information about your configuration:
As mentioned, I am creating a calendar smart view. When the user clicks on an event they should ideally be routed to the details tab of that recorded event.
However, following the FA demo as well as another example the routing doesn’t exist.
I would greatly appreciate if someone could help me solve this routing issue.
Here is a snippet of the route I am currently using
eventClick: function(eventData, jsEvent, view) {
that
.get('router')
.transitionTo(
'rendering.data.collection.list.view-edit.details',
that.get('collection.id'),
eventData.event.id,
);
},
Below I have included the entire code of the file for more context
'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(
'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: `Time off: ${firstName} ${lastName}`,
start: holiday.get('forest-startDate'),
end: holiday.get('forest-endDate')
};
calendar.addEvent(event);
});
}.observes('loaded', 'records.[]'),
});
If you need more information please let me know
Thanks in advance!!
if I am not mistaken the route inside transition should be
.