maryUI

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 --}}
    <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@2.9.6/build/vanilla-calendar.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@2.9.6/build/vanilla-calendar.min.css" rel="stylesheet">
</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" />
 
{{-- Shortcuts config to `locale`, `sunday-start` and weekend-highlight --}}
<x-calendar locale="pt-BR" weekend-highlight sunday-start />

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