fullcalendar ver 6.15 - how to get event ID on event click and how to add a line break in event description?

Question

Searched on SO, such as this thread, and this one, but have not found a working solution. Basically once the event is added, the ID is not in the HTML. But we need the ID for background work.

Second question is, how to add a line break to the event description? I tried to use <br> or \n, and neither works.

Thank you for your time.

HTML:

        <div id='calendar'></div>

JS code is below

<script>
    document.addEventListener('DOMContentLoaded', function () {
        createCalendar();
    });
</script>
<script>
    function createCalendar() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            selectable: true,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'timeGridWeek,dayGridMonth'  // 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            dateClick: function (info) {
                //alert('clicked ' + info.dateStr);
                console.log(info);
            },
            eventClick: function (start, end, jsEvent, view, resource) {
                console.log(
                    'select',
                    resource ? resource.id : '(no resource)'
                );
            },
            initialView: 'timeGridWeek', 
            allDaySlot: false,
            slotMinTime: "08:00:00",
            slotMaxTime: "21:00:00",
            height: 1000,
            expandRows: true,
            eventRender: function (event, element) {
                element.find('.fc-sticky').attr("id", event.id);
            }
        });

        var event1 = {
            id: "aabbcc", title: 'Sam Smith, \nJohn Doe',
            startTime: "12:00:00", endTime: "14:00:00",
            startRecur: new Date(2023, 3, 4, 12), endRecur: new Date(2023, 5, 4, 12),
            daysOfWeek: [2]
        };

        calendar.addEvent(event1);

        calendar.render();
    }
</script>

Answer 1

I hunted high and low to also try to find an answer to this and eventually I found a way. I am not sure it is the official way because I could not find that! However if you want to get an event id then you can use the following method:-

eventClick: function(info) {
  console.log(info.event._def.publicId)
},

This will give you the event ID plus you can also get the other event information such as title etc