Woodshop
Search…
Display a calendar view
This example shows you how to use a smart view to visualize your data on a calendar.

Requirements

How it works

File: template.hbs

This file contains handlebars and HTML declaration.
template.hbs
1
<style>
2
.calendar {
3
padding: 20px;
4
background: white;
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: #f7f7f7;
15
}
16
.calendar .fc-event {
17
background-color: #f7f7f7;
18
border: 1px solid #ddd;
19
color: #555;
20
font-size: 14px;
21
}
22
.calendar .fc-day-grid-event {
23
background-color: #4285f4;
24
color: white;
25
font-size: 10px;
26
border: none;
27
padding: 2px;
28
}
29
.calendar .fc-time-grid-event {
30
background-color: #4285f4;
31
color: white;
32
font-size: 10px;
33
border: none;
34
padding: 2px;
35
}
36
.popper,
37
.tooltip {
38
position: absolute;
39
z-index: 9999;
40
background: #71ba84;
41
color: white;
42
font-weight: bold;
43
width: 150px;
44
border-radius: 3px;
45
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
46
padding: 10px;
47
text-align: center;
48
}
49
.style5 .tooltip {
50
background: #1E252B;
51
color: #FFFFFF;
52
max-width: 200px;
53
width: auto;
54
font-size: .8rem;
55
padding: .5em 1em;
56
}
57
.popper .popper__arrow,
58
.tooltip .tooltip-arrow {
59
width: 0;
60
height: 0;
61
border-style: solid;
62
position: absolute;
63
margin: 5px;
64
}
65
.tooltip .tooltip-arrow,
66
.popper .popper__arrow {
67
border-color: #71ba84;
68
}
69
.style5 .tooltip .tooltip-arrow {
70
border-color: #1E252B;
71
}
72
.popper[x-placement^="top"],
73
.tooltip[x-placement^="top"] {
74
margin-bottom: 5px;
75
}
76
.popper[x-placement^="top"] .popper__arrow,
77
.tooltip[x-placement^="top"] .tooltip-arrow {
78
border-width: 5px 5px 0 5px;
79
border-left-color: transparent;
80
border-right-color: transparent;
81
border-bottom-color: transparent;
82
bottom: -5px;
83
left: calc(50% - 5px);
84
margin-top: 0;
85
margin-bottom: 0;
86
}
87
.popper[x-placement^="bottom"],
88
.tooltip[x-placement^="bottom"] {
89
margin-top: 5px;
90
}
91
.tooltip[x-placement^="bottom"] .tooltip-arrow,
92
.popper[x-placement^="bottom"] .popper__arrow {
93
border-width: 0 5px 5px 5px;
94
border-left-color: transparent;
95
border-right-color: transparent;
96
border-top-color: transparent;
97
top: -5px;
98
left: calc(50% - 5px);
99
margin-top: 0;
100
margin-bottom: 0;
101
}
102
.tooltip[x-placement^="right"],
103
.popper[x-placement^="right"] {
104
margin-left: 5px;
105
}
106
.popper[x-placement^="right"] .popper__arrow,
107
.tooltip[x-placement^="right"] .tooltip-arrow {
108
border-width: 5px 5px 5px 0;
109
border-left-color: transparent;
110
border-top-color: transparent;
111
border-bottom-color: transparent;
112
left: -5px;
113
top: calc(50% - 5px);
114
margin-left: 0;
115
margin-right: 0;
116
}
117
.popper[x-placement^="left"],
118
.tooltip[x-placement^="left"] {
119
margin-right: 5px;
120
}
121
.popper[x-placement^="left"] .popper__arrow,
122
.tooltip[x-placement^="left"] .tooltip-arrow {
123
border-width: 5px 0 5px 5px;
124
border-top-color: transparent;
125
border-right-color: transparent;
126
border-bottom-color: transparent;
127
right: -5px;
128
top: calc(50% - 5px);
129
margin-left: 0;
130
margin-right: 0;
131
}
132
</style>
133
134
<div id="{{calendarId}}" class="calendar"></div>
Copied!

