如何在fullCalendar中集成Bootstrap Modal组件？

安全阿岳

2026-8-22

在fullCalendar中集成Bootstrap Modal实现点击日期/事件弹窗

问题描述

我正在制作一个展示活动信息的fullCalendar页面，目标是点击任意日期或事件时，通过Bootstrap的Modal组件展示特定信息。尝试了很多方案都没解决，求指导如何正确添加Modal。现有代码如下：

原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();
});

原HTML代码

<body>
    <div id="calendarBox">
        <div id="calendar"></div>
    </div>
</body>
</html>

实现步骤

1. 引入必要依赖资源

确保页面中按顺序引入jQuery、Bootstrap的CSS/JS，以及fullCalendar的资源：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- fullCalendar CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
<!-- fullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>

2. 添加Bootstrap Modal的HTML结构

在页面body中添加Modal代码，放在日历容器之后：

<!-- Bootstrap Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="eventModalLabel">详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="modalBody">
        <!-- 内容将通过JS动态填充 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

3. 修改fullCalendar配置，添加点击事件处理

在fullCalendar的配置中新增dateClick（点击日期）和eventClick（点击事件）回调，用来触发Modal并填充内容：

document.addEventListener('DOMContentLoaded', function () {
   var calendarEl = document.getElementById('calendar');
   // 初始化Modal实例
   var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
   var modalTitle = document.getElementById('eventModalLabel');
   var modalBody = document.getElementById('modalBody');

   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 23:59:59' // 修正结束时间格式，避免24: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,
       // 点击日期触发弹窗
       dateClick: function(info) {
          modalTitle.textContent = `日期：${info.dateStr}`;
          modalBody.innerHTML = `<p>你点击了日期：${info.dateStr}</p>`;
          eventModal.show();
       },
       // 点击事件触发弹窗
       eventClick: function(info) {
          modalTitle.textContent = `活动：${info.event.title}`;
          const startDate = info.event.start.toLocaleDateString();
          const endDate = info.event.end ? info.event.end.toLocaleDateString() : startDate;
          modalBody.innerHTML = `
            <p><strong>活动标题：</strong>${info.event.title}</p>
            <p><strong>开始日期：</strong>${startDate}</p>
            <p><strong>结束日期：</strong>${endDate}</p>
          `;
          eventModal.show();
       }
    });
    calendar.render();
});

4. 完整HTML结构

整合后的完整页面代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>活动日历</title>
    <!-- 依赖资源 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
</head>
<body>
    <div id="calendarBox">
        <div id="calendar"></div>
    </div>

    <!-- Bootstrap Modal -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventModalLabel">详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modalBody">
                    <!-- 动态填充内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
           var calendarEl = document.getElementById('calendar');
           var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
           var modalTitle = document.getElementById('eventModalLabel');
           var modalBody = document.getElementById('modalBody');

           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 23:59:59'
              },
              {            
                 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,
               dateClick: function(info) {
                  modalTitle.textContent = `日期：${info.dateStr}`;
                  modalBody.innerHTML = `<p>你点击了日期：${info.dateStr}</p>`;
                  eventModal.show();
               },
               eventClick: function(info) {
                  modalTitle.textContent = `活动：${info.event.title}`;
                  const startDate = info.event.start.toLocaleDateString();
                  const endDate = info.event.end ? info.event.end.toLocaleDateString() : startDate;
                  modalBody.innerHTML = `
                    <p><strong>活动标题：</strong>${info.event.title}</p>
                    <p><strong>开始日期：</strong>${startDate}</p>
                    <p><strong>结束日期：</strong>${endDate}</p>
                  `;
                  eventModal.show();
               }
            });
            calendar.render();
        });            
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者CHOIALTH

如何在fullCalendar中集成Bootstrap Modal组件？

问题描述 #

原JavaScript代码 #

原HTML代码 #

实现步骤 #

1. 引入必要依赖资源 #

2. 添加Bootstrap Modal的HTML结构 #

3. 修改fullCalendar配置，添加点击事件处理 #

4. 完整HTML结构 #