Creating a custom page with Fullcalendar Widget + Import / Export data
Hello guys,
I've been given a laravel filament project at work because a collegue had some personal problems and I'm on a super tight schedule. I've never used filament and I don't know how to do any of what I've been asked. Can someone please help?
I am using filament 2 and what I basically need is a "custom" page with a full calendar widget and the ability to import / export a csv with dates to and from the database to be shown on the calendar.
I spent the entire day trying to find some help online but couldn't find anything that was helpfull.
2 Replies
Filament has great documentation, so just follow the 'Getting Started' guide and you'll be moving in the right direction. I've also found Chat GPT to be helpful with speeding things up as it can write a lot of things for you.
Regarding your specifics, I've actually done something similar recently. Here is my approach and some template code to help you.
1. Create a custom page.
2. On that custom page, do something like the below.
class Calendar extends Page
{
protected static string $view = 'filament.resources.pages.calendar';
protected function getViewData(): array
{
$events = EventModel::all()->get();
$fullCalendarEvents = $events->map(function ($event) {
return [
'id' => $event->id,
'title' => $event->name,
'start' => $event->start->format('Y-m-d\TH:i:s'),
'end' => $event->end->format('Y-m-d\TH:i:s'),
'allDay' => false,
];
})->all();
return [
'calendarEvents' => $fullCalendarEvents ,
];
}
}3. And then on the associated view, do something like the below. I'm including Full Calendar via CDN as a quick shortcut for you getting something running.
<x-filament-panels::page>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
<script>
var calendarEvents = @json($calendarEvents);
window.onload = function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
events: calendarEvents,
firstDay: 1,
themeSystem: 'bootstrap5',
});
calendar.render();
calendar.render();
};
</script>
<div id='calendar'></div>
</x-filament-panels::page>
4. Make sure you register your custom page as a route (e.g. within the Filament Resource's getPages() method).
5. Regarding import and export to the EventModel, you might want to checkout the Filament Plugins area: https://filamentphp.com/plugins. If you can't find any plugin for V2 import/export, it's simple enough to do both using https://laravel-excel.com/.
Good luck!Laravel Excel
Supercharged Excel exports and imports in Laravel | Laravel Excel
Laravel Excel is intended at being Laravel-flavoured PhpSpreadsheet: a simple, but elegant wrapper with the goal of simplifying exports and imports.