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)

<html>
    <head>
        <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>
        

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

    </head>

<body>


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





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



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

</body>
</html>

These are the available views now:

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s