Question

以下代码来自FullCalendar的Custom View文档。这似乎是一个很好的开始，但对于像我这样的新人来说，拥有一些基本代码可以呈现最简单的自定义视图（有一些事件）会非常有用。他们告诉你将BasicView和AgendaView作为参考，但它有点超出我的理解。是否需要在自定义类中重写每个函数？

此Plunker有一个基本的FullCalendar和一个更改为自定义视图的按钮。什么是非常有用的是看到一个工作的例子。我一直在修补几个小时没有成功的自定义视图。如果您知道FullCalendar并且愿意为函数填写一些代码，那将非常感激！

https://plnkr.co/edit/gfEUCVYTWTm1md24e33m?p=preview

我的目标是构建一个日期列表，按顺序列出当天所有事件的可滚动div（其中每个条目最终将充分利用数据和CSS样式 - 我不确定listDay是否允许对于这种类型的定制??）。

var FC = $.fullCalendar; // a reference to FullCalendar's root namespace
var View = FC.View;      // the class that all views must inherit from
var CustomView;          // our subclass

CustomView = View.extend({ // make a subclass of View

    initialize: function() {
        // called once when the view is instantiated, when the user switches to the view.
        // initialize member variables or do other setup tasks.
    },

    render: function() {
        // responsible for displaying the skeleton of the view within the already-defined
        // this.el, a jQuery element.
    },

    setHeight: function(height, isAuto) {
        // responsible for adjusting the pixel-height of the view. if isAuto is true, the
        // view may be its natural height, and `height` becomes merely a suggestion.
    },

    renderEvents: function(events) {
        // reponsible for rendering the given Event Objects
    },

    destroyEvents: function() {
        // responsible for undoing everything in renderEvents
    },

    renderSelection: function(range) {
        // accepts a {start,end} object made of Moments, and must render the selection
    },

    destroySelection: function() {
        // responsible for undoing everything in renderSelection
    }

});

Answer 1

我为您的plunker添加了几行以使自定义视图正常工作。你可以在这里找到例子：https://plnkr.co/edit/8iOq15CsL2x6RPt29wgE?p=preview

仅提及这些变化：在日历初始化程序中，添加了视图定义

$('#calendar').fullCalendar({
...
    views: {
            CustomView: {
                type: 'custom',
                buttonText: 'my Custom View',
                click:  $('#calendar').fullCalendar('changeView', 'CustomView')
            }
        }
});

在自定义视图中，只是在渲染中添加了这个

 $('.fc-view').append("<div>Insert your content here</div").css("background", "red");

在自定义视图中，您可以通过以下方式访问事件：

var myEvents=$('#calendar').fullCalendar('clientEvents');

从那以后，您可以进行进一步的自定义

如何制作基本的FullCalendar自定义视图

1 个答案: