How can I add bootstrap 'modal' in fullCalander-CodePudding

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.

CodePudding user response：

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/[email protected]/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/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>

<div id="calendarBox">
        <div id="calendar"></div>
    </div>
    
    <!-- Modal -->
    <div  id="calender_event" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div  role="document">
            <div >
                <div >
                    <h5  id="exampleModalLabel">Modal title</h5>
                    <button type="button"  data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div >
                    Here will be the body of popup (You can populate it dynamically as well)...
                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>