Create a Calendar view
1
import Component from '@glimmer/component';
2
import { inject as service } from '@ember/service';
3
import { scheduleOnce } from '@ember/runloop';
4
import { action } from '@ember/object';
5
import { observes } from '@ember-decorators/object';
6
import { tracked } from '@glimmer/tracking';
7
import { guidFor } from '@ember/object/internals';
8
import $ from 'jquery';
9
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';
10
11
export default class extends Component {
12
@service() router;
13
@service() store;
14
15
@tracked conditionAfter = null;
16
@tracked conditionBefore = null;
17
@tracked loaded = false;
18
19
constructor(...args) {
20
super(...args);
21
22
this.loadPlugin();
23
}
24
25
@observes('records.[]')
26
onRecordsChange() {
27
this.setEvent();
28
}
29
30
get calendarId() {
31
return `${guidFor(this)}-calendar`;
32
}
33
34
async loadPlugin() {
35
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css');
36
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js');
37
this.loaded = true;
38
}
39
40
@action
41
onInsert() {
42
$(`#${this.calendarId}`).fullCalendar({
43
allDaySlot: false,
44
minTime: '00:00:00',
45
defaultDate: new Date(2018, 2, 1),
46
eventClick: (event, jsEvent, view) => {
47
this.router.transitionTo(
48
'project.rendering.data.collection.list.view-edit.details',
49
this.args.collection.id,
50
event.id,
51
);
52
},
53
viewRender: (view) => {
54
const field = this.args.collection.fields.findBy('field', 'start_date');
55
56
if (this.conditionAfter) {
57
this.removeCondition(this.conditionAfter, true);
58
this.conditionAfter.destroyRecord();
59
}
60
if (this.conditionBefore) {
61
this.removeCondition(this.conditionBefore, true);
62
this.conditionBefore.destroyRecord();
63
}
64
65
const conditionAfter = this.store.createFragment('fragment-condition');
66
conditionAfter.set('field', field);
67
conditionAfter.set('operator', 'is after');
68
conditionAfter.set('value', view.start);
69
conditionAfter.set('smartView', this.args.viewList);
70
this.set('conditionAfter', conditionAfter);
71
72
const conditionBefore = this.store.createFragment('fragment-condition');
73
conditionBefore.set('field', field);
74
conditionBefore.set('operator', 'is before');
75
conditionBefore.set('value', view.end);
76
conditionBefore.set('smartView', this.args.viewList);
77
this.set('conditionBefore', conditionBefore);
78
79
this.addCondition(conditionAfter, true);
80
this.addCondition(conditionBefore, true);
81
82
this.args.fetchRecords({ page: 1 });
83
}
84
});
85
86
this.setEvent();
87
}
88
89
setEvent() {
90
if (!this.args.records) { return; }
91
92
const calendar = $(`#${this.calendarId}`);
93
calendar.fullCalendar('removeEvents');
94
95
this.args.records.forEach((appointment) => {
96
const event = {
97
id: appointment.get('id'),
98
title: appointment.get('forest-name'),
99
start: appointment.get('forest-start_date'),
100
end: appointment.get('forest-end_date')
101
};
102
103
calendar.fullCalendar('renderEvent', event, true);
104
});
105
}
106
107
@action
108
triggerSmartAction(...args) {
109
return triggerSmartAction(this, ...args);
110
}
111
112
@action
113
deleteRecords(...args) {
114
return deleteRecords(this, ...args);
115
}
116
}
Copied!
1
<style>
2
.calendar {
3
padding: 20px;
4
background: var(--color-beta-surface);
5
height:100%;
6
overflow: scroll;
7
}
8
.calendar .fc-toolbar.fc-header-toolbar .fc-left {
9
font-size: 14px;
10
font-weight: bold;
11
}
12
.calendar .fc-day-header {
13
padding: 10px 0;
14
background-color: var(--color-beta-secondary);
15
color: var(--color-beta-on-secondary_dark)
16
}
17
.calendar .fc-event {
18
background-color: var(--color-beta-secondary);
19
border: 1px solid var(--color-beta-on-secondary_border);
20
color: var(--color-beta-on-secondary_medium);
21
font-size: 14px;
22
}
23
.calendar .fc-day-grid-event {
24
background-color: var(--color-beta-info);
25
color: var(--color-beta-on-info);
26
font-size: 10px;
27
border: none;
28
padding: 2px;
29
}
30
.calendar .fc-day-number {
31
color: var(--color-beta-on-surface_medium);
32
}
33
.calendar .fc-other-month .fc-day-number {
34
color: var(--color-beta-on-surface_disabled);
35
}
36
.fc-left {
37
color: var(--color-beta-on-surface_dark);
38
}
39
</style>
40
41
<div id={{this.calendarId}} class="calendar" {{did-insert this.onInsert}}></div>
Copied!
Copy link