Fullcalendar in Plone 5?

Plone Support Add-on Development
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