如何在FullCalendar中为已预订日期添加删除线？求替代库推荐

我想给2023-07-25至2023-07-30的日期添加删除线样式。查过FullCalendar文档没找到可行方案，尝试用events功能，但没法给日期文本组件加类来实现text-decoration: line-through。请问有没有办法获取这些元素并应用样式？我的目标是做一个预订日历，同时希望得到FullCalendar之外的其他日历库推荐。

相关代码示例 #

JavaScript代码 #

function showDates(selectedDates) {
  var element = document.getElementsByClassName("dates-selected")[0];

  var text = "From " + selectedDates[0] + " To " + selectedDates[1];

  element.textContent = text;
}

function clearshowDates(selectedDates) {
  var element = document.getElementsByClassName("dates-selected")[0];
  element.textContent = "";
}

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var selectedDates = [];
  var bookedDates = ["2023-07-25", "2023-07-30"];

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",

    events: [{
      start: "2023-07-25",
      end: "2023-07-27",
      display: "background",
    }, ],

    dateClick: function(info) {
      var clickedDate = info.dateStr;
      var todayDate = moment().format("YYYY-MM-DD");
      console.log(todayDate);

      if (clickedDate >= todayDate) {
        if (selectedDates.length === 0) {
          // 第一次点击：选择开始日期
          selectedDates.push(clickedDate);
        } else if (selectedDates.length === 1) {
          // 第二次点击：检查点击日期是否早于开始日期
          if (clickedDate < selectedDates[0]) {
            selectedDates.unshift(clickedDate); // 将点击日期设为新的开始日期
          } else {
            selectedDates.push(clickedDate); // 将点击日期设为结束日期
          }

          showDates(selectedDates);

          var currentDate = selectedDates[1];
          var dateObject = new Date(currentDate);
          dateObject.setDate(dateObject.getDate() + 1);
          var formattedDate = dateObject.toISOString().split("T")[0];
          console.log(formattedDate);

          console.log(selectedDates);
          calendar.addEvent({
            start: selectedDates[0],
            end: formattedDate,
            display: "background",
          });
        } else if (clickedDate >= todayDate) {
          // 第三次点击或重复点击同一日期：清空已选日期，添加新日期
          selectedDates = [clickedDate];
          clearshowDates();

          // 删除之前的事件
          calendar.getEvents().forEach(function(event) {
            event.remove();
          });
        }
        calendar.addEvent({
          start: clickedDate,
          display: "background",
        });
      }
    },
  });

  calendar.render();
});

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <link rel="stylesheet" href="cal.css" />
</head>

<body>
  <div class="wrap">
    <div id="calendar"></div>
  </div>

  <div class="dates-selected"></div>
</body>

<script src="cal.js"></script>

</html>

一、给FullCalendar指定日期添加删除线 #

FullCalendar没有直接给日期文本加类的API，但可以通过以下两种方式实现：

1. 利用dayCellContent钩子自定义日期内容 #

在日历配置里添加dayCellContent回调，直接自定义目标日期的渲染内容，给日期数字加上删除线：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 保留原有配置...
  dayCellContent: function(info) {
    const targetStart = new Date("2023-07-25");
    const targetEnd = new Date("2023-07-30");
    const currentDate = new Date(info.dateStr);
    
    // 判断当前日期是否在目标范围内
    if (currentDate >= targetStart && currentDate <= targetEnd) {
      return `<span style="text-decoration: line-through;">${info.dayNumberText}</span>`;
    }
    // 其他日期正常渲染
    return info.dayNumberText;
  }
});

这种方式不依赖DOM结构，是最稳定的实现方案。

2. 渲染后通过DOM选择器添加样式 #

如果不想修改渲染逻辑，可以在日历渲染完成后，通过data-date属性定位目标日期单元格，给日期数字添加样式：

// 定义添加删除线的函数
function addStrikethroughToDates() {
  const targetDates = [
    "2023-07-25", "2023-07-26", "2023-07-27",
    "2023-07-28", "2023-07-29", "2023-07-30"
  ];
  
  targetDates.forEach(date => {
    const dateNumberEl = document.querySelector(`[data-date="${date}"] .fc-daygrid-day-number`);
    if (dateNumberEl) {
      // 直接添加样式或自定义类
      dateNumberEl.style.textDecoration = "line-through";
      // dateNumberEl.classList.add("strikethrough-date");
    }
  });
}

// 日历渲染后执行
calendar.render();
addStrikethroughToDates();

// 监听视图切换事件，切换月份后重新应用样式
calendar.on('viewRender', addStrikethroughToDates);

如果用自定义类，在cal.css中添加：

.strikethrough-date {
  text-decoration: line-through !important;
}

二、推荐的其他预订日历库 #

• Flatpickr：轻量级日期选择器，支持范围选择，自定义样式灵活，体积小加载快，适合简单预订场景。
• Datepicker：基于jQuery的组件，功能丰富，支持日期范围、禁用日期，样式可定制，文档完善。
• PrimeReact Calendar：React生态组件，支持多视图、范围选择、禁用日期，自带主题，适合React项目。
• Ant Design Calendar：企业级组件库的日历组件，功能全面，支持选择、禁用、自定义单元格，适合复杂系统。
• Bryntum Calendar：替代FullCalendar的完整日历方案，提供更强的日程管理和自定义能力，适合复杂预订系统。

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