Home Using the library Carbon::, how to filter the weekdays of the month while marking the days which are out of the selected month?

Questions

Using the library Carbon::, how to filter the weekdays of the month while marking the days which are out of the selected month?

byMR

October 21, 2022

I am having a very annoying issue and I cannot find a way around.

I have a calendar like this:

I would like to gray out all the days which are before the first and all the days which are after the end of the month.

My current code is:

        $carbon = Carbon::now();
        $this->currentYear = $carbon->year;
        $this->currentMonth = $carbon->month;
        $this->start =  Carbon::now()->startOfMonth()->startOfWeek();
        $this->firstDay = Carbon::now()->startOfMonth();
        $this->end =  Carbon::now()->endOfMonth()->endOfWeek();
        $this->lastDay = Carbon::now()->endOfMonth();


        $this->dates = collect(
            new CarbonPeriod($this->start, 'P1D', $this->end)
        );
        return view('livewire.event-calendar', [
            'start' => $this->start,
            'firstDay' => $this->firstDay,
            'end' => $this->end,
            'lastDay' => $this->lastDay,
            'dates' => $this->dates,
            ]);

I cannot post the CSS because it comes from TailwindUI(Licensing issue).

But I will post the loop(in blade / Laravel):

@foreach($dates->chunk(7) as $week)
@foreach($week as $date)
<button type="button" class="bg-white py-1.5 font-semibold text-gray-900 hover:bg-gray-100 focus:z-10">
<time datetime="2022-01-12" class="mx-auto flex h-7 w-7 items-center justify-center rounded-full">{{ $date->day }}</time>
</button>
</td>
@endforeach
@endforeach

How would you notify the front end that the days before and after the current month days should be greyed out?
I thought it would have been simple but I really struggle with this.
Your answer does not need to be livewire friendly but I just need to understand how can Carbon either tags the days outside the select month or perhaps there is a clever trick via CSS.

Thank you all!

>Solution :

simply adjust the greyscale wether the date is between first day and last day:

@foreach($dates->chunk(7) as $week)
@foreach($week as $date)
<button type="button" class="bg-white py-1.5 font-semibold text-gray-{{ $date < $firstDay || $date > $lastDay ? '600' : '900' }} hover:bg-gray-100 focus:z-10">
<time datetime="2022-01-12" class="mx-auto flex h-7 w-7 items-center justify-center rounded-full">{{ $date->day }}</time>
</button>
</td>
@endforeach
@endforeach