Untitled

  create_calendar(input_id) {
    momentTimezone.moment = moment;
    window.calendars ??= []

    window.moment ??= moment

    const target_form = document.getElementsByTagName('form')[0]
    const { timezone, starthours, endhours } = target_form.dataset

    const input_element = document.getElementById(input_id)

    const { index, duration } = input_element.dataset

    const calendar = datepicker(`#${input_id}`, {
      // DISPLAY
      controls: ['calendar', 'timegrid'],
      display: 'inline',
      themeVariant: 'light',
      calendarScroll: 'horizontal',

      // TIMEZONE
      timezonePlugin: momentTimezone,
      returnFormat: 'iso8601',
      dataTimezone: timezone,

      // MIN/MAX/DURATION
      min: moment(starthours, 'hh:mm').format(),
      minTime: starthours,
      maxTime: endhours,
      stepMinute: parseInt(duration),

      // Slots and labels
      invalid: [],
      labels: [],

      // EVENTS
      onChange: (e, instance) => {
        // disable selected timestamp in other mobiscroll instances
        window.calendars.filter(c => c != instance).forEach(function (cal) {
          const { invalid } = cal.props
          let new_invalid = invalid.filter(i => i.title !== `calendar_${index}`)
          new_invalid.push({
            start: moment(e.value),
            end: moment(e.value).add(parseInt(duration) - 1, 'minutes'),
            title: `calendar_${index}`
          })
          cal.setOptions({
            invalid: new_invalid
          })
        })
      },
      onPageChange: e => {
        const { month } = e
        this.get_timeline(parseInt(index), month)
      }
    });