Create a Calendar view
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { scheduleOnce } from '@ember/runloop';
import { action } from '@ember/object';
import { observes } from '@ember-decorators/object';
import { tracked } from '@glimmer/tracking';
import { guidFor } from '@ember/object/internals';
import $ from 'jquery';
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();
}
@observes('records.[]')
onRecordsChange() {
this.setEvent();
}
get calendarId() {
return `${guidFor(this)}-calendar`;
}
async loadPlugin() {
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css');
await loadExternalJavascript(
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js',
);
this.loaded = true;
}
@action
onInsert() {
$(`#${this.calendarId}`).fullCalendar({
allDaySlot: false,
minTime: '00:00:00',
defaultDate: new Date(2018, 2, 1),
eventClick: (event, jsEvent, view) => {
this.router.transitionTo(
'project.rendering.data.collection.list.view-edit.details',
this.args.collection.id,
event.id,
);
},
viewRender: view => {
const field = this.args.collection.fields.findBy('field', 'start_date');
if (this.conditionAfter) {
this.removeCondition(this.conditionAfter, true);
this.conditionAfter.destroyRecord();
}
if (this.conditionBefore) {
this.removeCondition(this.conditionBefore, true);
this.conditionBefore.destroyRecord();
}
const conditionAfter = this.store.createFragment('fragment-condition');
conditionAfter.set('field', field);
conditionAfter.set('operator', 'is after');
conditionAfter.set('value', view.start);
conditionAfter.set('smartView', this.args.viewList);
this.set('conditionAfter', conditionAfter);
const conditionBefore = this.store.createFragment('fragment-condition');
conditionBefore.set('field', field);
conditionBefore.set('operator', 'is before');
conditionBefore.set('value', view.end);
conditionBefore.set('smartView', this.args.viewList);
this.set('conditionBefore', conditionBefore);
this.addCondition(conditionAfter, true);
this.addCondition(conditionBefore, true);
this.args.fetchRecords({ page: 1 });
},
});
this.setEvent();
}
setEvent() {
if (!this.args.records) {
return;
}
const calendar = $(`#${this.calendarId}`);
calendar.fullCalendar('removeEvents');
this.args.records.forEach(appointment => {
const event = {
id: appointment.get('id'),
title: appointment.get('forest-name'),
start: appointment.get('forest-start_date'),
end: appointment.get('forest-end_date'),
};
calendar.fullCalendar('renderEvent', event, true);
});
}
@action
triggerSmartAction(...args) {
return triggerSmartAction(this, ...args);
}
@action
deleteRecords(...args) {
return deleteRecords(this, ...args);
}
}
.calendar {
padding: 20px;
background: var(--color-beta-surface);
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: var(--color-beta-secondary);
color: var(--color-beta-on-secondary_dark);
}
.calendar .fc-event {
background-color: var(--color-beta-secondary);
border: 1px solid var(--color-beta-on-secondary_border);
color: var(--color-beta-on-secondary_medium);
font-size: 14px;
}
.calendar .fc-day-grid-event {
background-color: var(--color-beta-info);
color: var(--color-beta-on-info);
font-size: 10px;
border: none;
padding: 2px;
}
.calendar .fc-day-number {
color: var(--color-beta-on-surface_medium);
}
.calendar .fc-other-month .fc-day-number {
color: var(--color-beta-on-surface_disabled);
}
.fc-left {
color: var(--color-beta-on-surface_dark);
}
<div id={{this.calendarId}} class='calendar' {{did-insert this.onInsert}}></div>
Last updated