General Archives | portalZINE NMN | Development meets Creativity

WooCommerce Appointments Enhanced with an Availability Calendar

6. March 2018

WordPress WooCommerce Appointments

WooCommerce Appointments is a commercial booking plugin that allows you to setup appointments with WooCommerce. It has full integration into Google calendar to track appointments of your staff.

Staff availability can be set globally or via each staff members profile. While this is nice, I was looking for an option to actually handle availability via another Google Calendar as well. That was a must have feature for a current project.

What do you do, if that feature is not available yet ? You poke the code!

The magic entry point for the staff availability is the user meta “_wc_appointment_availability“, which is made available through includes/class-wc-product-appointment-staff.php.

A couple of weeks ago I asked support for a simple filter hook to alter the availability on demand from the outside.

The development team added the feature in one of the latest releases, making wc_appointments_staff_availability the entry point for my custom availability changes.

The filter hook

add_filter( 'wc_appointments_staff_availability', 'availability_callback', 10, 3 );

function availability_callback($availability, $staff){
// Your changes here
return $availability;
}

add_filter( 'wc_appointments_staff_availability', 'availability_callback', 10, 3 );

function availability_callback($availability, $staff){

// Your changes here

return $availability;

}

Getting the data

You can either pull Google Calendar Events directly through the Google Calendar API or use the available iCal export option. In this quick example I will use the private calendar iCal export file.

The availability calendar

Lets setup a quick clean calendar, called “Availability”. So simple and catchy :)

Create a new calendar
Create some test events. WooCommerce Appointments supports multiple availability rules, but I am focusing on the time:range option and recurring events for this example. I might be extending on this a bit more in the future ! So for this example: Friday, timeframe 10:00 – 16:00 and repeating four times.
Go into settings and get the link to the privat ical export file

Parse iCal data

For this example I am using the PHP ICS Parser, but any other parser will do. Install it via composer: composer require johngrogg/ics-parser.

Lets create a quick little plugin to get us going and save it to /wp-content/plugins/CustomAvailability/smile.php

<?php
use ICal\ICal;

/*
Plugin Name: WooCommerce Appointments - Custom Availability
Plugin URI: https://portalzine.de
Description: Attach additional Google Calendar for staff availability
Version: 1.0
Author: portalZINE NMN
Author URI: https://portalzine.de
*/


require_once(PATH_TO_VENDOR_DIR."vendor/autoload.php");

class StaffCustomAvailability{
 
function __construct() {
  add_filter( 'wc_appointments_staff_availability', array($this, 'staffAvailability'), 10, 3 );
 }
 
function staffAvailability($availability, $staff){
// Your changes here
return $availability;
}

}

$StaffCustomAvailability = new StaffCustomAvailability();

<?php

use ICal\ICal;

Plugin Name: WooCommerce Appointments - Custom Availability

Plugin URI: https://portalzine.de

Description: Attach additional Google Calendar for staff availability

Version: 1.0

Author: portalZINE NMN

Author URI: https://portalzine.de

require_once(PATH_TO_VENDOR_DIR."vendor/autoload.php");

