0

I´m creating an date fns calendar. I´m trying to track two dates, "startDay" and "endDay" and check if there are days within the interval "startDay" and "endDay". And if the differenceinDays between "endDay" and "startDay" is equal to 2. Then a String should be returned.

                  isEqual(day, startDay) && isToday(day) && "bg-red-500",
                  isEqual(day, startDay) &&
                    !isToday(day) &&
                    "bg-yellow-500",
                  isEqual(day, endDay) && "bg-yellow-500",
                  isWithinInterval(day, { start: startDay, end: endDay }) &&
                    differenceInDays(endDay, startDay) == 2 &&
                    "bg-white",
                  differenceInDays(endDay, startDay) > 2 &&
                    setIsRentable(false),

                  !isEqual(day, startDay) &&
                    !isEqual(day, endDay) &&
                    "hover:bg-indigo-500",
                  (isEqual(day, startDay) || isToday(day)) &&
                    "font-semibold",
                  "mx-auto flex h-8 w-8 items-center justify-center rounded-full"
                )}
              >
                <time dateTime={format(day, "yyyy-MM-dd")}>
                  {format(day, "d")}
                </time>
              </button>

              <div className="w-1 h-1 mx-auto mt-1">
                {bookings.some((booking) =>
                  isSameDay(parseISO(booking.startDatetime), day)
                ) && (
                  <div className="w-1 h-1 rounded-full bg-sky-500"></div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* <section className="mt-12 md:mt-0 md:pl-14">
        <h2 className="font-semibold text-gray-300">
          Schedule for{" "}
          <time dateTime={format(today, "yyyy-MM-dd")}>
            {format(today, "MMM dd, yyy")}
          </time>
        </h2>
        <ol className="mt-4 space-y-1 text-sm leading-6 text-gray-500">
          {selectedDaybookings.length > 0 ? (
            selectedDaybookings.map((booking) => (
              <Booking booking={booking} key={booking.id} />
            ))
          ) : (
            <p>No booking for today.</p>
          )}
        </ol>
      </section> */}
      <div className="flex justify-center items-center border-none pt-32">
        <button className=" text-lg font-bold bg-yellows px-10 sm:px-2 sm:w-1/3 rounded-md h-10 mb-10 whitespace-nowrap">
          Make Reservation
        </button>
      </div>
    </div>
  </div>
</div>

);

This is how i tried to solve the issue above:

 isWithinInterval(day, { start: startDay, end: endDay }) &&
                        differenceInDays(endDay, startDay) == 2 &&
                        "bg-white",

But somehow I´m getting the error invalid interval

Yaffet Kahsay
  • 1
  • `true && true && "bg-white"` seems to return a string, but `true && false && "bg-white"` does not. Maybe use: `isWithinInterval(day, { start: startDay, end: endDay }) && differenceInDays(endDay, startDay) == 2 ? "bg-white" : "value-to-return-when not true" `. this is the [Shorthand for if-else statement](https://stackoverflow.com/questions/18269286/shorthand-for-if-else-statement)) – Luuk Apr 27 '23 at 10:49
  • Hi, it´s more like it´s complaining about the date format of the "day" parameter in the function – Yaffet Kahsay Apr 27 '23 at 17:35
  • Some debugging values (and type) for `endDay, startDay` are needed to give more help. – Luuk Apr 28 '23 at 16:00
  • It got solved, thank you for the help and taking your time to answer @Luuk – Yaffet Kahsay May 01 '23 at 22:58

0 Answers0