nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 840 forks source link

Accounting for time in `:disabled-dates` #1450

Open mdwheele opened 4 months ago

mdwheele commented 4 months ago

Hello!

I was recently working on a scheduling component where individual resources can be reserved for some amount of time and we need to prevent overlapping reservations. They can be scheduled 24 hours a day. When rescheduling an individual reservation, I know when the last reservation ends and when the next reservation begins so that I can set :disabled-dates as follows:

const disabledDates = computed(() => {
  return [
    { start: null, previousReservation.endDateTime },    // e.g. 2024-02-26T09:00:00Z
    { start: nextReservation.startDateTime, end: null }  // e.g. 2024-03-02T16:00:00Z
  ]
})

Expected Behaviour

When these date-time values are provided, I expected that both 2/26 and 3/2 would be able to be selected, but that the time values would be constrained. For example, I would be able to select 3/2, but would only be able to select time values before 16:00. Similarly, I would be able to select 2/26, but only time values after 09:00.

Actual Behaviour

I am unable to select 2/26 and 3/2 and am unable to take advantage of the hours in those days that are actually available.


After digging into the library a bit more, I don't think this is a bug. I think it's by design. :disabled-dates is literally an option to disable dates in the date-picker.

I wanted to open this to see if there was any advice folks have towards building my intended behaviour or, on the off-chance that this is something we'd like to see in the library, a discussion on how-best to do that.

My approach going forward is going to be:

  1. Continue to compute :disabled-dates based on the reservations before and after "this" reservation. However, I will adjust this to account for time components on the date objects. Effectively, this just means "rounding" up or down based on time component of a date.
  2. The valid times will be dependent on the selected date range. If either the start or end dates in the range touch the boundary of available dates, then the earliest start time will be constrained by the stop time of the previous reservation and vice-versa.

☝️ I think we have all the tools necessary to do this ourselves outside the library, but did want to bring it up in case it's something we'd like to bring into the library.