mary

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" />
mary
Sponsor