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>
Thank you all for reading my long question.
Advertisement
Answer
You can user eventClick option for click event of any of the event.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
height: '800px',
eventClick: function(info) {
var eventObj = info.event;
console.log(eventObj);
if (eventObj.start) {
//alert('Clicked on ' + eventObj.start);
$('#calender_event').modal('show');
$('.modal-title').html(eventObj.title);
}
},
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();
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.bundle.min.js" ></script>
<div id="calendarBox">
<div id="calendar"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="calender_event" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here will be the body of popup (You can populate it dynamically as well)...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>