求推荐兼容Bootstrap 5的纯JS/jQuery可点击日历组件

1. FullCalendar（Bootstrap 5兼容版） #

这款组件虽主打日程管理，但可轻松配置为纯点击式日历，完美适配Bootstrap 5和jQuery 3.6，自带月份切换的prev/next按钮，支持日期点击事件绑定，完全满足你的电影时段展示需求。

核心配置示例： #

$(document).ready(function() {
  $('#calendar').fullCalendar({
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: '' // 隐藏无关的日程视图控件
    },
    editable: false,
    events: [], // 清空默认日程展示
    dateClick: function(info) {
      // 点击日期后更新目标div的电影时段内容
      $('#movie-time-slots').html(`
        <h5>${info.dateStr} 可用预订时段</h5>
        <ul class="list-group">
          <li class="list-group-item">10:00 - 12:00</li>
          <li class="list-group-item">14:30 - 16:30</li>
          <li class="list-group-item">19:00 - 21:00</li>
        </ul>
      `);
    }
  });
});

配套Bootstrap结构：

<div class="container mt-4">
  <div id="calendar"></div>
  <div id="movie-time-slots" class="mt-4"></div>
</div>

2. Bootstrap Calendar（轻量Bootstrap原生适配） #

专为Bootstrap打造的轻量日历组件，原生支持月份切换控件，日期点击事件与jQuery配合无冲突，代码量小、易定制，适合快速集成。

核心用法示例： #

$(document).ready(function() {
  $('#calendar').bootstrapCalendar({
    onSelect: function(date) {
      // 点击日期后加载对应电影时段
      $('#movie-time-slots').text(`正在加载${date.format('YYYY-MM-DD')}的可用时段...`);
      // 可替换为AJAX请求获取真实时段数据
      setTimeout(() => {
        $('#movie-time-slots').html(`
          <div class="alert alert-info">${date.format('YYYY-MM-DD')} 共3场可预订</div>
          <div class="row g-2">
            <div class="col-md-4"><button class="btn btn-primary btn-block">10:00</button></div>
            <div class="col-md-4"><button class="btn btn-primary btn-block">15:00</button></div>
            <div class="col-md-4"><button class="btn btn-primary btn-block">20:00</button></div>
          </div>
        `);
      }, 500);
    }
  });
});

3. 自定义轻量日历（完全可控） #

如果不想依赖第三方组件，用Bootstrap 5的网格系统+jQuery就能快速实现，完全贴合你的需求逻辑：

核心实现思路与代码片段： #

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

function renderCalendar() {
  $('#calendar').empty();
  // 渲染月份标题与切换按钮
  $('#calendar').append(`
    <div class="d-flex justify-content-between mb-3">
      <button id="prev-month" class="btn btn-secondary">上一月</button>
      <h4>${currentYear}年${currentMonth+1}月</h4>
      <button id="next-month" class="btn btn-secondary">下一月</button>
    </div>
    <div class="row">
      <!-- 循环生成日期网格（省略具体日期计算逻辑） -->
      <div class="col-1 text-center p-2 border date-item" data-date="2024-05-01">1</div>
      <div class="col-1 text-center p-2 border date-item" data-date="2024-05-02">2</div>
      <!-- 更多日期元素 -->
    </div>
  `);
  
  // 绑定日期点击事件
  $('.date-item').click(function() {
    let selectedDate = $(this).data('date');
    $('#movie-time-slots').html(`<h6>${selectedDate} 可用场次</h6>`);
  });
  
  // 绑定月份切换事件
  $('#prev-month').click(() => {
    currentMonth--;
    if(currentMonth < 0) {
      currentMonth = 11;
      currentYear--;
    }
    renderCalendar();
  });
  
  $('#next-month').click(() => {
    currentMonth++;
    if(currentMonth > 11) {
      currentMonth = 0;
      currentYear++;
    }
    renderCalendar();
  });
}

// 初始化日历
$(document).ready(() => renderCalendar());

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