https://iticket.kg/imapjs/js/icalendar.js?v=m1.2.1

1function iCalendar(settings) {
2  let fp = null
3  const flatpickr = settings.fpr
4
5  const loadSessionView = (session, hideGetTicketButton) => {
6    let button = ''
7    let config_url = null
8
9    if (session.available_tickets_count == 0) {
10      button = `<div class="sa-col-4">
11                  <button class="toggler" type="button" disabled>
12                    ${scope.settings.locales.sold_out}
13                  </button>
14                </div>`
15    } else {
16      config_url = session.config_url
17
18      if (!hideGetTicketButton) {
19        button = `<div class="sa-col-4">
20                  <button class="toggler" type="button" data-session="${session.id}" data-config_url="${config_url}">
21                    ${scope.settings.locales.get_tickets}
22                  </button>
23                </div>`
24      }
25    }
26
27    const free =
28      session.min_price == session.max_price && session.min_price == 0
29
30    const price_range =
31      session.min_price == session.max_price
32        ? session.min_price
33        : session.min_price + ' - ' + session.max_price
34
35    const accordion_item = cash(`<div class="accordion-item">
36    				<div class="info">
37    					<div class="sa-col-1">
38    						<div class="session-name">${session.name} ${
39      session.session_lang && session.session_lang != '-'
40        ? '(' +
41          scope.settings.locales.language +
42          ': ' +
43          session.session_lang +
44          ')'
45        : ''
46    } ${
47      session.age_limit
48        ? '(' +
49          session.age_limit +
50          ')'
51        : ''
52    }</div>
53    						<div class="accordion-label">${session.venue.name}</div>
54    					</div>
55    					<div class="sa-col-2">
56    						<div class="accordion-label">${scope.settings.locales.date}</div>
57    						<div class="value">
58                ${session.session_dates}
59                </div>
60    					</div>
61    					<div class="sa-col-3">
62    						<div class="accordion-label">${scope.settings.locales.price}</div>
63    						<div class="value">
64                  ${free ? scope.settings.locales.free : price_range} ${
65      free ? '' : scope.settings.currency
66    }
67                </div>
68    					</div>
69    					${button}
70    				</div>
71    				<div class="map"></div>
72    			</div>`)
73
74    scope.accordions.append(accordion_item)
75
76    if (hideGetTicketButton) {
77      if (config_url) {
78        accordion_item.addClass('collapsed')
79
80        initMap({
81          container: accordion_item.find('.map'),
82          config_url,
83        })
84      }
85    }
86  }
87
88  const showSingleSessionView = (id) => {
89    const toggleButton = cash(`.toggler[data-session="${id}"]`);
90
91    if (toggleButton){

92      try {
93        const accordion_item = toggleButton
94        .parents('.accordion-item')
95        .toggleClass('collapsed')
96
97        accordion_item.siblings().removeClass('collapsed')
98
99        if (scope.imap) {
100            scope.imap.destroy()
101        }
102
103        initMap({
104          container: accordion_item.find('.map'),
105          config_url: toggleButton[0].dataset.config_url,
106        })
107      } catch (e){
108        // do nothing
109      }
110    }
111  }
112
113  const loadCalendar = async () => {
114    // await loadExternalFiles([
115    //   {
116    //     type: 'css',
117    //     url: 'http://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css',
118    //   },
119    //   {
120    //     type: 'js',
121    //     url: 'http://cdn.jsdelivr.net/npm/flatpickr',
122    //   },
123    // ])
124
125    loadCalendarView()
126
127    // loadSessions(dates[min_date])
128  }
129
130  const initFlatpicker = () => {
131    if (fp) {
132      try {
133        fp.destroy()
134      } catch {}
135
136      fp = null
137    }
138
139    let showMonths = 1
140
141    if (window.innerWidth >= 1024) {
142      showMonths = 3
143    } else if (window.innerWidth >= 768) {
144      showMonths = 2
145    }
146
147    fp = flatpickr(scope.calendar_input[0], {
148      locale: settings.locale,
149      inline: true,
150      showMonths,
151      dateFormat: 'Y-m-d',
152      // defaultDate: "",
153      minDate: min_date,
154      maxDate: max_date,
155      enable: Object.keys(dates),
156      // defaultDate: min_date,
157      onChange: (selectedDates, selected_date, instance) => {
158        // if (dates[selected_date].length == 1){
159        //   window.location.href = settings.url + dates[selected_date][0].id + window.location.search;
160        // } else {
161         loadSessions(dates[selected_date])
162        // }
163      },
164    })
165
166    if (settings.selected && !scope.imap){
167      const date = new Date(settings.selected.session_starts_at)
168
169      const key =
170        date.getFullYear() +
171        '-' +
172        ('0' + (date.getMonth() + 1)).slice(-2) +
173        '-' +
174        ('0' + date.getDate()).slice(-2)
175
176      fp.setDate(key, true)
177    }
178  }
179
180  const loadCalendarView = () => {
181    initFlatpicker()
182    window.addEventListener('resize', initFlatpicker)
183  }
184
185  const loadSessions = (sessions) => {
186    scope.accordions.empty()
187
188    const hideGetTicketButton = sessions.length == 1
189
190    sessions.forEach(function (session) {
191      loadSessionView(session, hideGetTicketButton)
192    })
193
194    if (settings.selected){
195      showSingleSessionView(settings.selected.id)
196    }
197  }
198
199  const bindEvents = () => {
200    cash(document).off('click', `${scope.settings.container} .toggler`)
201    cash(document).on(
202      'click',
203      `${scope.settings.container} .toggler`,
204      function (e) {
205        window.location.href = settings.url + this.dataset.session + window.location.search;
206
207        // const accordion_item = cash(this)
208        //   .parents('.accordion-item')
209        //   .toggleClass('collapsed')
210        // accordion_item.siblings().removeClass('collapsed')
211
212        // if (scope.imap) {
213        //   scope.imap.destroy()
214        // }
215
216        // initMap({
217        //   container: accordion_item.find('.map'),
218        //   config_url: this.dataset.config_url,
219        // })
220      }
221    )
222  }
223
224  const initMap = (settings) => {
225    scope.imap = new iMap(
226      cash.extend(settings, {
227        headers: scope.settings.headers,
228        locales: scope.settings.locales,
229        client: scope.settings.client,
230        assets_url: scope.settings.assets_url,
231        version: scope.settings.version,
232        embed: scope.settings.embed,
233        currency: scope.settings.currency,
234      }),
235      scope.settings.callbacks
236    )
237  }
238
239  const init = async (sessions) => {
240    await loadExternalFiles([
241      {
242        type: 'css',
243        url:
244          '/imapjs/css/icalendar.css?v=' +
245          scope.settings.version,
246      },
247      {
248        type: 'css',
249        url:
250          '/imapjs/css/imap.css?v=' +
251          scope.settings.version,
252      },
253    ])
254
255    if (!showCalendar) {
256      loadSessions(sessions)
257
258      bindEvents()
259
260      return
261    }
262
263    sessions.forEach((session) => {
264      const date = new Date(session.session_starts_at)
265

266      const key =
267        date.getFullYear() +
268        '-' +
269        ('0' + (date.getMonth() + 1)).slice(-2) +
270        '-' +
271        ('0' + date.getDate()).slice(-2)
272
273      if (!min_date) {
274        min_date = key
275      }
276      max_date = key
277      ;(dates[key] = dates[key] || []).push(session)
278    })
279
280    if (Object.keys(dates).length > 1) {
281      loadCalendar()
282    } else {
283      loadSessions(dates[Object.keys(dates)[0]])
284    }
285
286    bindEvents()
287  }
288
289  const dates = {}
290  let min_date = null
291  let max_date = null
292  const showCalendar = settings.sessions.length > 15 || settings.show_calendar
293
294  const scope = this
295
296  scope.settings = cash.extend({ container: 'body', sessions: [] }, settings)
297  scope.container = cash(scope.settings.container)
298  scope.accordions = cash('<div class="accordions" />').appendTo(
299    scope.container
300  )
301
302  if (showCalendar) {
303    scope.calendar = cash('<div class="calendar" />').prependTo(scope.container)
304    scope.calendar_input = cash('<input />').appendTo(scope.calendar)
305  }
306
307  init(scope.settings.sessions)
308
309  return scope
310}