1

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>
ADyson
  • 57,178
  • 14
  • 51
  • 63
Cal
  • 747
  • 1
  • 13
  • 30
  • `eventClick: function (start, end, jsEvent, view, resource) {`...where did you get the idea for that from? That's the old (v3) signature for `select`. It does not, and never did have, anything to do with `eventClick`. Try [reading the documentation](https://fullcalendar.io/docs/eventClick) to understand the correct function signature. That should then point you in the right direction to get the event data. – ADyson Apr 08 '23 at 09:07

0 Answers0