class StaffCustomAvailability{

function __construct() {

add_filter( 'wc_appointments_staff_availability', array($this, 'staffAvailability'), 10, 3 );

}

function staffAvailability($availability, $staff){

// Your changes here

return $availability;

}

$StaffCustomAvailability = new StaffCustomAvailability();

Set the availability

Its time to get the data into the system. I am only pulling and altering the availability for one single user in this example, the user with the USERID “3”. This should provide you with a good starting point.

function staffAvailability($availability, $staff){

// $staff holds the complete user data
// $availability is the current set of rules

// Only altering availability for  USERID 3

if($staff->data->ID == 3){
     $newSet = array();  
  try {
    // add the private ics file here
    $ical = new ICal('URL TO PRIVATE ICS FILE', array(
        'defaultSpan'                 => 2,     // Default value
        'defaultTimeZone'             => 'Europe/Berlin',
        'defaultWeekStart'            => 'MO',  // Default value
        'disableCharacterReplacement' => false, // Default value
        'skipRecurrence'              => false, // Default value
        'useTimeZoneWithRRules'       => false, // Default value
    ));

     } catch (\Exception $e) {
    die($e);
}

   $forceTimeZone = true;
        
   $events = $ical->sortEventsWithOrder($ical->events());
    // looping through all events
   foreach ($events as $event) {
        // Get Start and end date / time information
        $dtstart = $ical->iCalDateToDateTime($event->dtstart_array[3], $forceTimeZone);
        $dtend = $ical->iCalDateToDateTime($event->dtend_array[3], $forceTimeZone);
        
        // Define new time:range rule
        // Adding one rule per day 
       // Added Friday to the calendar + event recurring  4 times, which results in 4 new rules for staff member 3
        $newSet[] =  array(             
            'type' => "time:range",// rule type used for this example
            'appointable' => "yes",
            '[priority' => 10,
            'from' => $dtstart->format('H:i'), // start time 10:00
            'to' => $dtend->format('H:i'), // end time 16:00
            'from_date' => $dtstart->format('Y-m-d'), // start date -  Friday
            'to_date' => $dtend->format('Y-m-d') // end date - Friday
                       );
            $availability = $newSet;
          }
      
      
    }
return $availability;
}

function staffAvailability($availability, $staff){

// $staff holds the complete user data

// $availability is the current set of rules

// Only altering availability for USERID 3

if($staff->data->ID == 3){

$newSet = array();

try {

// add the private ics file here

$ical = new ICal('URL TO PRIVATE ICS FILE', array(

'defaultSpan' => 2, // Default value

'defaultTimeZone' => 'Europe/Berlin',

'defaultWeekStart' => 'MO', // Default value

'disableCharacterReplacement' => false, // Default value

'skipRecurrence' => false, // Default value

'useTimeZoneWithRRules' => false, // Default value

));

} catch (\Exception $e) {

die($e);

}

$forceTimeZone = true;

$events = $ical->sortEventsWithOrder($ical->events());

// looping through all events

foreach ($events as $event) {

// Get Start and end date / time information

$dtstart = $ical->iCalDateToDateTime($event->dtstart_array[3], $forceTimeZone);

$dtend = $ical->iCalDateToDateTime($event->dtend_array[3], $forceTimeZone);

// Define new time:range rule

// Adding one rule per day

// Added Friday to the calendar + event recurring 4 times, which results in 4 new rules for staff member 3

$newSet[] = array(

'type' => "time:range",// rule type used for this example

'appointable' => "yes",

'[priority' => 10,

'from' => $dtstart->format('H:i'), // start time 10:00

'to' => $dtend->format('H:i'), // end time 16:00

'from_date' => $dtstart->format('Y-m-d'), // start date - Friday

'to_date' => $dtend->format('Y-m-d') // end date - Friday

);

$availability = $newSet;

}

return $availability;

}

The example pulls and parses the ics file on every load, use a transient or REDIS to store data and only refresh in certain intervals.

Hope this gets you started! I build a simple interface around it, with a lot of more rule options. This makes the setup for each staff member a brise. Now each of them can setup a calendar easily and provide me with the ics link :) WooCommerce Appointments rocks …

Enjoy coding ….

Chrome 56 .. whats new?

9. February 2017

With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API, position sticky is back – making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.

Chrome 56 on iOS also adds the ability to scan QR codes directly within Chrome. So many thought QR-Codes were dead, well not so much !

Google

Lakka – transform a small computer into a full blown gaming console

10. January 2017

Lakka is a lightweight Linux distribution that transforms a small computer into a full blown game console.
Built on top of the famous RetroArch emulator.

Lakka

Kap … An open-source screen recorder built with web technology

11. October 2016

Kap is an open-source screen recorder for MacOS X built with web technology.

Kap

DxO One – external iPhone camera

23. September 2016

“The DxO ONE plugs directly into your iPhone with a simple click. Once it is connected, the iPhone’s Retina display immediately transforms into the camera’s viewfinder, allowing you to compose the image and adjust every setting.”

Really love the concept, even though I am an Android phone user through and through :)

DxO One

Site-specific browsers with Epichrome

4. August 2016

“Epichrome is made up of two parts: an AppleScript-based Mac application (Epichrome.app) and a companion Chrome extension (Epichrome Helper). Epichrome.app creates Chrome-based site-specific browsers (SSBs) for Mac OSX (Chrome must be installed in order to run them, but they are full Mac apps, each with its own separate Chrome profile).”

GitHub

Use Markdown for your emails

14. May 2016

Markdown Here is an extension for Chrome, Firefox, and Thunderbird that allows you to write email in Markdown.

“With it, you can write email in Markdown, and then click a button (or context menu item, or use a hotkey) to render the email into good-looking, fully formatted text (HTML, technically).”

Markdown Here

Interact.js – Drag and drop, resizing and multi-touch gestures with inertia and snapping

6. May 2016

inertia and snapping
multiple interactions
cross browser and device, supporting the desktop and mobile versions of Chrome, Firefox and Opera
interaction with SVG elements
being lightweight and standalone (not yet another jQuery plugin)
not modifying the DOM except to support IE8 and to change the cursor (but you can disable that)

GitHub

Vivaldi – freeware web browser with Chromium at its core

7. April 2016

Vivaldi is a new web-browser with Chromium at its core and a complete new interface based on current web-technologies.

“Vivaldi is a freeware web browser developed by Vivaldi Technologies, a company founded by Opera Software co-founder and former CEO Jon Stephenson von Tetzchner and Tatsuki Tomita.”

Vivaldi

Happy Easter

24. March 2016

I wish you all

Happy Easter

I am taking a litte break and will be back to work next week.

Enjoy your time with family and friends