https://www.igmetall-ruhrgebiet-mitte.de/typo3conf/ext/events2/Res…/Public/JavaScript/Calendar.js?1723712684

1/**
2 * JavaScript for plugin events2_calendar
3 *
4 * Initialize Events2 Calendar
5 *
6 * @param $element
7 * @param environment contains settings, current PageId, extConf and current tt_content record
8 * @constructor
9 */
10function Events2Calendar ($element, environment) {
11  let me = this;
12
13  // 2016-10-24 will be 23.10.2016T22:00:00Z. getDate() returns: 24
14  me.currentDate = new Date(environment.year + '-' + environment.month + '-' + environment.day + 'T00:00:00');
15  me.environment = environment;
16  me.allDays = [];
17
18  /**
19   * Get current URL with additional parameters
20   *
21   * @param {string} additionalParameters
22   * @return string
23   */
24  me.getCurrentUrlWithAdditionalParameters = function (additionalParameters) {
25    if (window.location.origin) {
26      return window.location.origin + window.location.pathname + '?' + additionalParameters;
27    } else {
28      return window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + additionalParameters;
29    }
30  };
31
32  /**
33   * get days for month
34   * this starts an ajax call to the server and make them globally available
35   *
36   * @param {object} picker
37   * @param {int} month
38   * @param {int} year
39   * @param {string} storagePages
40   * @param {string} categories
41   * @return void
42   */
43  me.fillPickerWithDaysOfMonth = function (picker, month, year, storagePages, categories) {
44    let additionalParameters = [
45      'month=' + (month + 1),
46      'year=' + year,
47      'categories=' + categories,
48      'storagePages=' + storagePages
49    ];
50
51    fetch(me.getCurrentUrlWithAdditionalParameters(additionalParameters.join('&')), {
52      headers: {
53        'Content-Type': 'application/json',
54        'ext-events2': 'getDaysForMonth'
55      }
56    }).then(response => {
57      if (response.ok && response.status === 200) {
58        return response.json();
59      }
60      return Promise.reject(response);
61    }).then(days => {
62      // make global available. Needed for event render:day
63      me.allDays = days;
64      picker.setHighlightedDays(me.getHighlightedDays(days, month, year));
65    }).catch(error => {
66      console.warn('Request error', error);
67    });
68  };
69
70  /**
71   * Get highlighted days which will be clickable for detailed list-view.
72   * No holidays will be added
73   *
74   * @param {object} days
75   * @param {int} month
76   * @param {int} year
77   * @returns array
78   */
79  me.getHighlightedDays = function (days, month, year) {
80    let highlightedDays = [];
81
82    days.forEach(day => {
83      if (!day.isHoliday) {
84        highlightedDays.push(new Date(year, month, day.dayOfMonth, 0, 0, 0));
85      }
86    });
87
88    return highlightedDays;
89  };
90
91  me.initializeDatePicker = function ($element) {
92    let startDate = new Date(
93      parseInt(me.environment.year),
94      parseInt(me.environment.month) - 1,
95      parseInt(me.environment.day), 0, 0, 0
96    );
97
98    let picker = new Litepicker({
99      element: $element,
100      inlineMode: true,
101      startDate: startDate,
102      lang: 'de-DE',
103      format: 'DD.MM.YYYY'
104    });
105
106    picker.on('change:month', (date, calendarIdx) => {
107      me.fillPickerWithDaysOfMonth(
108        picker,
109        date.getMonth(),
110        date.getFullYear(),
111        me.environment.storagePids,
112        me.environment.settings.categories
113      );
114    });
115
116    picker.on('before:show', (el) => {
117      me.fillPickerWithDaysOfMonth(
118        picker,
119        me.currentDate.getMonth(),
120        me.currentDate.getFullYear(),
121        me.environment.storagePids,
122        me.environment.settings.categories
123      );
124    });
125
126    picker.on('preselect', (date1, date2) => {
127      me.getUriForDayAndRedirect(date1);
128    });
129
130    picker.on('render:day', (dayElement, date) => {
131      if (me.allDays !== []) {
132        me.allDays.forEach(day => {
133          if (day.dayOfMonth === parseInt(dayElement.innerHTML)) {
134            day.additionalClasses.forEach(className => {
135              dayElement.classList.add(className);
136            });
137          }
138        });
139      }
140    });
141
142    // In case of showInline either "show" nor "render" event will be called. Initialize them manually
143    picker.hide();
144    picker.show();
145  };
146
147  me.getUriForDayAndRedirect = function (date) {
148    let additionalParameters = [
149      'day=' + date.getDate(),
150      'month=' + (date.getMonth() + 1),
151      'year=' + date.getFullYear(),
152      'pidOfListPage=' + me.environment.pidOfListPage
153    ];
154
155    fetch(me.getCurrentUrlWithAdditionalParameters(additionalParameters.join('&')), {
156      headers: {
157        'Content-Type': 'application/json',
158        'ext-events2': 'getUriForDay'
159      }
160    }).then(response => {
161      if (response.ok && response.status === 200) {
162        return response.json();
163      }
164      return Promise.reject(response);
165    }).then(data => {
166      if (data.uri !== '') {
167        console.log('Redirect to: ' + data.uri);
168        window.location.href = data.uri;
169      }
170    }).catch(error => {
171      console.warn('Request error', error);
172    });
173  };
174
175  me.initializeDatePicker($element);
176}
177
178Array.from(document.querySelectorAll('div.events2calendar')).forEac

178h($element => {
179  new Events2Calendar(
180    $element,
181    JSON.parse($element.getAttribute('data-environment'))
182  );
183});