web-dev-qa-db-ja.com

基本的なFullCalendarカスタムビューを作成する方法

以下のコードは、FullCalendarの カスタムビュー ドキュメントからのものです。素晴らしいスタートのように思えますが、私のようなまったく新しい人にとって、最も単純なカスタムビュー（いくつかのイベントを含む）をレンダリングする基本的なコードがあると非常に役立ちます。 BasicViewとAgendaViewを参考にするように言われていますが、私の理解を少し超えています。カスタムクラスで各関数をオーバーライドする必要がありますか？

このプランカーには、基本的な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
    }

});
javascriptfullcalendar
10
jbobbins

カスタムビューを機能させるために、プランカーに数行追加しました。ここに例があります： 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');

そこから、さらにカスタマイズを行うことができます

3
Karl