I am updating my Fullcalendar install to V4. I am feeding mine via JSON and I have HTML (some FontAwsome Icons) in my event title. Here is my old V3 code to render my elements:
$(function() {
$('#calendars').fullCalendar({
events: '/activities/calendar.json',
contentHeight: 750,
displayEventTime: false,
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
businessHours: {
dow: [1, 2, 3, 4, 5]
},
handleWindowResize: true,
eventLimit: 2,
eventLimitClick: 'popover',
eventRender: function(event, element) {
element.find('.fc-title').html(event.title);
}
});
});
The eventRender:
is what fails. The new docs don't clearly explain how I my convert this to the new version. With this code in place my calendar simply fails to load with json parse error in the console. If I remove it it works but my HTML is rendered as plain text. I am sure I am missing something obvious and easy here. My JS skill set is not that great.
As of FullCalendar v5 you can use eventContent.
document.addEventListener('DOMContentLoaded', function() {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
"id": 1,
"title": "First Line<br>Second Line",
"start": "2022-06-04",
"end": null,
"allDay": true,
"editable": true,
"className": "badge-soft-warning",
}
],
eventContent: function( info ) {
return {html: info.event.title};
}
});
calendar.render();
})
After some stubmling around I found this:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('timeline');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/activities/timeline.json',
plugins: [ 'resourceTimeline', 'interaction' ],
header: {
left: 'prev,today,next',
center: 'title',
right: 'resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear, '
},
eventRender: function(info) {
info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
}
});
calendar.render();
});
I am open to alternate cleaner answers.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.