I'm trying to add custom field in calendar below title, it is not getting displayed, any help?
my code:
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-08-17',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [{
title: 'Event',
name: 'John',
start: '2021-08-17'
}]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
In fullcalendar v3 working code:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [{
title: 'My Event',
name: 'John',
start: '2021-08-12T12:00:00'
}],
eventRender: function(event, element) {
element.find('.fc-title').append(event.name);
}
});
});
in v5 eventRender was changed to eventDidMount, but when i'm trying use find method error appears.
I've used vanilla js and from event used extendedProps object which holds non-standart fields:
events: [{
title: 'Event',
name: 'John',
start: '2021-08-17'
}],
eventDidMount: function(info) {
let name = document.createElement('div');
name.innerHTML=info.event.extendedProps.name;
document.querySelector('.fc-event-title-container').append(name);
}