File: javascript.js

This file handle all events or actions
component.js
1
'use strict';
2
import Ember from 'ember';
3
import SmartViewMixin from 'client/mixins/smart-view-mixin';
4
5
let calendar = null;
6
7
export default Ember.Component.extend(SmartViewMixin.default, {
8
store: Ember.inject.service(),
9
conditionAfter: null,
10
conditionBefore: null,
11
loaded: false,
12
calendarId: null,
13
tooltipId: null,
14
loadPlugin: function() {
15
const that = this;
16
Ember.run.scheduleOnce('afterRender', this, function() {
17
if (this.get('viewList.recordPerPage') !== 50) {
18
this.set('viewList.recordPerPage', 50);
19
this.sendAction('updateRecordPerPage');
20
}
21
that.set('calendarId', `${this.get('element.id')}-calendar`);
22
that.set('tooltipId', `${this.get('element.id')}-tooltip`);
23
Ember.$.getScript('//unpkg.com/popper.js/dist/umd/popper.min.js', function() {
24
Ember.$.getScript('//unpkg.com/tooltip.js/dist/umd/tooltip.min.js', function() {
25
Ember.$.getScript(
26
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js',
27
function() {
28
Ember.$.getScript(
29
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js',
30
function() {
31
Ember.$.getScript(
32
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.js',
33
function() {
34
const calendarEl = document.getElementById(that.get('calendarId'));
35
36
calendar = new FullCalendar.Calendar(calendarEl, {
37
header: {
38
left: 'title',
39
center: '',
40
right: 'today prev,next dayGridMonth,timeGridWeek',
41
},
42
allDaySlot: false,
43
plugins: ['dayGrid', 'timeGrid'],
44
defaultView: 'timeGridWeek',
45
defaultDate: new Date(),
46
viewRender: function(view, element) {
47
const field = that.get('collection.fields').findBy('field', 'datetime');
48
49
that.sendAction('fetchRecords', { page: 1 });
50
},
51
eventRender: function(eventData) {
52
new Tooltip(eventData.el, {
53
title: eventData.event.extendedProps.description,
54
placement: 'top',
55
trigger: 'hover',
56
container: 'body',
57
});
58
},
59
eventClick: function(eventData) {
60
that
61
.get('router')
62
.transitionTo(
63
'rendering.data.collection.list.viewEdit.details',
64
that.get('collection.id'),
65
eventData.event.id,
66
);
67
},
68
});
69
70
calendar.render();
71
72
that.set('loaded', true);
73
},
74
);
75
},
76
);
77
},
78
);
79
});
80
});
81
82
const cssCoreLink = $('<link>');
83
const cssDayGridLink = $('<link>');
84
const cssTimegridLink = $('<link>');
85
$('head').append(cssCoreLink);
86
$('head').append(cssDayGridLink);
87
$('head').append(cssTimegridLink);
88
89
cssCoreLink.attr({
90
rel: 'stylesheet',
91
type: 'text/css',
92
href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css',
93
});
94
cssDayGridLink.attr({
95
rel: 'stylesheet',
96
type: 'text/css',
97
href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css',
98
});
99
cssTimegridLink.attr({
100
rel: 'stylesheet',
101
type: 'text/css',
102
href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css',
103
});
104
});
105
}.on('init'),
106
setEvent: function() {
107
if (!this.get('records')) {
108
return;
109
}
110
111
this.get('records').forEach(function(deliverySlip) {
112
const association = deliverySlip.get('forest-_associationId');
113
const shop = deliverySlip.get('forest-_shopId');
114
115
const event = {
116
id: deliverySlip.get('id'),
117
title: `${shop.get('forest-name')} -> ${association.get('forest-name')}`,
118
description: `${shop.get('forest-name')} -> ${association.get('forest-name')}`,
119
start: deliverySlip.get('forest-datetime'),
120
};
121
122
calendar.addEvent(event);
123
});
124
}.observes('loaded', 'records.[]'),
125
});
Copied!
Last modified 11mo ago