Temel FullCalendar özel görünümü nasıl yapılır

Question

Aşağıdaki kod, FullCalendar'ın Custom View belgelerinden alınmıştır. Bu harika bir başlangıç ​​gibi görünüyor, ama benim gibi yeni birisinin benim için en basit özel görünümü (bazı olaylar ile) oluşturan bazı temel kodlara sahip olması çok yararlı olacaktır. BasicView ve AgendaView'a referans olarak bakmanızı söylerler, fakat benim anlayışımın biraz ötesinde. Özel sınıfta işlevlerin her birinin geçersiz kılınması gerekiyor mu?

Bu Plunker'ın temel bir FullCalendar ve özel görünüme geçmek için bir düğmesi vardır. Çok yardımcı olacak şey, çalışan bir örnek görmek. Özel bir görüş için hiçbir zaman başarılı olamadığım için saatlerce uğraşıyorum. Eğer FullCalendar'u biliyorsanız ve işlevler için bazı kodları doldurmaya istekli olsaydınız çok takdir edersiniz!

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

Amacım her girişin sonunda oldukça veri ve css stil fleshed edilecektir kaydırılabilir div (sırayla günün tüm olayları listeleyen bir günlük listeyi inşa etmek - Özür listDay bu tür bir özelleştirme için izin verirse emin değilim ??).

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

Özel görünümün çalışması için plunker'ınıza birkaç satır ekledim. https://plnkr.co/edit/8iOq15CsL2x6RPt29wgE?p=preview

Sadece değişiklikleri söz: Burada örnek bulabilirsiniz görünüm tanımı hale sadece bu eklenen özel görünümünde

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

eklendi başlatıcısı Takvimde

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

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

0123: özel olarak

Bunu yaparak olaylara erişmek görmek

Bundan sonra diğer özelleştirmelerinizi yapabilir