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.

To view the data in a calendar form, we use FullCalendar.io library.

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

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

Official documentation: Fullcalendar.io library

Another article that may help you:

Last updated