Event Calendar – Automatic entries of the entire reserved period

  calendar, date, javascript, next.js, strapi

I am currently working on a website for our local fire brigade, this is almost finished, but I have great difficulties with the event calendar.

The firefighters would like to use the event calendar to reserve rooms in a rural hut.

The entry in the calendar and the booking of the desired room already works, the date is also entered correctly in the calendar.

The following functions are now desired:

  • When specifying a from to period, all affected days should accordingly be labeled with the name of the user so that the others can see that this period has already been booked.

  • It should no longer be possible for someone else to book a room that has already been booked on the same day

I use Strapi for the backend and Nextjs for the frontend.

This is what the event calendar looks like:

Event Calendar

Hover over User Name. Time Period is longer than a day, but username is just on the start date

Every day triggers the getData function, which should check whether the "Beginndatum" (eng: start date of the booked period) corresponds to the calendar day to be checked. If so, the data should be returned to the calendar.

The following is returned from the backend:

{"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"}

The Strapi Api has a "Anfangsdatum" (start date) and an "Enddatum" (end date).

For days now I have been trying to implement the desired function with the name over the entire time period, but so far without success.

At the moment I only get a "Promise {}" in the console, with [[PromiseState]]: "fulfilled" and [[PromiseResult]] with the desired data on longer than one day reservations.

Unfortunately, I don’t know how to get the data from the PromiseResult, and my current code only gives me this data if the calendar day and start date are identical, but not for the rest of the period, example April 5th to April 7th i get the data only on April 5th, but not for April 6th and 7th

const getData = (date) => {
// return data.filter((e) => {
//   return e.Anfangsdatum === date;
// });

let filteredData = data.filter((e) => {
  return e.Anfangsdatum === date;
});

const unmatch = (id) => {
  const reservedData = fetch(
    `${process.env.NEXT_PUBLIC_STRAPI_API_URL}/turnaueralms/${id}`
  )
    .then((response) => response.json())
    .then((data) => {
      return data;
    });

  return reservedData;
};

const getReservedData = async (id) => {
  const x = await unmatch(id);
  return x;
};

// Final return output
if (filteredData[0] !== undefined && date !== filteredData[0].Enddatum) {
  return getReservedData(filteredData[0].id);
} else {
  return filteredData;
}

};

As already indicated above, this function is in a while loop until all calendar days of the month have passed.

I ask for support and advice so that I can complete this project as soon as possible.

I apologize for the fact that this became so much text, but I hope for some advice.

Many Thanks

Source: Ask Javascript Questions

LEAVE A COMMENT