1 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
3 * @file view/theme/frio/js/mod_events.js
4 * Initialization of the fullCalendar and format the output.
7 $(document).ready(function() {
8 // start the fullCalendar
9 $('#events-calendar').fullCalendar({
10 firstDay: aStr.firstDay,
11 monthNames: aStr['monthNames'],
12 monthNamesShort: aStr['monthNamesShort'],
13 dayNames: aStr['dayNames'],
14 dayNamesShort: aStr['dayNamesShort'],
15 allDayText: aStr.allday,
16 noEventsMessage: aStr.noevent,
23 events: baseurl + moduleUrl + '/json/',
30 eventClick: function(calEvent, jsEvent, view) {
31 showEvent(calEvent.id);
33 loading: function(isLoading, view) {
35 $('td.fc-day').dblclick(function() { addToModal('/events/new?start='+$(this).data('date')); });
40 eventRender: function(event, element, view) {
41 //console.log(view.name);
44 element.find(".fc-title").html(
45 "<span class='item-desc'>{2}</span>".format(
46 event.item['author-avatar'],
47 event.item['author-name'],
54 if (event.item['author-name'] == null) return;
55 element.find(".fc-title").html(
56 "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
57 event.item['author-avatar'],
58 event.item['author-name'],
60 htmlToText(event.item.location)
64 if (event.item['author-name'] == null) return;
65 element.find(".fc-title").html(
66 "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
67 event.item['author-avatar'],
68 event.item['author-name'],
70 htmlToText(event.item.location)
74 element.find(".fc-list-item-title").html(formatListViewEvent(event));
78 eventAfterRender: function (event, element) {
80 content: eventHoverHtmlContent(event),
85 template: '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
86 sanitizeFn: function (content) {
87 return DOMPurify.sanitize(content)
96 var args=location.href.replace(baseurl,"").split("/");
99 $("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1);
102 if (args.length>=4) {
103 $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
108 var view = $('#events-calendar').fullCalendar('getView');
109 $('#fc-title').text(view.title);
112 var hash = location.hash.split("-")
113 if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
117 // loads the event into a modal
118 function showEvent(eventid) {
119 addToModal(baseurl + moduleUrl + '/?id=' + eventid);
122 function changeView(action, viewName) {
123 $('#events-calendar').fullCalendar(action, viewName);
124 var view = $('#events-calendar').fullCalendar('getView');
125 $('#fc-title').text(view.title);
128 // The template for the bootstrap popover for displaying the event title and
129 // author (it's the nearly the same template we use in frio for the contact
130 // hover cards. So be careful when changing the css)
131 function eventHoverBodyTemplate() {
133 <div class="event-card-basic-content media">\
134 <div class="event-card-details">\
135 <div class="event-card-header">\
136 <div class="event-card-left-date">\
137 <span class="event-date-wrapper medium">\
138 <span class="event-card-short-month">{5}</span>\
139 <span class="event-card-short-date">{6}</span>\
142 <div class="event-card-content media-body">\
143 <div class="event-card-title">{2}</div>\
144 <div class="event-property"><span class="event-card-date">{4}</span>{3}\
148 <div class="clearfix"></div>\
155 // The template for presenting the event location in the event hover-card
156 function eventHoverLocationTemplate() {
157 var template = '<span role="presentation" aria-hidden="true"> ยท </span>\
158 <span class="event-card-location"> {0}</span></div>';
162 function eventHoverProfileNameTemplate() {
164 <div class="event-card-profile-name profile-entry-name">\
165 <a href="{0}" class="userinfo">{1}</a>\
169 // transform the event data to html so we can use it in the event hover-card
170 function eventHoverHtmlContent(event) {
171 var eventLocation = '';
172 var eventProfileName = '';
173 // Get the Browser language
174 var locale = window.navigator.userLanguage || window.navigator.language;
177 // Use the browser language for date formatting
178 moment.locale(locale);
180 // format dates to different styles
181 var startDate = moment(event.item.start).format('dd HH:mm');
182 var endDate = moment(event.item.finsih).format('dd HH:mm');
183 var monthShort = moment(event.item.start).format('MMM');
184 var dayNumberStart = moment(event.item.start).format('DD');
185 var dayNumberEnd = moment(event.item.finish).format('DD');
186 var startTime = moment(event.item.start).format('HH:mm');
187 var endTime = moment(event.item.finish).format('HH:mm');
190 var formattedDate = startDate;
192 // We only need the to format the end date if the event does have
194 if (event.item.nofinish == 0) {
195 formattedDate = startDate + ' - ' + endTime;
197 // use a different Format (15. Feb - 18. Feb) if the events end date
198 // is not the start date
199 if ( dayNumberStart != dayNumberEnd) {
200 formattedDate = moment(event.item.start).format('Do MMM') +
202 moment(event.item.finish).format('Do MMM');
206 // Get the html template
207 data = eventHoverBodyTemplate();
209 // Get only template data if there exists location data
210 if (event.item.location) {
211 var eventLocationText = htmlToText(event.item.location);
212 // Get the the html template for formatting the location
213 var eventLocationTemplate = eventHoverLocationTemplate();
214 // Format the event location data according to the the event location
216 eventLocation = eventLocationTemplate.format(
221 // Get only template data if there exists a profile name
222 if (event.item['author-name']) {
224 var eventProfileNameTemplate = eventHoverProfileNameTemplate();
225 // Insert the data into the template
226 eventProfileName = eventProfileNameTemplate.format(
227 event.item['author-link'],
228 event.item['author-name']
232 // Format the event data according to the event hover template
233 var formatted = data.format(
234 event.item['author-avatar'], // this isn't used at the present time
239 monthShort.replace('.', ''), // Get rid of possible dots in the string
246 // transform the the list view event element into formatted html
247 function formatListViewEvent(event) {
248 // The basic template for list view
249 var template = '<td class="fc-list-item-title fc-widget-content">\
250 <hr class="seperator"></hr>\
251 <div class="event-card">\
252 <div class="popover-content hovercard-content">{0}</div>\
255 // Use the formation of the event hover and insert it in the base list view template
256 var formatted = template.format(eventHoverHtmlContent(event));