📙
QuickAdminPanel
  • QuickAdminPanel Docs
  • Quick Start: Creating Panel
    • Creating a Simple CRUD
    • Radio/Checkbox/Select Fields
    • Relationships fields: belongsTo/belongsToMany
    • File/Photo Upload Fields
    • Date/Time Picker Fields
    • Multi-language Projects
    • API Generator
    • Roles and Permissions
    • How to Change Design Template/Theme
  • Using the Generated Code
    • Download Code and Install on Your Web-Server
    • Push Code to Your Github
    • Edit Code and Merge Changes
    • What Files are Inside the CRUD
  • Modules
    • Modules Overview
    • AJAX Datatables
    • System Calendar
    • Audit Changes Logs
    • Dashboard and Reports
    • Multi-Tenancy
    • CSV Import
    • Global Search
    • User Registration
    • Internal Messages
    • Change Notifications
    • Tasks + Calendar
    • Courses LMS
    • CRUD Templates Modules
  • Customizing the Code
    • Datatables Customizations
    • Upgrade Laravel version
    • Dependent Dropdowns: Parent-Child
    • Add Front User Without Admin Permissions
    • How to Add Mass Actions to Datatable
  • Vue.js + Laravel API Version
    • QuickAdminPanel: Vue.js+Laravel Version
    • What Files are Inside Vue.js+Laravel CRUD?
    • Installing Downloaded Vue.js+Laravel Panel
  • Livewire + Tailwind Version
    • QuickAdminPanel: Livewire+Tailwind Version
    • What Files are Inside Livewire+Tailwind CRUD?
    • Installing Downloaded Livewire+Tailwind Panel
Powered by GitBook
On this page
  • How does the result look in QuickAdminPanel code?
  • How to install/use the module?
  • More information
  1. Modules

System Calendar

PreviousAJAX DatatablesNextAudit Changes Logs

Last updated 4 years ago

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.

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

Another article that may help you:

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

Official documentation:

FullCalendar.io library
Fullcalendar.io library
LogoLaravel + FullCalendar: Create/Edit Recurring EventsQuick Admin Panel