Next.js Discord

Discord Forum

How to find day that is missing

Answered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
I have two arrays: one containing the days of the week and the other containing the available days of the barber. I want to filter the barber's available days to determine which days are missing from the days of the week array, so that I can disable these dates on the calendar. How can I achieve that?


 const daysOfWeek = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];


  const timeBarber = workingHours.find(
    (workingHours) => workingHours.barberId === watchBarberSelection
  );

  const unavailableDays = timeBarber?.dayOfWeek.filter(
    (day) => !daysOfWeek.includes(day)
  );

  console.log("Unavailable Days:", unavailableDays);
Answered by roopaish
const timeBarber = {dayOfWeek:scheduleDays}

  const unavailableDays = daysOfWeek.filter(
    (day) => !timeBarber.dayOfWeek.includes(day)
  );

  console.log("Unavailable Days:", unavailableDays);
View full answer

45 Replies

Knopper gall
You've answered your own question, have you not?
Your second function does exactly what you're asking

const daysOfWeek = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

const scheduleDays = [
    "Monday",
    "Friday"
];

const unavailableDays = daysOfWeek.filter(day => !scheduleDays.includes(day));

console.log(unavailableDays); // [ "Sunday", "Tuesday", "Wednesday", "Thursday", "Saturday" ]
Ojos AzulesOP
I get empty array
thats the problem
This is my array of timeBarber.dayOfWeek

[
"Monday",
"Wednesday",
"Friday",
"Thursday",
"Tuesday",
"Saturday"
]
it should print me the Sunday
Knopper gall
Ignore that if you saw it, I thought I spotted an error
Ojos AzulesOP
it's ok :p
Knopper gall
Wait I'm so dumb
note to self: don't do programming when you just woke up
Ojos AzulesOP
hahahah
i appreciate the help though
Knopper gall
yeah I literally see nothing wrong with your code other than that timeBarber could be undefined
you shouldn't be getting an empty array back
Ojos AzulesOP
:/
It's weird
Knopper gall
are we sure the cases match?
Ojos AzulesOP
what do you mean
Knopper gall
Like are you certain each array has the correct capitalisation
Because .includes() doesn't match case
Ojos AzulesOP
its all correct
Knopper gall
can you console log both arrays before the filter and paste the output here, please?
Ojos AzulesOP
Knopper gall
and your output of unavailableDays?
sorry I know it's basic stuff, I'm just really struggling to see what's going on here
Ojos AzulesOP
Its ok my friend
if i remove the exclamation mark it prints me this
Knopper gall
I know this sounds dumb, but try putting it all on one line?
wait what
can you show me your full code, whole block? (without splitting)
Ojos AzulesOP
Wait
ts
roopaish
const timeBarber = {dayOfWeek:scheduleDays}

  const unavailableDays = daysOfWeek.filter(
    (day) => !timeBarber.dayOfWeek.includes(day)
  );

  console.log("Unavailable Days:", unavailableDays);
Answer
roopaish
you should filter from daysOfWeek.
Knopper gall
oh I'm dumb how did I not see that 🤣
roopaish
yeah i was also confused at first
Ojos AzulesOP
omg
Lol
Thank you so much
Knopper gall
Always filter from the larger data set 🤣
Ojos AzulesOP
both of you
appreciate it
Ojos AzulesOP
Extra! Depending on my code do you know how i can also pass the unavailable days to my calendar so a user cannot select those days?
roopaish
How are you rendering the calendar?
Ojos AzulesOP
   <FormField
                  control={form.control}
                  name="day"
                  render={({ field }) => (
                    <FormItem className="flex flex-col">
                      <FormLabel>Date of appointment</FormLabel>
                      <Popover>
                        <PopoverTrigger asChild>
                          <FormControl>
                            <Button
                              variant={"outline"}
                              className={cn(
                                "w-[240px] pl-3 text-left font-normal",
                                !field.value && "text-muted-foreground"
                              )}
                            >
                              {field.value ? (
                                format(field.value, "PPP")
                              ) : (
                                <span>Pick a date</span>
                              )}
                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                            </Button>
                          </FormControl>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                          <Calendar
                            mode="single"
                            selected={field.value}
                            onSelect={field.onChange}
                            disabled={{ before: new Date() }}
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                      <FormMessage />
                    </FormItem>
                  )}
                />