Switching fullCalendar views

This is the javascript to add buttons for the month, week and daily views:

JavaScript (fc-more-views.js)

$(document).ready(function() {
    var $calendar = $("#calendar").fullCalendar(
            {  // Start of options
                header: {
                    left:   'title',
                    center: '',
                    right:  'today,month,agendaDay,agendaWeek prev,next'
                }  // End of options

HTML (fc-more-views.html)

        <title>Using fullCalendar</title>
        	<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
        <script src='fullcalendar/lib/jquery.min.js'></script>
        <script src='fullcalendar/lib/moment.min.js'></script>
        <script src='fullcalendar/fullcalendar.js'></script>

        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        .centered {
            text-align: center;



<h1 class="centered">Different views of fullCalendar</h1>

<div id="calendar"></div>

<script src="fc-more-views.js"></script>


These are the available views now:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s