fullCalendar basic display

This sample has just enough code to have a working fullCalendar instance.

JavaScript (fcbasic.js)


$(document).ready(function() {
    var $calendar = $("#calendar").fullCalendar();
};

HTML page (fcbasic.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">A basic instance of fullCalendar</h1>

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

<script src="fcbasic.js"></script>

</body>
</html>

This gives us a month view calendar with simple navigation and plain appearance:

fcbasic

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