QuickAdminPanel
Search…
Quick Start: Creating Panel
Using the Generated Code
Modules
Customizing the Code
Vue.js + Laravel API Version
System Calendar
This module allows you to generate a calendar with events from one or more CRUDs - in this case, called Calendar Sources.
You add CRUDs as sources online - as many as you want, and then you download the calendar as part of your generated code.
Notice: Event sources can be generated only online, downloaded panel doesn't have function to add new CRUDs into calendar, you would have to add your custom code then.
How does the result look in QuickAdminPanel code?
We create one SystemCalendarController file which collects all the sources into one $events array.
1
class SystemCalendarController extends Controller
2
{
3
public function index()
4
{
5
$events = [];
6
7
foreach (\App\Job::all() as $job) {
8
$crudFieldValue = $job->getOriginal('job_time');
9
10
if (! $crudFieldValue) {
11
continue;
12
}
13
14
$eventLabel = $job->title;
15
$prefix = '';
16
$suffix = '';
17
$dataFieldValue = trim($prefix . " " . $eventLabel . " " . $suffix);
18
$events[] = [
19
'title' => $dataFieldValue,
20
'start' => $crudFieldValue,
21
'url' => route('admin.jobs.edit', $job->id)
22
];
23
}
24
25
return view('admin.calendar' , compact('events'));
26
}
27
28
}
Copied!
And View file admin/calendar.blade.php looks like this:
1
@section('content')
2
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css'/>
3
4
<h3 class="page-title">Calendar</h3>
5
6
<div id='calendar'></div>
7
8
@endsection
9
10
@section('javascript')
11
@parent
12
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
13
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
14
<script>
15
$(document).ready(function () {
16
// page is now ready, initialize the calendar...
17
events={!! json_encode($events) !!};
18
$('#calendar').fullCalendar({
19
// put your options and callbacks here
20
events: events,
21
})
22
});
23
</script>
24
@endsection
Copied!
You can easily customize each of the reports after download by adding more logic in the files above.
How to install/use the module?
First, go to your panel's Modules menu item, find the module in the list and click Install.
Then you will see a new menu item Calendar Sources on the left, where you can add your CRUDs as sources.
Each Source consists of CRUD field (date / datetime) and label field (what to show inside the calendar cell) with ability to add prefix/suffix there.
After adding sources, you will see another new menu item Calendar - you can check the results there.
As soon as you're happy with your panel, download the files, and Calendar menu will be among them.
More information
Another article that may help you:
Laravel + FullCalendar: Create/Edit Recurring Events
Quick Admin Panel
Last modified 2yr ago