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

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');

从那里您可以进行进一步的定制