Business Catalyst 新闻模块和 FullCalendar.io答案

【问题标题】：Business Catalyst news module and FullCalendar.ioBusiness Catalyst 新闻模块和 FullCalendar.io
【发布时间】：2017-02-06 15:06:13
【问题描述】：

我已经能够使用 BC 新闻模块成功实现 fullcalendar，但是当事件过去后，它会完全从日历中消失。我需要所有过去和现在的事件都留在日历上，但是当我用新闻模块或 web 应用程序替换事件模块时，我的页面只是空白。有人有这方面的经验吗？以下代码适用于工作事件模块，如果我更改：

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

到：

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

我得到了空白页。

<!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>

【问题讨论】：

标签： javascript fullcalendar business-catalyst

【解决方案1】：

在预订的情况下，您可能最好使用带有 {module_data} 的流动布局，因为常规标签不会呈现过去的事件。

{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"}

见{module_data} documentation 您可能还想从here 安装BC api discover app

【讨论】：