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)
}
});