Add monthList On Fullcalendar 2.4.0 Version - fullcalendar

Question

I managed to add listWeek on Fullcalendar.js Version 2.4.0 , but how can i add listMonth?
Code I Have added for listWeek is shown below
Want to add monthList View to fullcalendar version 2.4. 0
var ListView = fcViews.list = View.extend({
dayGrid: null, // the main subcomponent that does most of the heavy lifting
weekNumberWidth: null, // width of all the week-number cells running down the side
headRowEl: null, // the fake row element of the day-of-week header
//defultEventLimit: 5, //we need to show some events in each cell
viewDateOnLeft: false, //true to display date on left, false to display above the day
initialize: function() {
this.dayGrid = new DayGrid(this);
this.coordMap = this.dayGrid.coordMap; // the view's date-to-cell mapping is identical to the subcomponent's
},
// Sets the display range and computes all necessary dates
setRange: function(range) {
View.prototype.setRange.call(this, range); // call the super-method
this.dayGrid.breakOnWeeks = /year|month|week/.test(this.intervalUnit); // do before setRange
this.dayGrid.setRange(range);
},
// Renders the view into `this.el`, which should already be assigned.
renderDates: function() {
this.dayGrid.colCnt = 1;
this.dayGrid.rowCnt = this.dayGrid.cellDates.length;
this.dayGrid.numbersVisible = true;
if (this.opt('viewDateOnLeft')) {
this.viewDateOnLeft = this.opt('viewDateOnLeft');
this.el.removeClass('fc-display-date-above');
} else {
this.el.addClass('fc-display-date-above');
}
this.el.addClass('fc-basic-view').html(this.renderHtml());
this.headRowEl = this.el.find('thead fc-row');
this.scrollerEl = this.el.find('.fc-day-grid-container');
this.dayGrid.coordMap.containerEl = this.scrollerEl; // constrain clicks/etc to the dimensions of the scroller
this.dayGrid.el = this.el.find('.fc-day-grid');
this.dayGrid.renderDates(this.hasRigidRows());
},
// Make subcomponents ready for cleanup
unrenderDates: function() {
this.dayGrid.unrenderDates();
this.dayGrid.removeElement();
},
// Builds the HTML skeleton for the view.
renderHtml: function() {
return '' +
'<div class="' + this.widgetContentClass + '">' +
'<div class="fc-day-grid-container">' +
'<div class="fc-day-grid"/>' +
'</div>' +
'</div>';
},
// Generates the HTML that will go before the day-of week header cells.
// Queried by the DayGrid subcomponent when generating rows. Ordering depends on isRTL.
headIntroHtml: function() {
if (this.viewDateOnLeft === true) {
return '' +
'<th class="fc-week-number ' + this.widgetHeaderClass + '" ' + this.weekNumberStyleAttr() + '>' +
'<span>' +
'</span>' +
'</th>';
} else {
return '';
}
},
// Generates the HTML that will go before content-skeleton cells that display the day/week numbers.
// Queried by the DayGrid subcomponent. Ordering depends on isRTL.
numberIntroHtml: function(row) {
if (this.viewDateOnLeft === true) {
return '' +
'<td class="fc-week-number" ' + this.weekNumberStyleAttr() + '>' +
'<span>' + // needed for matchCellWidths
this.dayGrid.getCell(row, 0).start.format('ddd MMM D, YYYY') +
'</span>' +
'</td>';
} else {
return '';
}
},
// Generates the HTML that goes before the day bg cells for each day-row.
// Queried by the DayGrid subcomponent. Ordering depends on isRTL.
dayIntroHtml: function() {
if (this.viewDateOnLeft === true) {
return '<td class="fc-week-number ' + this.widgetContentClass + '" ' +
this.weekNumberStyleAttr() + '></td>';
} else {
return '';
}
},
// Generates the HTML that goes before every other type of row generated by DayGrid. Ordering depends on isRTL.
// Affects helper-skeleton and highlight-skeleton rows.
introHtml: function() {
if (this.viewDateOnLeft === true) {
return '<td class="fc-week-number" ' + this.weekNumberStyleAttr() + '></td>';
} else {
return '';
}
},
// Generates the HTML for the <td>s of the "number" row in the DayGrid's content skeleton.
// The number row will only exist if either day numbers or week numbers are turned on.
numberCellHtml: function(cell) {
if (this.viewDateOnLeft === true) {
return '<td/>';
} else {
var date = cell.start;
var classes;
classes = this.dayGrid.getDayClasses(date);
classes.unshift('my-fc-header');
return '' +
'<div class="' + classes.join(' ') + '" data-date="' + date.format() + '">' +
'<span class="my-fc-header-day">' +
date.format('dddd') +
'</span>' +
'<span class="my-fc-header-date">' +
date.format('DD-MM-YYYY') +
'</span>' +
'</div>';
}
},
// Generates an HTML attribute string for setting the width of the week number column, if it is known
weekNumberStyleAttr: function() {
if (this.weekNumberWidth !== null) {
return 'style="width:' + this.weekNumberWidth + 'px"';
}
return '';
},
// Determines whether each row should have a constant height
hasRigidRows: function() {
var eventLimit = this.opt('eventLimit');
if (eventLimit === true) {
eventLimit = this.defultEventLimit;
}
return eventLimit && typeof eventLimit !== 'number';
},
/* Dimensions
------------------------------------------------------------------------------------------------------------------*/
// Refreshes the horizontal dimensions of the view
updateWidth: function() {
// Make sure all week number cells running down the side have the same width.
// Record the width for cells created later.
this.weekNumberWidth = matchCellWidths(
this.el.find('.fc-week-number')
);
},
// Adjusts the vertical dimensions of the view to the specified values
setHeight: function(totalHeight, isAuto) {
var eventLimit = this.opt('eventLimit');
if (eventLimit === true) {
eventLimit = this.defultEventLimit;
}
var scrollerHeight;
// reset all heights to be natural
unsetScroller(this.scrollerEl);
uncompensateScroll(this.headRowEl);
this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
// is the event limit a constant level number?
if (eventLimit && typeof eventLimit === 'number') {
this.dayGrid.limitRows(eventLimit); // limit the levels first so the height can redistribute after
}
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.setGridHeight(scrollerHeight, isAuto);
// is the event limit dynamically calculated?
if (eventLimit && typeof eventLimit !== 'number') {
this.dayGrid.limitRows(eventLimit); // limit the levels after the grid's row heights have been set
}
if (!isAuto && setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars?
compensateScroll(this.headRowEl, getScrollbarWidths(this.scrollerEl));
// doing the scrollbar compensation might have created text overflow which created more height. redo
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.scrollerEl.height(scrollerHeight);
this.restoreScroll();
}
},
// Sets the height of just the DayGrid component in this view
setGridHeight: function(height, isAuto) {
if (isAuto) {
undistributeHeight(this.dayGrid.rowEls); // let the rows be their natural height with no expanding
} else {
distributeHeight(this.dayGrid.rowEls, height, true); // true = compensate for height-hogging rows
}
},
/* Events
------------------------------------------------------------------------------------------------------------------*/
// Sets the view's title property to the most updated computed value
updateTitle: function() {
this.title = this.computeTitle();
},
// Computes what the title at the top of the calendar should be for this view
computeTitle: function() {
return "Week of activity " + this.formatRange({
start: this.intervalStart,
end: this.intervalEnd
},
this.opt('titleFormat') || this.computeTitleFormat(),
this.opt('titleRangeSeparator')
);
},
// Renders the given events onto the view and populates the segments array
renderEvents: function(events) {
this.dayGrid.renderEvents(events);
//console.log(events);
/*var out = '';
jQuery.each(events, function(key, value){
this.dayGrid.renderEvents(value.description);
});*/
this.updateHeight(); // must compensate for events that overflow the row
View.prototype.renderEvents.call(this, events); // call the super-method
},
// Retrieves all segment objects that are rendered in the view
getSegs: function() {
return this.dayGrid.getSegs();
},
// Unrenders all event elements and clears internal segment data
unrenderEvents: function() {
this.dayGrid.unrenderEvents();
// we DON'T need to call updateHeight() because:
// A) a renderEvents() call always happens after this, which will eventually call updateHeight()
// B) in IE8, this causes a flash whenever events are rerendered
},
/* Event Dragging
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of an event being dragged over the view.
// A returned value of `true` signals that a mock "helper" event has been rendered.
renderDrag: function(start, end, seg) {
return this.dayGrid.renderDrag(start, end, seg);
},
// Unrenders the visual indication of an event being dragged over the view
destroyDrag: function() {
this.dayGrid.destroyDrag();
},
/* Selection
------------------------------------------------------------------------------------------------------------------*/
// Renders a visual indication of a selection
renderSelection: function(start, end) {
this.dayGrid.renderSelection(start, end);
},
// Unrenders a visual indications of a selection
destroySelection: function() {
this.dayGrid.destroySelection();
}
});
;;
/* A list view with simple day cells
----------------------------------------------------------------------------------------------------------------------*/
fcViews.listWeek = {
type: 'list',
duration: {
weeks: 1
}
};
;;
return fc; // export for Node/CommonJS
});
verison3
listweek_in_version_2.4.0