Hi I'm making fullCalendar page for giving information of some events.
When I click any date or event, my goal is give specific information.
So I want to add bootstrap's component 'modal' in fullCalendar.
I searched much time.. but I couldn't get solution for my problem.
How can I add modal on my fullCalendar page well.. Please help me.
My codes
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
height: '800px',
events:[
{
title: "'event1",
color : "yellow",
textColor : "black",
start: '2022-06-01 00:00:00',
end: '2022-08-31 24:00:00'
},
{
title: 'event2',
start: '2022-08-17',
end: '2022-08-21'
},
{
title: 'event3',
start: '2022-08-17',
end: '2022-08-21'
},
{
title: 'event4',
start: '2022-08-31',
end: '2022-09-05'
},
{
title: 'event5',
start: '2022-08-26',
color : "lightblue",
textColor : "black",
end: '2022-09-03'
}
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: false,
displayEventTime: false
});
calendar.render();
});
</script>
<body>
<div id="calendarBox">
<div id="calendar"></div>
</div>
</body>
</html>
I want to make it like this
enter image description here
Thank you all for reading my long question.
