Business Catalyst news module and FullCalendar.io

Question

I have been able to successfully implement fullcalendar with the BC news module but when the event has passed, it disappears from the calendar completely. I need all events, past and present to stay on the calendar but when I replace the event module with the news module or a webapp, my page just goes blank. Anyone have experience with this? The code below is for the working event module, if I change:

{module_booking filter="all" collection="theEvents" template=""}

to:

{module_announcement filter="all" collection="theEvents" template=""}

I get the blank page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="/css/fullcalendar.min.css" rel="stylesheet" />
<link href="/css/fullcalendar.print.min.css" rel="stylesheet" media="print" />
<link href="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet" />
<script src="/js/moment.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/fullcalendar.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<script>

$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var tooltip = $('<div/>').qtip({
    id: 'calendar',
    prerender: true,
    content: {
        text: ' ',
        title: {
            button: true
        }
    },
    position: {
        my: 'bottom center',
        at: 'top center',
        target: 'mouse',
        viewport: $('#calendar'),
        adjust: {
            mouse: false,
            scroll: false
        }
    },
    show: false,
    hide: false,
    style: 'qtip-light'
}).qtip('api');

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'listDay,listWeek,month'
        },

        // customize the button names,
        // otherwise they'd all just say "list"
        views: {
            listDay: { buttonText: 'list day' },
            listWeek: { buttonText: 'list week' }
        },

        defaultView: 'month',

        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        eventMouseover: function(data, event, view) {
        var content = '<h3>'+data.title+'</h3>' + 
            '<p><b>Start:</b> '+data.start+'<br />' + 
            (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

        tooltip.set({
            'content.text': content
        })
        .reposition(event).show(event);
    },
    dayClick: function() { tooltip.hide() },
    eventResizeStart: function() { tooltip.hide() },
    eventDragStart: function() { tooltip.hide() },
    viewDisplay: function() { tooltip.hide() },
        events: [
            {module_booking filter="all" collection="theEvents" template=""}
            {% for item in theEvents.items -%}
                {
                    title: '{{ item.name }}',
                    url: '{{ item.url }}',
                    start: '{{ item.date | date: "yyyy-MM-dd" }}'
                },
            {% endfor -%}
        ]
    });

});

</script>
</head>

<body>
<div id="calendar"></div>
</body>
</html>

Answer 1

In the case of bookings, you're probably better to use a liquid layout with {module_data} since the regular tags won't render past events.

{module_data resource="bookings" version="v3" fields="name,body,date,capacity,hideWhenFull,disabled,deleted,requiresPayment,createDate,lastUpdateDate" skip="0" limit="10" order="id" collection="myData"}

See the {module_data} documentation and you may also want to install the BC api discover app from here

Business Catalyst news module and FullCalendar.io

Question

1 answers

solution1
0 2017-03-06 11:29:12

Business Catalyst news module and FullCalendar.io

Question

1 answers

solution1 0 2017-03-06 11:29:12

solution1
0 2017-03-06 11:29:12