YearView for fullcalendar v3.6.1

yearview.js

var YearView = View.extend({ // make a subclass of View
	startDate: null,
	endDate: null,
	days: [],

	initialize: function() {
	  // called once when the view is instantiated, when the user switches to the view.
	  // initialize member variables or do other setup tasks.	  
	},

	generateDaysInMonth: function (month) {
		var curDate = moment(this.startDate).month(month).date(1);
		var tmpDays = [[]];
		var curWeek = 0;
		var dayInWeek;		

		while (curDate.month() === month || curDate.month() === month - 12) {
			const dayInWeek = curDate.isoWeekday() - 1; // monday 0 -> sunday 6
			tmpDays[curWeek][dayInWeek] = curDate.date();

			if (dayInWeek === 6) { // if current day is sunday -> add new week
				curWeek++;
				tmpDays.push([]);
			}
			curDate.add(1, 'd');
		}
		this.days[month] = tmpDays;
	},
  
	render: function() {		
		var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
            'August', 'September', 'October', 'November', 'December'];
		var dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
		
		var startDate = this.calendar.view.start,
			endDate   = this.calendar.view.end,
			yearDiff  = endDate.year() - startDate.year(),
			numOfMonths = endDate.month() - startDate.month() + yearDiff * 12;

		var years = [startDate.year()];
		if (yearDiff) {
			years.push(years[0] + 1);
		}

		this.startDate = this.calendar.view.start;
		this.endDate   = this.calendar.view.end;

		var months = _.range(numOfMonths);
					
		months.forEach((m) => {			
			this.generateDaysInMonth(m);
		});
	
	  // responsible for displaying the skeleton of the view within the already-defined
	  // this.el, a jQuery element.
		var theme = this.calendar.theme;

		var s = '<div class="container-fluid"><div class="row">';
		
		for (var month in months) {			
			s += '<div class="col-4 calendar-month">';
			s += '<div class="text-center">' + (monthNames[month > 11 ? month - 12 : month]) + ' ' + (years[month > 11 ? 1 : 0]) + '</div>';
			s += '<table class="table table-sm table-bordered text-center">';
			s += '	<thead>';
			s += '		<tr>';

			for (var dayName in dayNames) {
				s += '<th>' + dayNames[dayName] + '</th>';
			}

			s += '		</tr>';
			s += '	</thead>';			
			s += '	<tbody>';			

			for (var week in this.days[month]) {				
				s += '<tr>';
			
				for (var day = 0; day < 7; day++) {	
					if (this.days[month][week][day]) {
						s += '<td>' + this.days[month][week][day] + '</td>';
					} else {
						s += '<td>&nbsp;</td>';	
					}					
				}

				s += '</tr>';
			}

			s += '	</tbody>';
			s += '</table></div>';			
		}

		s += '</div></div>';
	
		this.el.parent().addClass('no-box-sizing');
		this.el.html(s);
	},
  
	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
	}
  
  });
  
  FC.views.custom = YearView; // register our class with the view system

;;

fcViews.year = {
	'class': YearView,
	duration: { year: 1 },
	defaults: {
		fixedWeekCount: true
	}
}