BT
Building TALL*
Tailwind
Alpine
Laravel
Livewire
* Mostly Livewire
Calendar
December 2024
Su
Mo
Tu
We
Th
Fr
Sa
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
Multiselect
Third Thing
Laravel
Livewire Examples
Foreword
    This website is designed primarily for use by full-stack developers building complete web apps using Tailwind Alpine Laravel and Livewire, although it contains enough detail and basic information to make it useful to the web developer who desires to try them as new tools.
A
Calendar
php artisan make:livewire Calendar
How to build a Calendar With Laravel Livewire
    The calendar widget is an essential part of most complex websites. People appreciate the familiar formatting of a calendar, and can absorb a large amount of information if neatly presented into a calendar format.
This is a Live example. Click the left and right icons to move the calendar months. Click any date with an event to see the details of the event.
December 2024
Su
Mo
Tu
We
Th
Fr
Sa
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
Component Model
31 lines
Blade View
51 lines
Component Model: app/Http/Livewire/Calendar.php
1.
<?php
2.

3.
namespace App\Http\Livewire;
4.
use Livewire\Component;
5.
use Carbon\Carbon;
6.

7.
class Calendar extends Component
8.
{
9.
    public $date; 
10.

11.
    public function mount($date = null)
12.
    {
13.
        $this->date = Carbon::today();
14.
        if ($date) {
15.
            $this->date = Carbon::parse($date);
16.
        }
17.
    }
18.

19.
    public function render()
20.
    {
21.
       return view('livewire.calendar');
22.
    }
23.
    public function previousMonth()
24.
    {
25.
        $this->date = $this->date->subMonth();
26.
    }
27.
    public function nextMonth()
28.
    {
29.
        $this->date = $this->date->addMonth();
30.
    }
31.
}
Blade View: views/livewire/calendar.blade.php
1.
<div>
2.
    <div class="px-2 py-1 flex w-full">
3.
        <div class="w-4/6 font-bold">
4.
            {{ $date->format('F Y') }}
5.
        </div>
6.

7.
        <div wire:click.prefetch="previousMonth()" class="w-1/6 text-right hover:text-gray-900 cursor-pointer" >
8.
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 float-right">
9.
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
10.
            </svg>
11.
        </div>
12.

13.
        <div wire:click.prefetch="nextMonth()" class="w-1/6 text-right hover:text-gray-900 cursor-pointer" >
14.
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 float-right">
15.
              <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd" />
16.
            </svg>
17.
        </div>
18.
    </div>
19.

20.
    <div class="flex flex-wrap text-xs text-center transition" wire:loading.class="opacity-20">
21.

22.
        <div class="flex w-full py-2">
23.
            <div style="width: 14.28%">Su</div>
24.
            <div style="width: 14.28%">Mo</div>
25.
            <div style="width: 14.28%">Tu</div>
26.
            <div style="width: 14.28%">We</div>
27.
            <div style="width: 14.28%">Th</div>
28.
            <div style="width: 14.28%">Fr</div>
29.
            <div style="width: 14.28%">Sa</div>
30.
        </div>
31.

32.
        @php
33.
            $startdate = $date->clone()->startOfMonth()->startOfWeek()->subDay();
34.
            $enddate = $date->clone()->endOfMonth()->endOfWeek()->subDay();
35.
            $loopdate = $startdate->clone();
36.
            $month = $date->clone();
37.
        @endphp
38.

39.
        @while ($loopdate < $enddate)
40.
            <div style="width: 14.28%"
41.
                 class="h-10 hover:font-bold
42.
                     @if ($loopdate < $month->startOfMonth() || $loopdate > $month->endOfMonth())
43.
                         opacity-50
44.
                     @endif
45.
                     ">
46.
                {{ $loopdate->format('j') }}
47.
            </div>
48.
            @php($loopdate->addDay())
49.
        @endwhile
50.
    </div>
51.
</div>