# System Calendar

![](https://laraveldaily.com/wp-content/uploads/2019/03/modules-system-calendar-calendar.png)

 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.

 To view the data in a calendar form, we use [FullCalendar.io library](https://fullcalendar.io/).

## How does the result look in QuickAdminPanel code?

 We create one **SystemCalendarController** file which collects all the sources into one **$events** array.

```
class SystemCalendarController extends Controller
{
    public function index()
    {
        $events = [];

        foreach (\App\Job::all() as $job) {
            $crudFieldValue = $job->getOriginal('job_time');

            if (! $crudFieldValue) {
                continue;
            }

            $eventLabel     = $job->title;
            $prefix         = '';
            $suffix         = '';
            $dataFieldValue = trim($prefix . " " . $eventLabel . " " . $suffix);
            $events[]       = [
                'title' => $dataFieldValue,
                'start' => $crudFieldValue,
                'url'   => route('admin.jobs.edit', $job->id)
            ];
        }

        return view('admin.calendar' , compact('events'));
    }

}
```

 And View file **admin/calendar.blade.php** looks like this:

```
@section('content')
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css'/>

    <h3 class="page-title">Calendar</h3>

    <div id='calendar'></div>

@endsection

@section('javascript')
@parent
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
    <script>
        $(document).ready(function () {
        // page is now ready, initialize the calendar...
        events={!! json_encode($events)  !!};
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            events: events,
        })
    });
</script>
@endsection
```

&#x20;You can easily customize each of the reports after download by adding more logic in the files above.

## How to install/use the module?

&#x20;First, go to your panel's **Modules** menu item, find the module in the list and click **Install**.

![](https://laraveldaily.com/wp-content/uploads/2019/03/modules-system-calendar.png)

&#x20;Then you will see a new menu item **Calendar Sources** on the left, where you can add your CRUDs as sources.

&#x20;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.

![](https://laraveldaily.com/wp-content/uploads/2019/03/modules-system-calendar-sources.png)

&#x20;After adding sources, you will see another new menu item **Calendar** - you can check the results there.

&#x20;As soon as you're happy with your panel, download the files, and Calendar menu will be among them.

## More information

Official documentation: [Fullcalendar.io library](https://www.fullcalendar.io/)

Another article that may help you:&#x20;

{% embed url="<https://quickadminpanel.com/blog/laravel-fullcalendar-createedit-recurring-events/>" %}