FullCalendar Change Week View to Vertical List instead of Horizontal Table Columns

Question

Anyway to change the way the Days show in the Week View? I\'d rather see a vertical list of the vents by day instead of the horizontal table view of the days. reasoning is i

Answer 1

I wanted to do the same thing with my calendar. On a mobile screen the horizontal layout is not very usable. With the current version of FullCalendar (2.1.1) I was able to create a vertical layout that looks half-decent:

Do this:

Change the fullcalendar.js file by adding this just below the code for the "BasicWeekView":

/* A week view with simple day cells running vertically
--------------------------------------------------------------------------*/

fcViews.vertWeek = VertWeekView; // register this view

function VertWeekView(calendar) {
    BasicView.call(this, calendar); // call the super-constructor
}

VertWeekView.prototype = createObject(BasicView.prototype); 
$.extend(VertWeekView.prototype, {
    name: 'vertWeek',

    incrementDate: function(date, delta) {
        return date.clone().stripTime().add(delta, 'weeks').startOf('week');
    },

    render: function(date) {
        this.intervalStart = date.clone().stripTime().startOf('week');
        this.intervalEnd = this.intervalStart.clone().add(1, 'weeks');

        this.start = this.skipHiddenDays(this.intervalStart);
        this.end = this.skipHiddenDays(this.intervalEnd, -1, true);

        this.title = this.calendar.formatRange(
            this.start,
            this.end.clone().subtract(1), // make inclusive by subtracting 1 ms
            this.opt('titleFormat'),
            ' \u2014 ' // emphasized dash
        );

        BasicView.prototype.render.call(this, this.getCellsPerWeek(), 1,  true); 
    }
});
;;

Add this CSS to your page:

.fc-vertweek-header {
    overflow: hidden;
    width: 100%;
}
.fc-vertweek-day {
    float: right; 
    margin: 10px;
}

Now in your javascript call to fullCalendar specify these two things:

defaultView: vertWeek,

and :

dayRender: function( date, cell ) { 
    // Get the current view     
    var view = $('#meal_calendar').fullCalendar('getView');

    // Check if the view is the new vertWeek - 
    // in case you want to use different views you don't want to mess with all of them
    if (view.name == 'vertWeek') {
        // Hide the widget header - looks wierd otherwise
        $('.fc-widget-header').hide();

        // Remove the default day number with an empty space. Keeps the right height according to your font.
        $('.fc-day-number').html('
 
');

        // Create a new date string to put in place  
        var this_date = date.format('ffffd, MMM Do');

        // Place the new date into the cell header. 
        cell.append('
'+this_date+'
');
    }
},