FullCalendar-JavaScript：如何禁止事件重叠？eventOverlap:false无效

首先，你当前的代码里没有添加eventOverlap配置项，而且直接调用calendar.addEvent()不会自动触发重叠校验——这个方法默认会强制添加事件，忽略重叠规则。要实现已有事件（JSON加载）和新增事件互不重叠，需要做以下两步：

1. 开启内置的拖拽/调整重叠限制 #

在日历初始化配置里添加eventOverlap: false，这样拖拽或调整已有事件时会自动阻止重叠：

var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'timeGridWeek',
  events:'./json/events.json',
  eventOverlap: false, // 新增这行，阻止拖拽调整时的重叠
  headerToolbar: {
    center: 'addEventButton'
  },
  // 其他配置...
});

2. 手动添加事件前校验重叠 #

调用addEvent()前，先获取所有现有事件，检查新事件是否和它们重叠。如果重叠就不添加，否则再执行添加操作：

customButtons: {
  addEventButton: {
    text: 'AGENDAR',
    click: function() {
      dados = getDados();
      // 先确保date和date2是有效的Date对象（你代码里这两个变量需要提前定义）
      if (!isNaN(date.valueOf()) && !isNaN(date2.valueOf())) {
        // 检查新事件是否与现有事件重叠
        var isOverlap = calendar.getEvents().some(function(existingEvent) {
          // 时间重叠判断逻辑：新事件的start小于现有事件的end，且新事件的end大于现有事件的start
          return date < existingEvent.end && date2 > existingEvent.start;
        });

        if (isOverlap) {
          alert('该时间段已有预约，无法添加！');
          return;
        }

        // 无重叠则添加事件
        calendar.addEvent({
          title: dados,
          start: date,
          end: date2,
          color: '#378006',
          allDay: false
        });
        alert('Agendado!');
        // 这里不需要调用calendar.render()，addEvent后会自动渲染
      } else {
        alert('请选择有效的时间段！');
      }
    }
  }
}

额外修正你的代码错误 #

• 代码里的<br>标签是HTML语法，放在JS对象里会导致语法错误，直接删掉
• 确保date和date2变量在click函数内已正确定义（比如通过日期选择器获取）
• 原代码的闭合括号不完整，要保证addEventButton.click、DOMContentLoaded事件监听等都正确闭合

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