Switching between CustomView and other views such as month,agendaWeek etc. error

[avinash-ramireddy]

Hi, First of all,I am very delighted to find full calendar with such easy operations. I am trying to create a custom view which contains event details by date. I followed following link http://stackoverflow.com/questions/33018303/fullcalendar-custom-view-ordering which gave me some idea about doing(I also tried other links but I could not understand why I needed timegrid,daygrid,business hours etc. in my case).

Problem: By default,I am loading my custom view whose name is Agenda. 1.When I switch to other(for example to month ) view, it is empty without any events. 2.At this stage when switch back to Agenda View(Custom View) again,I get following error

spec.class is not a constructor in the function

// Given a view name for a custom view or a standard view, creates a ready-to-go View object        
 instantiateView: function (viewType) {
            var spec = this.getViewSpec(viewType);
            //console.log(spec);

            return new spec['class'](this, viewType, spec.options, spec.duration);
        },

I would like to share my code for showing error,but it's linked to repository.So,you may not access it. But here I am showing what I changed in my js file which required for custom view

$('#calendar').fullCalendar({
                customButtons: {
                    agendaAll: {
                        text: 'Agenda',
                        click: function () {
                            //$('#calendar').fullCalendar('removeEventSource', 'list');
                            //$('#calendar').fullCalendar('addEventSource', 'list'); 
                            $('#calendar').fullCalendar('changeView', 'list');
                        }
                    }
                },
                header: {
                    left: 'prev,today,next',
                    center: 'month,agendaWeek,agendaDay,agendaAll',
                    //right: 'title',
                },
                editable: true,
                firstDay: 1,
                selectable: true,
                defaultView: 'agendaAll',
                allDaySlot: false,
                selectHelper: true,
                showWeekNumbers: true,
                select: function (start, end) {
                    $('.datetimepicker').datetimepicker({
                        ampm: true
                    });

                    var start = moment(start).format('YYYY/MM/DD hh:mm A');
                    $('#start').val(start);

                    var end = moment(end).format('YYYY/MM/DD hh:mm A');
                    $('#end').val(end);

                    $('#addEventModal').modal();
                },
                eventLimit: true,
                views: {
                    month: {
                        eventLimit: 3
                    } 
                },
//rest of the code 

In my calendar.js , I am extending view as

var ListView = FC.ListView = View.extend({ // make a subclass of View

        initialize: function () {
            //console.log("initialize");
        },
        render: function () {
            this.el.html('<table class="fc-list-event-table" />');
        },
        setHeight: function (height, isAuto) {
            //console.log("setHeight"); 
        },

        renderEvents: function (events) {
            //console.log("renderEvents"); 
            var t = this;
            var dailyEvents = [];

            $.ajax({
                url: "/TimeTracking/GetEventsForCustomView",
                type: "GET",
                success: function (data) {
                    getDailyEvents(data);
                }
            });
            function getDailyEvents(data) {
                $.each(data, function (index, day) {
                    dailyEvents.push({
                        date: day.start,
                        events: [day]
                    });
                });
                $.each(dailyEvents, function (index, day) {
                    t.el.find('.fc-list-event-table').append(t.dayHtml(day.date, day.events));
                });
            }
        },
        dayHtml: function (day, events) {
            var dayHeader = '<thead class="fc-head">' +
                            '<tr>' +
                                '<th class="">' +
                                    '<h5 style="text-align:left;">' + day + '</h5>' +
                                '</td>' +
                            '</tr>' +
                        '</thead>' +
                        '<tbody class="fc-body">';

            var dayFooter = '</tbody>';

            var dayEvents = '';

            $.each(events, function (index, event) {
                //console.log(event);
                **//var event_classes = event.source.className.slice();

                //event_classes.push('fc-content fc-event');** what is this doing if uncommented? 

                dayEvents += '<tr>' +
                    '<td class="' + this.widgetContentClass + '">' +
                        '<div class="fc-event-container">' +
                            '<div class="' + event_classes.join(" ") + '">' +
                                '<h3>' + event.title + '</h3>' +
                                '<div class="event-details">' + (event.description || "") + '</div>' +
                                '<div class="event-date">' + event.start + '</div>' +
                            '</div>' +
                        '</div>' +
                    '</td>' +
                '</tr>';
            });

            return dayHeader + dayEvents + dayFooter;
        }
    });

Then I am registering class name to views as

 fcViews.agendaAll = {
        'class': ListView
    };

Please help me in resolving my problem.

[arshaw]

could you please post a JSBin? there are instructions for simulating JSON feeds, similar to your situation... http://fullcalendar.io/wiki/Reporting-Bugs/

[tejashri28]

how do i pass start & end date to agendaWeek?

[h0jeZvgoxFepBQ2C]

anyone solved this?

[boboci9]

Hi did anyone have any luck solving this issue? I have it as well when I try to add defaultView: 'listWeek'.

[Nataligam]

anyone solved this?