根据过去和未来时间为 React FullCalendar 表格单元格着色

Question

我正在开发一个使用 React FullCalendar 的项目，我想根据表格单元格是否代表过去或未来时间来自定义表格单元格的外观。本质上，我想动态地为单元格着色，为过去、现在和未来的事件提供视觉提示。

class Calendar extends React.Component {
  calendarRef = React.createRef();

  componentDidMount() {
   //
 
  }

  eventContent = (arg) => {
    const eventDate = new Date(arg.event.start);

    if (eventDate < new Date()) {
      return { classNames: 'past-event' };
    } else {
      return { classNames: 'future-event' };
    }
  };

  render() {
    return (
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        events={[]}
        eventContent={this.eventContent}
        ref={this.calendarRef}
      />
    );
  }
}

export default Calendar;

CSS

.past-event .fc td {
  background-color: gray;
}

.future-event .fc td {
  background-color: yellow;
}

我想做这样的图

预先感谢您的协助！

Answer 1

const handleDatesSet = (arg) => {
      if (arg && arg.view && arg.start) {


        const now = new Date();
        const currentView = arg.view;
        const currentDate = arg.start;

        const eventCurrentDate = currentDate.toLocaleDateString('en-US', {
          weekday: 'short',
          month: 'short',
          day: 'numeric',
          year: 'numeric'
        }).replace(',', '');

        const nowDate = now.toLocaleDateString('en-US', {
          weekday: 'short',
          month: 'short',
          day: 'numeric',
          year: 'numeric'
        }).replace(',', '');

        const date1 = new Date(eventCurrentDate);
        const date2 = new Date(nowDate);

        const rows = document.querySelectorAll('.fc tr');
        rows.forEach(row => {
          const tdElements = row.querySelectorAll('td');
          if (tdElements.length > 1) {
            const secondTd = tdElements[1]; // Select the second <td> element

            const dataTimeValue = secondTd.getAttribute('data-time');
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            const currentTime = new Date(0, 0, 0, hours, minutes, seconds);

            if (dataTimeValue && dataTimeValue.includes(':')) {
              const [eventHours, eventMinutes, eventSeconds] = dataTimeValue.split(':');
              const eventDataTime = new Date(0, 0, 0, eventHours, eventMinutes, eventSeconds);

              if (date1.getTime() === date2.getTime()) {
                console.log('Today');
                if (eventDataTime.getTime() < currentTime.getTime()) {
                  secondTd.classList.add('past-event');
                  secondTd.classList.remove('future-event');
                  // console.log('Past-Gray');
                } else {
                  secondTd.classList.add('future-event');
                  secondTd.classList.remove('past-event');
                  // console.log('Future-Yellow');
                }
              } else if (date1.getTime() < date2.getTime()) {
                console.log('Past');
                secondTd.classList.add('past-event');
                secondTd.classList.remove('future-event');
              } else {
                console.log('Future');
                secondTd.classList.add('future-event');
                secondTd.classList.remove('past-event');
              }
            }
          }
        });
      }

    };

    // Run the handleDatesSet function every second (1000 milliseconds)
    setInterval(handleDatesSet, 1000);```


\\css
```.past-event {
  background-color: #b3b3b3;
}

.future-event {
  background-color: #dddd99;
}```