fullcalendar playground

• multi-week view • background event titles

by jmpp77

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.css">
<div id='calendar'></div>

JavaScript

var nextWeekStart = moment().startOf('week').add(1, 'week');
var nextWeekEnd = nextWeekStart.clone().add(1, 'week');

var longWeekendStart = nextWeekStart.clone().day(5);
var longWeekendEnd = longWeekendStart.clone().add(4, 'day');


function customDayRender(date, $cell) {
  // cell is the background -- it doesn't contain
  // the day number or any events
	//if (date.isBetween(nextWeekStart, nextWeekEnd)) {
  //	$cell.css('backgroundColor', 'red');
  //}
}

function customEventRender(event, $element, view) {
	// background events don't yet render their titles
  // (https://github.com/fullcalendar/fullcalendar/issues/2746)
	if (event.rendering === 'background' && event.title) {
  	$('<div class="fc-bgevent-title">')
    	.text(event.title)
      .appendTo($element);
  }
}


$('#calendar').fullCalendar({
   //height: 'auto',
   contentHeight: 'auto',
   //aspectRatio: 1,
   
   header: {
        center: 'multiWeek,agendaWeek,agendaDay' // buttons for switching between views
    },
    
    defaultView: 'multiWeek',
    defaultDate: moment().subtract(7, 'days'),
    selectable: true,
    
    dayRender: customDayRender,
    eventRender: customEventRender,
        
    views: {
    	multiWeek: {
      	type: 'month',
        duration: { weeks: 4 },
        buttonText: '4 week',
        fixedWeekCount: false
      }
    },
    
    events: [{
    	title: 'next week',
      start: nextWeekStart,       
      end: nextWeekEnd,       
      allDay: true,
      rendering: 'background'
    }, {
    	title: 'tomorrow',
      start: moment().add(1, 'day'),       
      end: moment().add(1, 'day'),       
      allDay: true,
      rendering: 'background',
      backgroundColor: '#0ab'
    }, {
    	title: 'long weekend',
      start: longWeekendStart,       
      end: longWeekendEnd,       
      allDay: true,
      rendering: 'background',
      backgroundColor: '#b00'
    }],
    
    
});

// Consider extending FC.MonthView for better multi-week view behavior
//...