How to create a basic custom FullCalendar view

Question

Below is the code from the FullCalendar Custom View document . This seems like a great start, but it would be very useful if someone completely new, like me, had some basic code that displays the simplest user view (with some events). They will tell you both BasicView and AgendaView as a link, but this is a little beyond my understanding. Should each of the functions be overridden in a custom class?

This Plunker has a basic FullCalendar and a button to go to the user view. It would be very helpful to see a working example. I go in for hours without any success for the user view. If you know FullCalendar and are ready to fill out some code for functions, it will be very appreciated!

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

My goal is to create a daily list that lists all the events of the day in a scrollable div (where each record will ultimately be completely outlined using data and CSS styles). I'm not sure what listDay will allow for this type of configuration?).

var FC = $.fullCalendar; // a reference to FullCalendar 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

, . : 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');