So erstellen Sie eine benutzerdefinierte Basiskalenderansicht

Question

Der folgende Code stammt aus der Dokumentation Custom View von FullCalendar. Es scheint wie ein guter Start, aber es wäre für jemand ganz neu sehr hilfreich sein, wie ich einige grundlegende Code zu haben, die die einfachste benutzerdefinierte Ansicht (mit einigen Veranstaltungen) macht. Sie sagen Ihnen, bei Basicview und AgendaView als Referenz zu sehen, aber es ist ein wenig über mein Verständnis. Muss jede der Funktionen in der benutzerdefinierten Klasse außer Kraft gesetzt werden?

Diese Plunker hat eine grundlegende FullCalendar und eine Schaltfläche, um eine benutzerdefinierte Ansicht zu ändern. Was sehr hilfreich wäre, ist ein funktionierendes Beispiel zu sehen. Ich habe stundenlang daran herumgebastelt, ohne Erfolg für eine benutzerdefinierte Ansicht. Wenn Sie wissen, FullCalendar und wäre bereit, in einigen Code für die Funktionen zu füllen wäre es sehr geschätzt werden!

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

Mein Ziel ist es, eine Tag-Liste zu erstellen, die alle Ereignisse des Tages, um in einem scrollbaren div Listen (wobei jeder Eintrag wird schließlich ganz mit Daten und CSS-Styling konkretisiert werden - sie ist nicht sicher, ob listDay diese Art der Anpassung zulassen würde?).

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

Ich habe ein paar Zeilen zu Ihrem Plunker hinzugefügt, damit die benutzerdefinierte Ansicht funktioniert. Sie können hier das Beispiel finden: https://plnkr.co/edit/8iOq15CsL2x6RPt29wgE?p=preview

nur die Änderungen zu erwähnen: Im Kalender Initializer die Ansichtsdefinition hat

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

In der benutzerdefinierten Ansicht nur hat dieses Bild in dem Render hinzugefügt

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

in der benutzerdefinierten Ansicht Sie Zugang zu den Veranstaltungen erhalten, indem dies zu tun:

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

Von dort aus können Sie weitere Anpassungen vornehmen