如何重新绘制FullCalendar视图？

Question

我知道如何初始化FullCalendar视图，特别是当我的页面加载时，我会执行以下操作：

$('#calendar').fullCalendar({
        'defaultView': 'multiColAgendaWeek',
        'height': BackendCalendar.getCalendarHeight(),
        'editable': true,
        'firstDay': 1, // Monday
        'slotMinutes': 30,
        'snapMinutes': 15,
        'axisFormat': 'HH:mm',
        'timeFormat': 'HH:mm{ - HH:mm}',
        'allDayText': EALang['all_day'], 
        'columnFormat': 
        {
            'month': 'ddd',
            'week': 'ddd D',
            'day': 'dddd'
        },
        'titleFormat': 
        {
            'month': 'MMMM YYYY',
            'week': "MMM D YYYY",
            'day': 'MMMM D YYYY'
        },
        'header': 
        {
            'left': 'prev,next today',
            'center': 'title',
            'right': 'multiColAgendaDay,multiColAgendaWeek,month'
        },
        'views':
        {
            'multiColAgendaDay':
            {
                'type': 'multiColAgenda',
                'duration': { days: 1},
                'columns': 
                [
                    { id:1, name: 'Op1' },
                    { id:2, name: 'Op2' }
                ]
            },
            'multiColAgendaWeek': 
            {
                'type': 'multiColAgenda',
                'duration': { weeks: 1 },
                'columns': [
                    { id: 1, name: 'Op1' },
                    { id: 2, name: 'Op2' }
                ]
            }
        },

我正在使用这个扩展程序：https://github.com/mherrmann/fullcalendar-columns/issues/1 增加资源支持。但是，我想要做的是通过代码更改 columns 参数内容。 columns 属性在两个可用视图 multiColAgendaDay 和 multiColAgendaWeek 中。我有一个方法，用于填充所有可用的约会到日历中，此方法不会重新加载页面，因为使用了ajax请求。一切运作正常，但我想在此方法中添加列的重绘，特别是在重新绘制日历视图之前的填充方法中：

$('#calendar').fullCalendar({
            views: 
            {
                'multiColAgendaDay': 
                {
                    'type': 'multiColAgenda',
                    'duration': { days: 1 },
                    'columns': 
                    [
                        { id: 1, name: 'First Column' },
                        { id: 2, name: 'Second Column' }
                    ]
                }
            },
            'multiColAgendaWeek': 
            {
                'type': 'multiColAgenda',
                'duration': { weeks: 1 },
                'columns': 
                [
                    { id: 1, name: 'First Column' },
                    { id: 2, name: 'Second Column' }
                ]
            }
        });

问题在于日历没有被重新绘制，在执行此代码后，结果始终是这样的：

我不知道自己做错了什么，也许这个日历无法在不重新加载页面的情况下重新绘制视图？我该如何解决这个问题？

- Dillinger

---

你尝试过使用 $('#calendar').fullCalendar('render') 显式地重新绘制吗？ - Steve Greatrex

我还没有尝试使用渲染。 - Dillinger

render 能工作吗？ - Steve Greatrex

目前我已经解决了在日历初始化中设置运算符的问题。 - Dillinger

Answer 1

在某些情况下，渲染功能将无法正常工作。我遇到了这样的问题，因此我创建了一个单独的方法来解决它。在我的情况下，我在每次刷新时都传递了 Json 数组，因此我首先调用该方法以获取数组，然后添加此行代码：

$("#calendar").fullCalendar('destroy');

然后创建一个日历实例，并将Json数组传递给事件。

- Abdul Fawad