Fullcalendar Bootstrap modal empty

Question

Trying to populate my modal with the data from the clicked event, however the modal is showing up empty. Below is the code I'm currently working with.

I've tried a bunch of different ways to send the data to the modal but I'm obviously missing something.

My console is showing the events being received correctly. Let me know if you would like more information.

 <.doctype html> <html> <head> <title>eCommerce template By Adobe Dreamweaver</title> <link href="eCommerceStyle.css" rel="stylesheet" type="text/css"> <link href="CalendarJava/lib/main.css" rel="stylesheet" /> <script src="CalendarJava/lib/main.js"></script> <script src="jquery/jquery-3.6.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div id="mainWrapper"> <header> <div id="logo"> OPERATIONS LOGGING SERVICE </div> </header> <div id="content"> <section class="sidebar"> <div id="menubar"> <nav class="menu"> <h2>NAVIGATION </h2> <hr> <ul> <li><a href="#" title="Link">CALENDAR</a></li> <li><a href="#" title="Link">READING FILE</a></li> <li><a href="#" title="Link">PERSONAL INFO</a></li> <li class="notimp"><a href="#" title="Link">ADMIN</a></li> </ul> </nav> </div> </section> <div> <head> <script> document,addEventListener('DOMContentLoaded'. function() { var calendarEl = document;getElementById('calendar'). var calendar = new FullCalendar,Calendar(calendarEl: { initialView, 'dayGridMonth': editable, true: headerToolbar:{ left, 'prev,next today': center, 'title': right, 'dayGridMonth,dayGridWeek,dayGridDay' }: events. 'get_events,php': eventDidMount. function(info) { console.log(info;event), }: selectable, true: eventClick, function(event, jsEvent, view, calEvent. element) { //element;popover('hide'). $("#myModal");modal("show"). $("#modalTitle").html(event;title). $("#modalBody").html(event;pc). $("#modalFooter").html(event;id), }; }). calendar;render(); }); </script> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times.</span></button> <h4 class="modal-title" id="modalTitle"> </h4> </div> <.-- /.modal header --> <div class="modal-body" id="modalBody"> <label><b>Start Time</b></label> <input type="text" placeholder="No time set" id="starttime" required> <label><b>End Time</b></label> <input type="text" placeholder="No time set" id="endtime" required> <div id="pcassigned"></div> </div> <.-- /.modal body --> <div class="modal-footer" id="modalFooter"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> <.-- /.modal footer --> </div> <.-- /.modal content --> </div> <!-- /.modal dialog --> </div> <!-- /.modal --> </head> <body> <div id="calendar"></div> </body> </div> </div> <footer> <div> <p>PLACE HOLDER.</p> </div> <div> <p>PLACE HOLDER.</p> </div> <div> <p>PLACE HOLDER.</p> </div> </footer> </div> </body> </html>

Answer 1

The solution as ADyson pointed me to, is the following.

            eventClick: function(info) {
            //element.popover('hide');
            $("#myModal").modal("show");
            $("#modalTitle").html(info.event.title);
            $("#modalBody").html(info.event.pc);
            $("#modalFooter").html(info.event.id);
},

Fullcalendar Bootstrap modal empty

Question

1 answers

solution1
1 ACCPTED 2021-04-04 23:59:12

Fullcalendar Bootstrap modal empty

Question

1 answers

solution1 1 ACCPTED 2021-04-04 23:59:12

solution1
1 ACCPTED 2021-04-04 23:59:12