at
Icarus-manifest.de

I use a calender widget, which needs to be customized, but I´m in some challenges and hope someone can help me.

At the right side of the widgets bookable slots are shown.

The bookable slot are loaded on div loading and onchange, if “Bitte Sitzplatz wählen” mit the id “available” will be changed. Each bookable slot has an unique id in the custom div parameter “data-event-index”.

I would like to achieve:

If a user clicks on a bookable slot, the value of “data-event-index” will be stored in the input field “slotID” with the id “slotID”.

I already tried:

const SlotIdSelected = document.getElementById('slotID');

let allCalendarSlots = fetch("https://share.ninox.com/mjpp0k6tuvtekgat8bgokas5rcq6i4ew1lre").then(res => res.json()).then((data) => {
    var data_filter = data.filter( element => element.available>=$("input[name='available']:checked").val());
    console.log(data_filter)
    $(document).ready(function() {
 $('#calendar').evoCalendar({
    'format': 'mm/dd/yyyy',
    'theme': 'Royal Navy',
    'language': 'de',
    'firstDayOfWeek': 1,
    'sidebarToggler': true,
    'todayHighlight': true,
    'eventListToggler': true,
    'eventHeaderFormat': 'dd. MM yyyy',
    'calendarEvents': data_filter,
    })
const elements = document.querySelectorAll(".event-container")

elements.forEach((item) => {
    item.addEventListener('click', () => {
        SlotIdSelected.value = '1234'
    })
});
});
});

With the initial calendar loading I use this script. But at first I´m not able to get the value of the custom parameter (thats why I tested it with 1234) and second it works only for the initialy visible bookable slots of the actual day, but not if I switch to another day.

Thank you very much.

If a user clicks on a bookable slot, the value of “data-event-index” will be stored in the input field “slotID” with the id “slotID”.