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

问题

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 it looks pretty bad when on mobile devices and any devices with small width screens...

If the only way to do this is through modifying the underlying code, where in the code creates the table content for the Week view? If I figure out where that is, I could probably modify it to display as a list instead of a table...

回答1:

UPDATE: I expanded on the below and came up with a better solution, with labels for each day.

Here's an updated example fiddle: http://jsfiddle.net/nomatteus/dVGN2/3/

Here's a link to my answer in action: http://jsfiddle.net/nomatteus/VSXSB/2/

There is no way to do this without modifying the source code. However, you can make a simple edit to display the days vertically. In the BasicWeekView.js file, change

renderBasic(1, colCnt, false);

renderBasic(colCnt, 1, false);

For reference, the renderBasic function paramaters are rowCount, colCount, showNumbers.

I'd recommend copying the BasicWeekView code and use it to make your own view, so you can make other modifications as necessary (and also still have access to the basic week view).

回答2:

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('<div class="fc-vertweek-day">&nbsp;</div>');

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

        // Place the new date into the cell header. 
        cell.append('<div class="fc-vertweek-header"><div class="fc-vertweek-day">'+this_date+'</div></div>');
    }
},

来源：https://stackoverflow.com/questions/19232242/fullcalendar-change-week-view-to-vertical-list-instead-of-horizontal-table-colum

标签

fullcalendar