fullcalendar set id issue

I am using fullcalendar v6.1.10

    const calendarEl = document.querySelector(".custom_event_calendar");

    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'de',
        initialView: "dayGridMonth",
        displayEventEnd: true,
        slotLabelFormat: {
            hour: "numeric",
            meridiem: "short",
            hour12: true
        },
        events:[ {
            id: '80185814',
            start: "2023-12-05T08:00",
            end: "2023-12-05T16:00",
            title: "Lorem"
        }],

    });
    calendar.render();

when I set ID to any event renders event with no id

I logged elements, but id is just empty

Also do that id will be set to event element as html attribute?

>Solution :

The id on an event is not to set the HTML id attribute. So you won’t see that in the DOM.

It’s used together with calendar.getEventById() to get the event by the given id.

To get the id through an eventClick() handler, you shouldn’t log the event.el.id since that’s the DOM element, which has no ID as explained above. But you’ll need to log the event.id to get the FullCalendar Event Object.

eventClick: function(event){
    console.log('Clicked on #', event.event.id);
}

The param passed to eventClick has the following:

Small demo showing this;

• Click on the event to log the ID
• Uncomment last line to show the work of getEventById()

const calendarEl = document.querySelector(".custom_event_calendar");

const calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'de',
    initialView: "dayGridMonth",
    displayEventEnd: true,
    slotLabelFormat: {
        hour: "numeric",
        meridiem: "short",
        hour12: true
    },
    events:[ {
        id: '80185814',
        start: "2023-12-05T08:00",
        end: "2023-12-05T16:00",
        title: "Lorem"
    }],
    eventClick: function(event){
        console.log('Clicked on #', event.event.id);
    }
});
calendar.render();

const ev = calendar.getEventById('80185814');
// console.log(ev)

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
<div class='custom_event_calendar'></div>