Fullcalendar Bootstrap 模态空

Question

尝试用单击事件的数据填充我的模式，但模式显示为空。下面是我目前正在使用的代码。

我尝试了很多不同的方法来将数据发送到模态，但我显然遗漏了一些东西。

我的控制台显示正确接收到的事件。如果您想了解更多信息，请告诉我。

<!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

ADyson 指出的解决方案如下。

            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 模态空

Fullcalendar Bootstrap modal empty

html

javascript

fullcalendar

bootstrap-modal