How to change full calendar views

Question

I am using fullcalendar and currently its showing monthly view .

I am using following code to initialize the full calendar.

$(document).ready(function() {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2014-06-12',
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: '2014-06-01'
                },
                {
                    title: 'Long Event',
                    start: '2014-06-07',
                    end: '2014-06-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2014-06-09T16:00:00'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2014-06-16T16:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2014-06-12T10:30:00',
                    end: '2014-06-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2014-06-12T12:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2014-06-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2014-06-28'
                }
            ]
        });

    });

But i want to change the view like this

Please suggest how to achieve this in fullcalendar ? Thanks.

Answer 1

To set the initial view, add the 'defaultView' property to your calendar initialization code. Possible view types are:month (default), basicWeek, basicDay, agendaWeek and agendaDay. I think the one that most closely approximates your screen shot is agendaWeek. View examples of each type here.

Initial Load Example:

$('#calendar').fullCalendar({
        defaultView: 'agendaWeek',
        defaultDate: '2014-06-12',
        editable: true,
....the rest of your code here

Event Driven Example: To change the view based on some event, such as a button click, call the controls 'changeView' method and pass it the name of the view you'd like to see.

$('#buttonName').click(function () { $('#calendar').fullCalendar('changeView', 'month'); });