README

About

CakePHP 3 plugin that uses FullCalendar JS (as part of AdminLTE) to manage calendar events and attendees.

Some of the things that we'll be adding shortly:

Calendar Attendees search via auto-complete (using Select2 checkbox).
Recurring calendar events.
Prototyping calendar attendees.
Full re-write of jQuery to VueJS components.
FreeBusy Calendar implementation.

This plugin is developed by Qobo for Qobrix. It can be used as standalone CakePHP plugin, or as part of the project-template-cakephp installation.

NOTE: The plugin is under development, so any Bug Reports and Pull Requests are more than welcomed.

Plugin installation

Install with composer:

composer require qobo/cakephp-calendar

Load plugin and its requirements in the application. In config/bootstrap.php:

# Optionally adding AdminLTE and Qobo Utils that are partially used inside.
Plugin::load('AdminLTE', ['bootstrap' => true, 'routes' => true]);
Plugin::load('Qobo/Utils');
Plugin::load('Qobo/Calendar', ['bootstrap' => true, 'routes' => true]);

Run database schema migrations to create tables that will hold calendars, events, attendees, etc.:

./bin/cake migrations migrate --plugin Qobo/Calendar

Customization

JavaScript and Styling.

The plugin heavily relies on AdminLTE Bootstrap theme for styling, so you should make some adjustments in src/Template/Calendars/index.ctp in order to get it running.

<?php

echo $this->Html->css(
    [
        'Qobo/Calendar.fullcalendar.min.css',
        'AdminLTE./plugins/select2/select2.min',
        'AdminLTE./plugins/daterangepicker/daterangepicker',
        'Qobo/Utils.select2-bootstrap.min',
        'Qobo/Calendar.calendar',
    ]
);


echo $this->Html->script([
    'Qobo/Calendar./dist/vendor',
    'Qobo/Calendar./dist/app',
], [
    'block' => 'scriptBottom'
]);

?>

In order to initialise Calendar VueJS application, you should define #qobo-calendar-app element:

<section class="content" id="qobo-calendar-app" token="YourApiToken">
    <calendar :timezone="timezone" :editable="editable" :show-print-button="true"></calendar>
</section>

VueJS Contributions

Calendar Plugin has package.json of all required modules, in order to modify dist compiled JS files. Run yarn command to install required node_module to proceed with development.

In case you need HotReload functionality, run:

yarn watch

Preparing production ready build:

yarn build:prod

For more scripts and linters etc., please check package.json file.

qobo / cakephp-calendar

Maintainers

Details