Bootstrap年度日历单日限单事件：点击已有事件日期不弹模态框

To prevent opening the modal when clicking a date that already has an event, you can add a date check in your clickDay function using your existing dataSource array. Here's the modified code:

clickDay: function(e){
  // Extract year, month, day from the clicked date (ignores time to match your event dates)
  const clickedDate = e.date;
  const targetYear = clickedDate.getFullYear();
  const targetMonth = clickedDate.getMonth();
  const targetDay = clickedDate.getDate();

  // Check if any event in dataSource falls on the clicked date
  const dateHasEvent = dataSource.some(event => {
    const eventDate = event.startDate; // Adjust this if your events use a different date property name
    return eventDate.getFullYear() === targetYear &&
           eventDate.getMonth() === targetMonth &&
           eventDate.getDate() === targetDay;
  });

  // Only open the modal if no event exists for this date
  if (!dateHasEvent) {
    addEvent({ date : e.date });
  }
}

How this works: #

• Date Comparison: We compare the year, month, and day components instead of the full Date object to avoid issues with time values (since your event dates are created without time components).
• Array.some(): This method efficiently checks if at least one event in dataSource matches the clicked date. It stops searching as soon as a match is found, which is performant even with larger datasets.
• Conditional Modal Trigger: The addEvent function is only called if dateHasEvent is false, meaning no existing event exists for that day.

Note: #

If your events in dataSource use a different property name for the date (e.g., date instead of startDate), make sure to update event.startDate in the some() callback to match your actual property name.

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