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