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 () {
36 addToModal("/events/new?start=" + $(this).data("date"));
42 eventRender: function (event, element, view) {
43 //console.log(view.name);
49 "<span class='item-desc'>{2}</span>".format(
50 event.item["author-avatar"],
51 event.item["author-name"],
59 if (event.item["author-name"] == null) return;
63 "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
64 event.item["author-avatar"],
65 event.item["author-name"],
67 htmlToText(event.item.location),
72 if (event.item["author-name"] == null) return;
76 "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
77 event.item["author-avatar"],
78 event.item["author-name"],
80 htmlToText(event.item.location),
85 element.find(".fc-list-item-title").html(formatListViewEvent(event));
89 eventAfterRender: function (event, element) {
91 content: eventHoverHtmlContent(event),
97 '<div class="popover hovercard event-card"><div class="arrow"></div><div class="popover-content hovercard-content"></div></div>',
98 sanitizeFn: function (content) {
99 return DOMPurify.sanitize(content);
106 var args = location.href.replace(baseurl, "").split("/");
107 if (modparams == 2) {
108 if (args.length >= 5) {
109 $("#events-calendar").fullCalendar("gotoDate", args[3], args[4] - 1);
112 if (args.length >= 4) {
113 $("#events-calendar").fullCalendar("gotoDate", args[2], args[3] - 1);
118 var view = $("#events-calendar").fullCalendar("getView");
119 $("#fc-title").text(view.title);
122 var hash = location.hash.split("-");
123 if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]);
126 // loads the event into a modal
127 function showEvent(eventid) {
128 addToModal(baseurl + moduleUrl + "/?id=" + eventid);
131 function changeView(action, viewName) {
132 $("#events-calendar").fullCalendar(action, viewName);
133 var view = $("#events-calendar").fullCalendar("getView");
134 $("#fc-title").text(view.title);
137 // The template for the bootstrap popover for displaying the event title and
138 // author (it's the nearly the same template we use in frio for the contact
139 // hover cards. So be careful when changing the css)
140 function eventHoverBodyTemplate() {
143 <div class="event-card-basic-content media">\
144 <div class="event-card-details">\
145 <div class="event-card-header">\
146 <div class="event-card-left-date">\
147 <span class="event-date-wrapper medium">\
148 <span class="event-card-short-month">{5}</span>\
149 <span class="event-card-short-date">{6}</span>\
152 <div class="event-card-content media-body">\
153 <div class="event-card-title">{2}</div>\
154 <div class="event-property"><span class="event-card-date">{4}</span>{3}\
158 <div class="clearfix"></div>\
165 // The template for presenting the event location in the event hover-card
166 function eventHoverLocationTemplate() {
168 '<span role="presentation" aria-hidden="true"> ยท </span>\
169 <span class="event-card-location"> {0}</span></div>';
173 function eventHoverProfileNameTemplate() {
176 <div class="event-card-profile-name profile-entry-name">\
177 <a href="{0}" class="userinfo">{1}</a>\
181 // transform the event data to html so we can use it in the event hover-card
182 function eventHoverHtmlContent(event) {
183 var eventLocation = "";
184 var eventProfileName = "";
185 // Get the Browser language
186 var locale = window.navigator.userLanguage || window.navigator.language;
189 // Use the browser language for date formatting
190 moment.locale(locale);
192 // format dates to different styles
193 var startDate = moment(event.item.start).format("dd HH:mm");
194 var endDate = moment(event.item.finsih).format("dd HH:mm");
195 var monthShort = moment(event.item.start).format("MMM");
196 var dayNumberStart = moment(event.item.start).format("DD");
197 var dayNumberEnd = moment(event.item.finish).format("DD");
198 var startTime = moment(event.item.start).format("HH:mm");
199 var endTime = moment(event.item.finish).format("HH:mm");
202 var formattedDate = startDate;
204 // We only need the to format the end date if the event does have
206 if (event.item.nofinish == 0) {
207 formattedDate = startDate + " - " + endTime;
209 // use a different Format (15. Feb - 18. Feb) if the events end date
210 // is not the start date
211 if (dayNumberStart != dayNumberEnd) {
213 moment(event.item.start).format("Do MMM") + " - " + moment(event.item.finish).format("Do MMM");
217 // Get the html template
218 data = eventHoverBodyTemplate();
220 // Get only template data if there exists location data
221 if (event.item.location) {
222 var eventLocationText = htmlToText(event.item.location);
223 // Get the the html template for formatting the location
224 var eventLocationTemplate = eventHoverLocationTemplate();
225 // Format the event location data according to the the event location
227 eventLocation = eventLocationTemplate.format(eventLocationText);
230 // Get only template data if there exists a profile name
231 if (event.item["author-name"]) {
233 var eventProfileNameTemplate = eventHoverProfileNameTemplate();
234 // Insert the data into the template
235 eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]);
238 // Format the event data according to the event hover template
239 var formatted = data.format(
240 event.item["author-avatar"], // this isn't used at the present time
245 monthShort.replace(".", ""), // Get rid of possible dots in the string
252 // transform the the list view event element into formatted html
253 function formatListViewEvent(event) {
254 // The basic template for list view
256 '<td class="fc-list-item-title fc-widget-content">\
257 <hr class="seperator"></hr>\
258 <div class="event-card">\
259 <div class="popover-content hovercard-content">{0}</div>\
262 // Use the formation of the event hover and insert it in the base list view template
263 var formatted = template.format(eventHoverHtmlContent(event));