Reece
Creating a custom page with Fullcalendar Widget + Import / Export data
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/[email protected]/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!4 replies
Creating a custom page with Fullcalendar Widget + Import / Export data
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 ,
];
}
}4 replies