WRTSA-36 Add shortcode for events fullcalendar.

agileware · Aug 2, 2021 · d8da22c · d8da22c
1 parent d6514f8
commit d8da22c
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/civicrm-ux.php b/civicrm-ux.php
@@ -9,7 +9,7 @@
  * Plugin Name:       WP CiviCRM UX
  * Plugin URI:        https://github.com/agileware/wp-civicrm-ux
  * Description:       A better user experience for integrating WordPress and CiviCRM
- * Version:           1.6.2
+ * Version:           1.7.0
  * Author:            Agileware
  * Author URI:        https://agileware.com.au/
  * License:           GPL-2.0+
@@ -24,7 +24,7 @@
  * Start at version 1.0.0 and use SemVer - https://semver.org
  * Rename this for your plugin and update it as you release new versions.
  */
-define( 'CIVICRM_UXVERSION', '1.6.2' );
+define( 'CIVICRM_UXVERSION', '1.7.0' );
 
 // If this file is called directly, abort.
 if ( ! defined( 'WPINC' ) ) {

diff --git a/public/js/event-fullcalendar.js b/public/js/event-fullcalendar.js
@@ -0,0 +1,40 @@
+const domevent = function(eventName, detail) {
+    if (typeof Window.CustomEvent === "function") {
+        return new CustomEvent(eventName, { bubbles: true, cancelable: true, detail });
+    } else {
+        const event = document.createEvent('CustomEvent');
+        event.initCustomEvent(eventName, true, true, detail);
+        return event;
+    }
+};
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    const calendarEl = document.getElementById('civicrm-event-fullcalendar');
+
+    let calendarParams = ({
+        initialView: 'dayGridMonth',
+        events: {
+            url: '/civicrm/event/ical?reset=1&list=1',
+            format: 'ics',
+        },
+        eventTimeFormat: {
+            hour: 'numeric',
+            minute: '2-digit',
+            omitZeroMinute: false,
+            meridiem: 'short'
+        },
+        headerToolbar: {
+            start: 'title',
+            center: '',
+            end: 'dayGridMonth,listMonth,timeGridWeek,timeGridDay today prev,next'
+        }
+    });
+
+    calendarEl.dispatchEvent(domevent('fullcalendar:buildparams', calendarParams));
+
+    const calendar = new FullCalendar.Calendar(calendarEl, calendarParams);
+
+    calendarEl.dispatchEvent(domevent('fullcalendar:prerender'));
+    calendar.render();
+});
diff --git a/shortcodes/event/event-fullcalendar.php b/shortcodes/event/event-fullcalendar.php
@@ -0,0 +1,27 @@
+<?php
+
+class Civicrm_Ux_Shortcode_Event_FullCalendar extends Abstract_Civicrm_Ux_Shortcode {
+	/**
+	 * @return string The name of shortcode
+	 */
+	public function get_shortcode_name() {
+		return 'ux_event_fullcalendar';
+	}
+
+	/**
+	 * @param array $atts
+	 * @param null $content
+	 * @param string $tag
+	 *
+	 * @return mixed Should be the html output of the shortcode
+	 */
+	public function shortcode_callback( $atts = [], $content = null, $tag = '' ) {
+		wp_enqueue_script( 'ical', 'https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.4.0/ical.min.js', [] );
+		wp_enqueue_script( 'fullcalendar-base', 'https://cdn.jsdelivr.net/combine/npm/[email protected]/main.js', [] );
+		wp_enqueue_script( 'fullcalendar-ical', 'https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.global.js', [ 'fullcalendar-base' ] );
+		wp_enqueue_style( 'fullcalendar-styles', 'https://cdn.jsdelivr.net/npm/[email protected]/main.min.css', [] );
+		wp_enqueue_script( 'ux-fullcalendar', plugin_dir_url( dirname( __FILE__ ) . '/../../..' ) . 'public/js/event-fullcalendar.js', [ 'fullcalendar-ical' ], '1.7.0' );
+
+		return '<div id="civicrm-event-fullcalendar" class="fullcalendar-container"></div>';
+	}
+}