js日历怎么显示节假日

JS日历显示节假日的方法包括：使用第三方库、手动配置节假日数据、结合API获取节假日信息。其中，使用第三方库是最为便捷和灵活的方式，接下来我们将详细介绍如何使用这些方法来实现节假日显示功能。

一、使用第三方库

1. FullCalendar

FullCalendar 是一个功能强大的 JavaScript 日历库，可以轻松地实现节假日显示。它提供了丰富的 API 和配置选项，适合各种复杂的日历需求。

<!DOCTYPE html>
<html>
<head>
  <link href='https://unpkg.com/@fullcalendar/core@5.10.1/main.min.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/daygrid@5.10.1/main.min.css' rel='stylesheet' />
  <script src='https://unpkg.com/@fullcalendar/core@5.10.1/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/daygrid@5.10.1/main.min.js'></script>
</head>
<body>
  <div id='calendar'></div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        events: [
          {
            title: 'New Year's Day',
            start: '2023-01-01',
            color: 'red'
          },
          {
            title: 'Christmas Day',
            start: '2023-12-25',
            color: 'green'
          }
        ]
      });
      calendar.render();
    });
  </script>
</body>
</html>

在这个示例中，我们通过 FullCalendar 插件来创建日历，并定义了两个节假日：元旦和圣诞节。通过设置 color 属性，可以直观地显示节假日。

2. Other Libraries

除了 FullCalendar，还有一些其他的日历库可以使用，如 Pikaday、Flatpickr 等，它们提供了不同的功能和样式，适合不同的使用场景。

二、手动配置节假日数据

手动配置节假日数据适用于较为简单的需求，可以通过 JavaScript 代码直接在日历中标记节假日。

1. 基本实现

<!DOCTYPE html>
<html>
<head>
  <style>
    .holiday {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <table id="calendar">
    <!-- Table content representing the calendar -->
  </table>
  <script>
    const holidays = {
      '2023-01-01': 'New Year's Day',
      '2023-12-25': 'Christmas Day'
    };
    const calendarTable = document.getElementById('calendar');
    // Assuming the table is already filled with dates
    for (let date in holidays) {
      const cell = calendarTable.querySelector(`[data-date="${date}"]`);
      if (cell) {
        cell.classList.add('holiday');
        cell.title = holidays[date];
      }
    }
  </script>
</body>
</html>

在这个示例中，我们定义了一个包含节假日数据的对象 holidays，然后通过遍历表格单元格（假设单元格包含 data-date 属性）来标记节假日。

2. 动态生成日历

<!DOCTYPE html>
<html>
<head>
  <style>
    .holiday {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <table id="calendar">
    <!-- Table content representing the calendar -->
  </table>
  <script>
    const holidays = {
      '2023-01-01': 'New Year's Day',
      '2023-12-25': 'Christmas Day'
    };
    function generateCalendar(year, month) {
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const calendarTable = document.getElementById('calendar');
      calendarTable.innerHTML = '';
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i);
        const cell = document.createElement('td');
        const dateStr = date.toISOString().split('T')[0];
        cell.setAttribute('data-date', dateStr);
        cell.innerText = i;
        if (holidays[dateStr]) {
          cell.classList.add('holiday');
          cell.title = holidays[dateStr];
        }
        calendarTable.appendChild(cell);
      }
    }
    generateCalendar(2023, 0); // Generate calendar for January 2023
  </script>
</body>
</html>

这个示例展示了如何动态生成一个月的日历，并标记节假日。通过 generateCalendar 函数，可以方便地生成任意月份的日历。

三、结合API获取节假日信息

对于需要动态获取节假日信息的应用，可以结合第三方 API 来实现，例如使用公共的节假日 API 或者公司内部的节假日服务。

1. 使用公共API

<!DOCTYPE html>
<html>
<head>
  <style>
    .holiday {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <table id="calendar">
    <!-- Table content representing the calendar -->
  </table>
  <script>
    async function fetchHolidays(year) {
      const response = await fetch(`https://api.example.com/holidays?year=${year}`);
      const data = await response.json();
      return data.holidays;
    }
    async function generateCalendar(year, month) {
      const holidays = await fetchHolidays(year);
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const calendarTable = document.getElementById('calendar');
      calendarTable.innerHTML = '';
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i);
        const cell = document.createElement('td');
        const dateStr = date.toISOString().split('T')[0];
        cell.setAttribute('data-date', dateStr);
        cell.innerText = i;
        if (holidays[dateStr]) {
          cell.classList.add('holiday');
          cell.title = holidays[dateStr];
        }
        calendarTable.appendChild(cell);
      }
    }
    generateCalendar(2023, 0); // Generate calendar for January 2023
  </script>
</body>
</html>

在这个示例中，我们通过 fetchHolidays 函数从公共 API 获取节假日数据，并在生成日历时标记节假日。

2. 使用公司内部API

对于公司内部的应用，可以使用公司内部的节假日 API 服务，原理与公共 API 类似，只需要更改 API 的 URL 和数据结构。

四、总结

通过以上几种方法，可以轻松地在 JS 日历中显示节假日。使用第三方库是最为方便和灵活的方式，适合各种复杂的需求；手动配置适合简单的场景；结合 API 则适合动态获取节假日信息的场景。根据具体需求选择合适的方法，可以有效提升开发效率和用户体验。