Calendar
This component is a wrapper around Vanilla Calendar. We have simplified its API to make it act as a readonly calendar for easily displaying events.
If you need an input for date selection stick with DateTime or DatePicker
component.
Install
<head> ... {{-- Vanilla Calendar --}} <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar@2.7.0/build/vanilla-calendar.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar@2.7.0/build/themes/light.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar@2.7.0/build/themes/dark.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@uvarov.frontend/vanilla-calendar@2.7.0/build/vanilla-calendar.min.js" defer></script></head>
In the following examples we use dynamic dates to keep this example udpated to current month. Remember to configure Tailwind safelist when working with dynamic CSS classes.
Single month
@php $events = [ [ 'label' => 'Day off', 'description' => 'Playing <u>tennis.</u>', 'css' => '!bg-amber-200', 'date' => now()->startOfMonth()->addDays(3), ], [ 'label' => 'Health', 'description' => 'I am sick', 'css' => '!bg-green-200', 'date' => now()->startOfMonth()->addDays(8), ], [ 'label' => 'Laracon', 'description' => 'Let`s go!', 'css' => '!bg-blue-200', 'range' => [ now()->startOfMonth()->addDays(13), now()->startOfMonth()->addDays(15) ] ], ];@endphp <x-calendar :events="$events" /> {{-- `locale` is any valid locale --}}<x-calendar locale="pt-BR" weekend-highlight />
Multiple months
@php $events = [ [ 'label' => 'Business Travel', 'description' => 'Series A founding', 'css' => '!bg-red-200', 'range' => [ now()->startOfMonth()->addDays(12), now()->startOfMonth()->addDays(19) ] ], ];@endphp <x-calendar :events="$events" months="3" />