如何製作基本FullCalendar自定義視圖

下面的代碼來自FullCalendar的Custom View文檔。這似乎是一個很好的開始，但對於像我這樣的全新品牌來說，它有一些基本代碼可以呈現最簡單的自定義視圖（帶有某些事件），這會非常有幫助。他們告訴你以BasicView和AgendaView作爲參考，但這有點超出我的理解範圍。是否需要在自定義類中重寫每個函數？如何製作基本FullCalendar自定義視圖

這個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 
    } 

});

來源

2017-04-11 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');

從那裏你可以做你的進一步定製

來源

2017-09-09 11:19:43 Karl

如何製作基本FullCalendar自定義視圖

回答

相關問題