Integrate jQuery Full Calendar with Cascade as Event Management

Nicole Foster's Avatar

Nicole Foster

14 Oct, 2014 02:34 PM

A previous developer for the sites I manage created an event management system and used custom Javascript to display a calendar for our users. Currently, it has out of date code and I was looking to add more functionality using FullCalendar

As of now, the calendar display fine with the necessary Javascript and CSS, but I am trying to find a way to use Cascade as the event manager.

Here is the system the old developer used:

  1. Each of our sites as a _events folder with a page called events-master. The only thing it requires is an index block. The index block used is attached as a screenshot. This the XML it outputs:
<system-index-block name="event-index" type="folder" current-time="1413296827258"><system-page id="ec549a4080e6127011bd1bf79f8d738e"><name>event</name><path>/_events/event</path><site>DSA-Master-New</site><link>site://DSA-Master-New/_events/event</link><system-data-structure definition-path="calendar-event"><event><title>Title</title><date>2014-10-16</date><timebegin>15:00</timebegin><timeend>15:00</timeend><location>Location</location><price>free</price><description /><featured /><featured-image><path>/</path></featured-image><link><page><path>/</path></page><url>http://</url></link></event></system-data-structure></system-page></system-index-block>
  1. The format to display the calendar is currently:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" extension-element-prefixes="ss" version="1.0" xmlns:ss="http://www.hannonhill.com/XSL/Functions" xmlns:xalan="http://xml.apache.org/xalan"> 
    <xsl:include href="site://DSA-Master-New/_internal/stylesheets/date"/>
    <xsl:include href="site://DSA-Master-New/_internal/stylesheets/format-date"/>
    <xsl:output indent="yes" method="xml" omit-xml-declaration="yes"/>
    <xsl:template match="system-folder"/>
    <xsl:template match="calling-page">
        <xsl:apply-templates select="system-page"/>
    </xsl:template>
    <xsl:template match="system-page">
        <xsl:apply-templates select="system-data-structure"/>
    </xsl:template>
    <xsl:template match="system-data-structure">
        <xsl:apply-templates select="page-modules"/>
    </xsl:template>
    <xsl:template match="page-modules">
        <xsl:apply-templates select="moditem"/>
    </xsl:template>
    <xsl:template match="moditem">
    <br/>
        <div>
            <xsl:attribute name="id">module-page</xsl:attribute>
<xsl:if test="content/system-data-structure/manual-calendar != ''">
            <div>
                <xsl:attribute name="class">sidebarmod</xsl:attribute>
                <xsl:choose>
                    <xsl:when test="content/system-data-structure/title != ''">
                        <h2>
                            <xsl:value-of select="content/system-data-structure/title"/>
                        </h2>
                    </xsl:when>
                </xsl:choose>
                <div id="calendar"></div>
      <xsl:choose>
        <xsl:when test="content/system-data-structure/links/link != 'http://' and string(content/system-data-structure/links/link)">
          <p><a class="cta-button" href="{content/system-data-structure/links/link}"><xsl:value-of select="content/system-data-structure/links/clicktext"/></a></p>
        </xsl:when>
        <xsl:when test="content/system-data-structure/links/page/path != '/'">
          <p><a class="cta-button" href="{content/system-data-structure/links/page/path}"><xsl:value-of select="content/system-data-structure/links/clicktext"/></a></p>
        </xsl:when>
        <xsl:otherwise>
        </xsl:otherwise>
      </xsl:choose>
            </div>
        </xsl:if>
 </xsl:template>
    
    <xsl:template match="page">
        <xsl:choose>
            <xsl:when test="pagetitle != ''">
                <h2>
                    <xsl:value-of select="pagetitle"/>
                </h2>
            </xsl:when>
        </xsl:choose>
        <xsl:choose>
            <xsl:when test="subtitle != ''">
                <h3>
                    <xsl:value-of select="subtitle"/>
                </h3>
            </xsl:when>
        </xsl:choose>
        <div class="contentsection">
            <xsl:copy-of select="pagecontent/node()"/>
        </div>
    </xsl:template>
    
                
<xalan:component functions="encodeAmpersand" prefix="ss"> 
        <xalan:script lang="javascript"><![CDATA[ 
          var encodeAmpersand = function (input) { 
            return input.replace(/&(?!amp;)/g, '&amp;'); 
          }; 
        ]]></xalan:script> 
    </xalan:component>
</xsl:stylesheet>
  1. The data definition for someone to create this a block and add it to any page is:
<system-data-structure>
  <text identifier="title" label="Title" required="true"/>
  <group identifier="manual-calendar" label="Main Content">
    <asset type="page" identifier="page" label="Calendar Page" required="true" help-text="This is located at _events/events-master.html"/>
  </group>
  <group identifier="bottom-links" label="Bottom Link">
    <text identifier="clicktext" label="Clickable Text"/>
    <text identifier="link" label="Calendar URL" default="http://"/>
  </group>
</system-data-structure>

This module asks for the events-master page, but the format does not include it anywhere and I'm not sure how to integrate this.

  1. There is a PHP file that gets contents from the events-master.xml page. Here is the code:
<?php
//get the current months events
$month = $_POST['month'];
$year = $_POST['year'];
$monthlength = $_POST['monthLength'];

echo file_get_contents("../../_events/events-master.xml");
?>
  1. Lastly, I am initializing the actual calendar's script and trying to use that PHP code as my EventSource as seen below:
<script type="text/javascript">
    $('#calendar').fullCalendar({
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
        events: {
            url: '/_assets/scripts/suevents.php',
            backgroundColor: '#dc6928',
            type: 'GET',
        data: function() { // a function that returns an object
            return {
                dynamic_value: Math.random()
            };
        },
        error: function() {
            alert('there was an error while fetching events!');
        }
       }
    });
</script>

The previous developer had a very complex system that didn't always work, so we want to make sure this system is pulling correctly and will work.

Do you have any advice based on what we have now?

  1. 1 Posted by Ryan Griffith on 14 Oct, 2014 08:37 PM

    Ryan Griffith's Avatar

    Hi Nicole,

    We actually have a sample calendar Site that you can import into your instance which utilizes Cascade Server and the Full Calendar plugin. It doesn't use the latest version of Full Calendar quite yet, but is not far behind in versions and does use Moment.js so upgrading the plugin shouldn't be too bad.

    I would recommend trying to import the release that corresponds to your Cascade Server version and take a look at how things are set up.

    Please let me know if you have any questions.

    Thanks!

  2. 2 Posted by Nicole Foster on 21 Oct, 2014 02:17 PM

    Nicole Foster's Avatar

    Hi Ryan,

    Thank you for pointing me to that solution.

    I will give it a shot and see if it suits our sites.

    Thanks,
    Nicole

  3. 3 Posted by Ryan Griffith on 21 Oct, 2014 02:24 PM

    Ryan Griffith's Avatar

    Not a problem at all, Nicole. I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any questions about the example Site.

    Have a great day!

  4. Ryan Griffith closed this discussion on 21 Oct, 2014 02:24 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac