https://www.andechs.de/typo3conf/ext/events2/Resources/Public/JavaScript/Calendar.js?1781181295

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  me.highlightedDays = [];
18
19  /**
20   * Get current URL with additional parameters
21   *
22   * @param {string} additionalParameters
23   * @return string
24   */
25  me.getCurrentUrlWithAdditionalParameters = function (additionalParameters) {
26    if (window.location.origin) {
27      return window.location.origin + window.location.pathname + '?' + additionalParameters;
28    } else {
29      return window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + additionalParameters;
30    }
31  };
32
33  /**
34   * get days for month
35   * this starts an ajax call to the server and make them globally available
36   *
37   * @param {object} picker
38   * @param {int} month
39   * @param {int} year
40   * @param {string} storagePages
41   * @param {string} categories
42   * @return void
43   */
44  me.fillPickerWithDaysOfMonth = function (picker, month, year, storagePages, categories) {
45    let additionalParameters = [
46      'month=' + (month + 1),
47      'year=' + year,
48      'categories=' + categories,
49      'storagePages=' + storagePages
50    ];
51
52    fetch(me.getCurrentUrlWithAdditionalParameters(additionalParameters.join('&')), {
53      headers: {
54        'Content-Type': 'application/json',
55        'ext-events2': 'getDaysForMonth'
56      }
57    }).then(response => {
58      if (response.ok && response.status === 200) {
59        return response.json();
60      }
61      return Promise.reject(response);
62    }).then(days => {
63      // make global available. Needed for event render:day
64      me.allDays = days;
65      me.highlightedDays = Array.from(me.allDays, (day) => day.dayOfMonth);
66      picker.setHighlightedDays(me.getHighlightedDays(days, month, year));
67    }).catch(error => {
68      console.warn('Request error', error);
69    });
70  };
71
72  /**
73   * Get highlighted days which will be clickable for detailed list-view.
74   * No holidays will be added
75   *
76   * @param {object} days
77   * @param {int} month
78   * @param {int} year
79   * @returns array
80   */
81  me.getHighlightedDays = function (days, month, year) {
82    let highlightedDays = [];
83
84    days.forEach(day => {
85      if (!day.isHoliday) {
86        highlightedDays.push(new Date(year, month, day.dayOfMonth, 0, 0, 0));
87      }
88    });
89
90    return highlightedDays;
91  };
92
93  me.initializeDatePicker = function ($element) {
94    let startDate = new Date(
95      parseInt(me.environment.year),
96      parseInt(me.environment.month) - 1,
97      parseInt(me.environment.day), 0, 0, 0
98    );
99
100    let picker = new Litepicker({
101      element: $element,
102      inlineMode: true,
103      startDate: startDate,
104      lang: 'de-DE',
105      format: 'DD.MM.YYYY'
106    });
107
108    picker.on('change:month', (date, calendarIdx) => {
109      me.fillPickerWithDaysOfMonth(
110        picker,
111        date.getMonth(),
112        date.getFullYear(),
113        me.environment.storagePids,
114        me.environment.settings.categories
115      );
116    });
117
118    picker.on('before:show', (el) => {
119      me.fillPickerWithDaysOfMonth(
120        picker,
121        me.currentDate.getMonth(),
122        me.currentDate.getFullYear(),
123        me.environment.storagePids,
124        me.environment.settings.categories
125      );
126    });
127
128    picker.on('preselect', (date1, date2) => {
129      me.getUriForDayAndRedirect(date1);
130    });
131
132    picker.on('render:day', (dayElement, date) => {
133      if (me.allDays !== []) {
134        me.allDays.forEach(day => {
135          if (day.dayOfMonth === parseInt(dayElement.innerHTML)) {
136            day.additionalClasses.forEach(className => {
137              dayElement.classList.add(className);
138            });
139          }
140        });
141      }
142    });
143
144    // In case of showInline either "show" nor "render" event will be called. Initialize them manually
145    picker.hide();
146    picker.show();
147  };
148
149  me.isInHighlightedDays = function (date) {

150    let checkDay = date.getDate();
151    return me.highlightedDays.includes(checkDay);
152  }
153
154  me.getUriForDayAndRedirect = function (date) {
155   if (me.isInHighlightedDays(date)) {
156     let additionalParameters = [
157       'day=' + date.getDate(),
158       'month=' + (date.getMonth() + 1),
159       'year=' + date.getFullYear(),
160       'pidOfListPage=' + me.environment.pidOfListPage
161     ];
162
163     fetch(me.getCurrentUrlWithAdditionalParameters(additionalParameters.join('&')), {
164        headers: {
165          'Content-Type': 'application/json',
166          'ext-events2': 'getUriForDay'
167        }
168      }).then(response => {
169        if (response.ok && response.status === 200) {
170          return response.json();
171        }
172        return Promise.reject(response);
173      }).then(data => {
174        if (data.uri !== '') {
175          console.log('Redirect to: ' + data.uri);
176          window.location.href = data.uri;
177        }
178      }).catch(error => {
179        console.warn('Request error', error);
180      });
181    }
182  };
183
184  me.initializeDatePicker($element);
185}
186
187Array.from(document.querySelectorAll('div.events2calendar')).forEac

187h($element => {
188  new Events2Calendar(
189    $element,
190    JSON.parse($element.getAttribute('data-environment'))
191  );
192});