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>
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