javascript - 事件日历 - 整个保留期间的自动条目

问题描述

我目前正在为我们当地的消防队制作一个网站，这几乎完成了，但我对活动日历有很大的困难。

消防员想使用活动日历在乡村小屋中预订房间。

日历中的条目和所需房间的预订已经生效，日期也在日历中正确输入。

现在需要以下功能：

在指定从到时间段时，所有受影响的日期都应相应地标有用户的姓名，以便其他人可以看到该时间段已被预订。
其他人应该不再可以预订同一天已经预订的房间

我使用 Strapi 作为后端，使用 Nextjs 作为前端。

这是事件日历的样子：

活动日历

将鼠标悬停在用户名上。时间段超过一天，但用户名正好在开始日期

每天触发while循环，它应该检查“Beginndatum”（eng：预订期间的开始日期）是否对应于要检查的日历日。如果是这样，则应将数据返回到日历。

从后端返回以下内容：

{"Kommandozimmer": false,"Rauschkogelsuite": false,"Greithgrabenzimmer": false,"Hochangerblick": false,"Schottenkogelkammerl": false,"Schneidseitnleitnbetten": false,"Ich_bin_da": true,"_id": "6055e6a721b63878ae906b81","name": "Lenger Florian","Anfangsdatum": "2021-03-29","Enddatum": "2021-03-31","createdAt": "2021-03-20T12:12:23.211Z","updatedAt": "2021-03-20T12:12:23.211Z","__v": 0,"id": "6055e6a721b63878ae906b81"}

Strapi Api 有一个“Anfangsdatum”（开始日期）和一个“Enddatum”（结束日期）。

几天来，我一直在尝试在整个时间段内使用该名称实现所需的功能，但到目前为止还没有成功。

不幸的是，我不知道如何获取剩余保留天数的数据。示例：从 4 月 4 日到 4 月 6 日预订。我可以从我的 Strapi 后端 4.April 获取每个“Anfangsdatum”的数据并将其打印在日历上。问题是我不知道如何为 5. 和 6.April 打印相同的条目。

这是每个月的每一天循环一次的代码。

const renderCells = (currentMonthImport, selectedDateImport) => {
    const currentMonth = currentMonthImport;
    const selectedDate = selectedDateImport;
    const monthStart = startOfMonth(currentMonth);
    const monthEnd = endOfMonth(monthStart);
    const startDate = startOfWeek(monthStart);
    const endDate = endOfWeek(monthEnd);

    const dateFormat = "d";
    const dateFormatData = "yyyy-MM-dd";
    const rows = [];

    let days = [];
    let day = startDate;
    let formattedDate = "";
    let formattedDateData = "";

    while (day <= endDate) {
      for (let i = 0; i < 7; i++) {
        formattedDate = format(day, dateFormat);
        formattedDateData = format(day, dateFormatData);
        const cloneDay = day;

        // let apiData = getData(formattedDateData);

        const apiData = data.filter((e) => {
          return e.Anfangsdatum == formattedDateData;
        });

        days.push(
          <div
            className={`${css.col} ${css.cell} ${
              !isSameMonth(day, monthStart)
                ? `${css.disabled}`
                : isSameDay(day, selectedDate)
                ? `${css.selected}`
                : ""
            }`}
            key={day}
            onClick={() => onDateClick(cloneDay)}
          >
            <span className={css.number}>{formattedDate}</span>
            <br />
            {!apiData[0] ? null : <EventItem data={apiData[0]} />}
            <br />
            {!apiData[1] ? null : <EventItem data={apiData[1]} />}
            <br />
            {!apiData[2] ? null : <EventItem data={apiData[2]} />}
            <br />
            {!apiData[3] ? null : <EventItem data={apiData[3]} />}
            <br />
            {!apiData[4] ? null : <EventItem data={apiData[4]} />}
          </div>
        );
        day = addDays(day, 1);
      }
      rows.push(
        <div className={css.row} key={day}>
          {days}
        </div>
      );

      days = [];
    }
    return <div className={css.body_container}>{rows}</div>;
  };

正如上面已经指出的，这个函数处于一个while循环中，直到该月的所有日历日都过去了。

我请求支持和建议，以便我能尽快完成这个项目。

我为这变成如此多的文字而道歉，但我希望得到一些建议。

非常感谢

标签： javascriptdatecalendarnext.jsstrapi

javascript - 事件日历 - 整个保留期间的自动条目

问题描述

解决方案

推荐阅读