Fullcalendar in Plone 5?

Plone Support Add-on Development
1

The current version of fullcalendar is 3.0.1 but the collective.js.fullcalendar package (used by Solgema.fullcalendar and others) is still pulling in 1.6.4. Personally I haven't been able to get the newer versions to work in Plone 5, due to the updated resource registries and my lack of knowledge in getting third party plugins to work in a requireJS environment. Has anyone taken a look at getting this to work in plone 5? I don't mean fully doing the integration, I just currently can't even get to a point where I can call $('#content').fullCalendar with a new version of it.

2

You may want to evaluate this interim fork of ftw.fullcalendar:

ftw.fullcalendar is not as ambitious in scope as Solgema.fullcalendar, but I think it is worth trying this out.

Sean

3

Hi:

In a recent project I managed to run fullcalendar as follows:

`<metal:js fill-slot="javascript_head_slot">

<script type="text/javascript">
    require.undef('moment');
    require.config({
        "paths": {
          "fullcalendar": PORTAL_URL + "/++theme++mytheme/js/fullcalendar",
          "moment": PORTAL_URL + "/++theme++mytheme/js/moment-with-locales",
        }
    });
    requirejs(["jquery", "moment", "fullcalendar"], function($, moment, cal) {
        $(document).ready(function(){
            $('#event-calendar').fullCalendar({
                events: PORTAL_URL + '/front-page-events.json',
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                timeFormat: 'H:mm',
                lang: 'es',
                fixedWeekCount: false,
                aspectRatio: 1.1,
                eventRender: function(event, element){
                    $(element).attr('title', event.description);
                }
            });

        });
    });
</script>

</metal:js>
`

But, in order to work I had to downgrade to fullcalendar 2.0.3 and moment 2.8.4, because the latest version of fullcalendar made my website completely unbrowsable in mobile devices (I had some issue with some other Javascript that I had little time to debug. That's why I do 'undef' and 'require' again momentjs.

But it should work also as follows:

``<metal:js fill-slot="javascript_head_slot">

<script type="text/javascript">
    require.config({
        "paths": {
          "fullcalendar": PORTAL_URL + "/++theme++mytheme/js/fullcalendar",
        }
    });
    requirejs(["jquery", "moment", "fullcalendar"], function($, moment, cal) {
        $(document).ready(function(){
            $('#event-calendar').fullCalendar({
                events: PORTAL_URL + '/front-page-events.json',
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                timeFormat: 'H:mm',
                lang: 'es',
                fixedWeekCount: false,
                aspectRatio: 1.1,
                eventRender: function(event, element){
                    $(element).attr('title', event.description);
                }
            });

        });
    });
</script>

</metal:js>
``

1 Like
4

Hi, I am interested in calendar for Plone 5. (Note: ftw, is not for P5)

The code you have above, was that for P5?

5

Yes, it's for Plone 5.

6

Thanks. I'll have my programmer look at it. appreciate the help

7

For what it's worth, I ended up not using Solgema.fullcalendar but I am using collective.js.fullcalendar which has 1.6.4 still. I know there are newer versions of that plugin, but I really don't need it. Also that package uses old resource installation method and will put it in the plone-legacy bundle, so I do NOT install it directly. Instead I have a registry.xml profile that contains

<records prefix="plone.bundles/ims.fullcalendar"
         interface='Products.CMFPlone.interfaces.IBundleRegistry'>
    <value key="depends">plone</value>
    <value key="jscompilation">++resource++ims.events/calendar.js</value>
    <value key="compile">False</value>
    <value key="enabled">False</value>
    <value key="last_compilation">2016-07-26 16:49:00</value>
</records>
<record name="plone.resources/resource-collective-js-fullcalendar-fullcalendar.js"
        interface="Products.CMFPlone.interfaces.resources.IResourceRegistry">
    <value key="jscompilation">++resource++collective.js.fullcalendar/fullcalendar.min.js</value>
</record>
<record name="plone.resources/resource-collective-js-fullcalendar-fullcalendar.css"
        interface="Products.CMFPlone.interfaces.resources.IResourceRegistry">
    <value key="css">
        <element>++resource++collective.js.fullcalendar/fullcalendar.css</element>
    </value>
</record>

and then from Products.CMFPlone.resources.add_bundle_on_request in my view to load the bundle only on the single page I need it. From there I add more of my css. It was way less customizable through-the-Plone than Solgema's implementation, but it is way more appropriate for my use cases.

8

FWIW, my previous post pointed to a yet-unmerged fork on github; this has some minor conflicts for merge with the mainline that the 4teamwork folks maintain, but there may be some invested (myself included) in cleaning this up for merge/release.

If you do end up trying the fork (via mr.developer pointing to GitHub - cguardia/ftw.calendar in your build), I am highly likely and reasonably motivated to put some effort toward any cleanups needed, as I will be integrating this with my own sites in coming weeks.

Sean

9

@seanupton thanks, I have someone install this and I'll test it., I'll post my findings here.

10

Hi @seanupton I unstalled the calendar and appears to work fine.

  1. in the instructions, what does " Install the generic import profile. " and where would i find it. also, what does it do.
  2. is there any specific user testing you want me to do to help you?

thanks for helping me with this.