Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jcc5018's avatar

Dynamic Livewire calendar missing months

I am attempting to create a calendar display in which someone could choose any week start date, or year and the calendars for the year generate as required.

For the most part, things are working, but for some reason every year selected is missing 1-3 of the months, and I cannot figure out why.

Also, is there a better way to list the weekdays? I thought default php makes 0 =Sunday in which case I shouldnt need to determine current date with the now() method, but I'm not sure how else to make that happen. Here is the output: https://i.imgur.com/1uuKyGB.png

BLADE

{{--    <x-dates.day-select :$start_day></x-dates.day-select>--}}
    <label for="dayStart">Week Start Day</label>
    <select  wire:model="start_day" name="start_day" id="start_day">
        @for($d = 0; $d <= 6; $d++)
            <option value="{{$d}}">{{date('l',strtotime(now()->startOfWeek($d)))}}</option>
        @endfor
    </select>

    <label for="year">Year</label>
    <select wire:model="selectedYear" name="year" id="year">
        <option value="{{$year}}">{{$year}}</option>
        @for($y=1;$y<=10;$y++)
            <option value="{{$year+$y}}">{{$year+$y}}</option>
        @endfor
    </select>

    <label for="month">Month</label>
    <select wire:model="start_month" name="month" id="month">
        @for($m = 1; $m <= 12; $m++)
            <option value="{{$m}}">{{Carbon\Carbon::create($year,$m)->format($monthFormat)}}</option>
        @endfor
    </select>

    {{--<x-dates.month-select :$year :$monthFormat></x-dates.month-select>--}}

    {{$date}}

    <div class="grid grid-cols-3  ">
        @for($start_month = 1; $start_month <= 12; $start_month++)
            @php
                $date=Carbon\Carbon::create($selectedYear,$start_month);
                $firstDay=$date->firstOfMonth()->format('N');
            @endphp
            <div class="container w-{{$width}}">
                <div class="bg-red-700 font-mono text-center font-black text-white text-xl">{{$date->format($monthFormat. ' Y')}}
                </div>
                <div class="grid grid-cols-7 gap-y-2 ">
                    {{--Display week days--}}

                    @for($i = 0; $i <= 6; $i++)
                        @php $day=now()->startOfWeek($start_day);@endphp
                        {{--{{$day}}--}}
                        <div class="border bg-gray-500 rounded-lg text-center text-white">{{$day->format($dayFormat)}}</div>
                        @php
                            if($start_day == 6){
                               $start_day = 0;
                               }else{
                               $start_day++;
                               }
                        @endphp
                    @endfor
                    
{{--                    END WEEK DAYS--}}
                    {{--Display dates--}}

                    @for($i = 0; $i <= 6; $i++)

                        @if($firstDay != $start_day)
                            <div class="border bg-blue-500 rounded-lg text-center text-white"></div>
                        @else
{{--                            DISPLAY DAYS OF MONTH--}}
                            @for($d = 1; $d <= $date->daysInMonth; $d++)
                                @php $day=Carbon\Carbon::create($year,$start_month,$d,);@endphp
                                <div class="border bg-blue-500 rounded-lg text-center text-white">{{$d}}</div>
                            @endfor
{{--END DAYS OF MONTH--}}
                        @endif
                        @php
                            if($start_day == 6){
                               $start_day = 0;
                               }
                               else{
                               $start_day++;
                               }
                        @endphp
                    @endfor
                </div>
            </div>
        @endfor
    </div>
</div>

Livewire Component

<?php

namespace App\Http\Livewire;

use Carbon\Carbon;
use Livewire\Component;

class Calendar extends Component
{
    public $year='';
    public $selectedYear;
    public $date;
    public $months=12; //months to display
    public $monthFormat='F'; //m M F
    public $start_day;
    public $start_month;
    public $width=25;
    public $dayFormat ='l';//N, D l,


public function mount()
{
    $date=now();
    $this->year = $date->format('Y');
    $this->date = $date;
    $this->start_day=0;
}

public function updatedSelectedYear(){
//    $this->year=$this->selectedYear;
    $this->date=Carbon::createFromDate($this->selectedYear,$this->start_month);
//    $firstDay=$this->date->firstOfMonth()->format('N');

}
    public function updatedStartMonth(){
        $this->date=Carbon::createFromDate($this->selectedYear,$this->start_month);
        //    $firstDay=$this->date->firstOfMonth()->format('N');

    }

    public function render()
    {

        return view('livewire.calendar');
    }
}

Also how can I add some space between each calendar cause isnt doing anything with tailwindCSS- daisyUI

Thanks

0 likes
2 replies
jcc5018's avatar
jcc5018
OP
Best Answer
Level 8

It appears as if the missing months are months that start on Sunday

Edit: I added the $firstday variable to the title area of each month {{$firstDay}}{{$date->format($monthFormat. ' Y')}}

and the ones messing up are displaying as 7. So does that mean the days of the week are not actually 0-6 or am I missing something else? assuming 0 = Sundays

jcc5018's avatar

Ok, I think that discovery fixed that problem. changed all 0,6 values to 1-7

Still could use any suggestions if there is a way to optimize this.

Please or to participate in this conversation.