fullcalendar playground

• multi-week view • background event titles

by makelele24

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>

SCSS

.fc td.fc-bgevent {
  vertical-align: bottom;
  padding: 0.25em;
  opacity: inherit; // default 0.3 (for above gridlines)
}

.fc-row .fc-bgevent-skeleton {
  z-index: 0; // default 2 (above gridlines)
}

.fc-bgevent-title {
  z-index: 999; // doesn't help
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  //text-overflow: ellipsis;
}


#calendar {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
  overflow: auto;
}



html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
  
  font: 14px Arial, sans-serif;
}

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
//...