Install the App?

Displaying meetings with FullCalendar

FullCalendar integrated to ZnetDK for Mobile
DESCRIPTION Integrating the popular Javascript Calendar FullCalendar into the Starter Web Application.

PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Only four steps are required:
  • Step 1: Coding the view in charge of displaying the calendar,
  • Step 2: Coding the controller that supplies the events to display on the calendar,
  • Step 3: Loading the CSS and JS scripts of FullCalendar from CDN hosting,
  • Step 4: Adding a new item to the App's navigation menu.

DEMONSTRATION See live demo....

Step 1 - Coding the view meetings.php

The view meetings.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

  • <div id="my-calendar"/> is the HTML container of the calendar.
  • The extra style applied to the fc-toolbar-title class is for optimization purpose on mobile small screens.
  • The calOptions JS variable defines the FullCalendar standard options applied to the calendar (see JS Calendar documentation).
  • The fetchEvents() JS function requests through the AJAX API the meetings to display on the calendar.
  • The jQuery event handler on ZnetDK for Mobile afterviewdisplay events instantiates the calendar when the view is displayed for the first time.
  • The App's header is hidden automatically when the view content is scrolled by calling the znetdkMobile.header.autoHideOnScroll() method.

View meetings.php

<div id="my-calendar" class="w3-stretch w3-margin-top"></div>
<style>
#my-calendar .fc-toolbar-title {
    font-size: 18px;
}
</style>
<script>
console.log('meetings.php');
var myCalendar = null,
    calOptions = {
        initialView: 'timeGridWeek',
        weekends: false,
        slotMinTime: '06:00:00',
        slotMaxTime: '22:00:00',
        height: 'auto',
        stickyHeaderDates: true,
        events: fetchEvents
    };

function fetchEvents(fetchInfo, successCallback) {
    znetdkMobile.ajax.request({
        controller: 'meetingctrl',
        action: 'fetch',
        data: {start:fetchInfo.startStr, end:fetchInfo.endStr},
        callback: function (response) {
            successCallback(response);
            // Footer position is adjusted
            znetdkMobile.footer.adjustPosition();
        }
    });
}

/* Once the view is displayed ... */
$('body').on('afterviewdisplay', function (event, viewId) {
    if (viewId === 'meetings') {
        if (myCalendar === null) { // Calendar is not yet instantiated
            myCalendar = new FullCalendar.Calendar($('#my-calendar').get(0), calOptions);
            myCalendar.render();
            // The footer position is adjusted
            znetdkMobile.footer.adjustPosition();
        } else { // Calendar already exists as object
            // The events are refreshed
            myCalendar.refetchEvents();
        }
        znetdkMobile.header.autoHideOnScroll(true);
    } else {
        znetdkMobile.header.autoHideOnScroll(false);
    }
});
</script>
HTML5 JS

Step 2 - Coding the controller meetingctrl.php

The controller meetingctrl.php must be installed into the INSTALL_DIR/applications/default/app/controller/ folder.

  • The action_fetch() method is called by the meetings.php view through the AJAX API (see the fetchEvents() JS function in the view).
  • The start and end POST parameters sent in the AJAX requests indicate the begin and end date of the week to display on the calendar.
  • Two meeting events are returned by the controller's action in JSON format (the PHP array is automatically tansformed in JSON by the ZnetDK \Response object).

Controller meetingctrl.php

<?php
namespace app\controller;

class MeetingCtrl extends \AppController {
    static protected function action_fetch() {
        $request = new \Request();
        $start = new \DateTime($request->start);
        $end = new \DateTime($request->end);
        $events = [];
        $events[] = [
            'title' => 'All Day Event',
            'start' => $start->format('Y-m-d'),
            'end' => $end->format('Y-m-d')
        ];
        $events[] = [
            'title' => 'Meeting',
            'start' => $start->format('Y-m-d') . ' 10:00',
            'end' => $start->format('Y-m-d') . ' 12:00'
        ];

        $response = new \Response();
        $response->setResponse($events);
        return $response;
    }
}
PHP

Step 3 - Loading the CSS and JS FullCalendar scripts

The FullCalendar CSS and JavaScript libraries are automatically loaded by specifying into the config.php of the Web App, the matching url on the CDN hosting (see Settings | App extra CSS and JS libraries).

The config.php script is located into the INSTALL_DIR/applications/default/app/ folder.

The two lines below can be inserted anywhere in the config.php script.

Script config.php

define('CFG_APP_JS', 'https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js');
define('CFG_APPLICATION_CSS', 'https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css');
PHP

Step 4 - Adding a "Meetings" item to the navigation menu

Finally, to give users access to the meetings.php calendar view, a menu item definition is added into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

Script menu.php

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, 'meetings', 'My meetings', 'fa-calendar');
    
    // ... Here, other menu items...
    
}
PHP

Search

Sort order