如何制作基本的FullCalendar自定义视图 [英] How to make a basic FullCalendar custom view

问题描述

下面的代码来自FullCalendar的自定义视图文档.这似乎是一个不错的开始，但是对于像我这样的新手来说，拥有一些可以呈现最简单的自定义视图(带有一些事件)的基本代码将非常有帮助.他们告诉您将BasicView和AgendaView用作参考，但这超出了我的理解.是否需要在自定义类中重写每个功能?

The code below is from FullCalendar's Custom View documentation. It seems like a great start, but it would be very helpful for someone brand new like me to have some basic code that renders the most simple custom view (with some events). They tell you to look at BasicView and AgendaView as a reference, but it's a little beyond my understanding. Are each of the functions required to be overridden in the custom class?

此Plunker具有基本的FullCalendar和一个可更改为自定义视图的按钮.看到一个有效的示例将非常有帮助.我已经花了几个小时来修改自定义视图，但没有成功.如果您了解FullCalendar，并愿意为该功能填写一些代码，将不胜感激！

This Plunker has a basic FullCalendar and a button to change to a custom view. What would be very helpful is to see a working example. I have been tinkering for hours with no success for a custom view. If you know FullCalendar and would be willing to fill in some code for the functions it would be very appreciated!

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

我的目标是建立一个日列表，以可滚动的div顺序列出一天中的所有事件(其中每个条目最终都会充斥着数据和CSS样式-我不确定listDay是否允许这种类型的自定义??).

My goal is to build a day list that lists all events of the day in order in a scrollable div (where each entry will eventually be quite fleshed out with data and css styling--I'm not sure if listDay would allow for this type of customization??).

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
    }

});

推荐答案

我向您的代码添加了几行，以使自定义视图起作用.您可以在此处找到示例: https://plnkr.co/edit/8iOq15CsL2x6RPt29wgE?p=preview

I've added a few lines to your plunker to make the custom view work. You can find here the example: https://plnkr.co/edit/8iOq15CsL2x6RPt29wgE?p=preview

仅提及更改: 在日历初始化程序中，已添加视图定义

Just to mention the changes: In the calendar initializer the view definition has been added

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

在自定义视图中，刚刚将其添加到了渲染中

In the custom view just added this in the render

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

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

In the custom view you get access to the events by doing this:

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

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

From there on you can do your further customizations

这篇关于如何制作基本的FullCalendar自定义视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！