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
JavaScript
x
51
51
1
<script type="text/javascript">2
document.addEventListener('DOMContentLoaded', function () {3
var calendarEl = document.getElementById('calendar');4
var calendar = new FullCalendar.Calendar(calendarEl, {5
timeZone: 'UTC',6
initialView: 'dayGridMonth',7
height: '800px', 8
events:[9
{ 10
title: "'event1",11
color : "yellow",12
textColor : "black", 13
start: '2022-06-01 00:00:00', 14
end: '2022-08-31 24:00:00'15
16
},17
{ 18
title: 'event2', 19
start: '2022-08-17', 20
end: '2022-08-21' 21
}, 22
{ 23
title: 'event3', 24
start: '2022-08-17', 25
end: '2022-08-21' 26
}, 27
{ 28
title: 'event4', 29
start: '2022-08-31', 30
end: '2022-09-05' 31
}, 32
{ 33
title: 'event5', 34
start: '2022-08-26',35
color : "lightblue",36
textColor : "black", 37
end: '2022-09-03' 38
} 39
], 40
headerToolbar: {41
left: 'prev,next today', 42
center: 'title', 43
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'44
},45
editable: false, 46
displayEventTime: false 47
});48
calendar.render();49
}); 50
</script>51
JavaScript
1
7
1
<body>2
<div id="calendarBox">3
<div id="calendar"></div>4
</div>5
</body>6
</html>7
Thank you all for reading my long question.
Advertisement
Answer
You can user eventClick option for click event of any of the event.
JavaScript
1
59
59
1
document.addEventListener('DOMContentLoaded', function () {2
var calendarEl = document.getElementById('calendar');3
var calendar = new FullCalendar.Calendar(calendarEl, {4
timeZone: 'UTC',5
initialView: 'dayGridMonth',6
height: '800px',7
eventClick: function(info) {8
var eventObj = info.event;9
console.log(eventObj);10
if (eventObj.start) {11
//alert('Clicked on ' + eventObj.start);12
$('#calender_event').modal('show');13
$('.modal-title').html(eventObj.title);14
}15
},16
events:[17
{18
title: "'event1",19
color : "yellow",20
textColor : "black",21
start: '2022-06-01 00:00:00',22
end: '2022-08-31 24:00:00'23
24
},25
{26
title: 'event2',27
start: '2022-08-17',28
end: '2022-08-21'29
},30
{31
title: 'event3',32
start: '2022-08-17',33
end: '2022-08-21'34
},35
{36
title: 'event4',37
start: '2022-08-31',38
end: '2022-09-05'39
},40
{41
title: 'event5',42
start: '2022-08-26',43
color : "lightblue",44
textColor : "black",45
end: '2022-09-03'46
}47
48
],49
headerToolbar: {50
left: 'prev,next today',51
center: 'title',52
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'53
},54
editable: false,55
displayEventTime: false56
57
});58
calendar.render();59
});JavaScript
1
30
30
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css"/>3
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>5
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js"></script>6
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.bundle.min.js" ></script>7
8
<div id="calendarBox">9
<div id="calendar"></div>10
</div>11
12
<!-- Modal -->13
<div class="modal fade" id="calender_event" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">14
<div class="modal-dialog" role="document">15
<div class="modal-content">16
<div class="modal-header">17
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>18
<button type="button" class="close" data-dismiss="modal" aria-label="Close">19
<span aria-hidden="true">×</span>20
</button>21
</div>22
<div class="modal-body">23
Here will be the body of popup (You can populate it dynamically as well)24
</div>25
<div class="modal-footer">26
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>27
</div>28
</div>29
</div>30
</div>