# 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/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helpdocs.quickadminpanel.com/modules/system-calendar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.