Full Calendar

Full Calendar plugin using google calendars holiday calendar.

by Rob McDonald

HTML

<script src="http://arshaw.com/js/fullcalendar-1.6.3/fullcalendar/fullcalendar.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.6.3/fullcalendar/gcal.js"></script>
<h1>Full Calendar</h1>


<h2 class="info">You can pull in Google calendars and add your own styles and colors. Get it <a href="http://arshaw.com/fullcalendar/">here</a>.</h2>

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

CSS

h2 a {
    text-decoration:none;
    color:steelblue;
}
h2.info {
    font-weight:100;
    font-size:20px;
}
/*!
 * FullCalendar v1.6.3 Stylesheet
 * Docs & License: http://arshaw.com/fullcalendar/
 * (c) 2013 Adam Shaw
 */
 .fc {
    direction: ltr;
    text-align: left;
}
.fc table {
    border-collapse: collapse;
    border-spacing: 0;
}
html .fc, .fc table {
    font-size: 1em;
}
.fc td, .fc th {
    padding: 0;
    vertical-align: top;
}
/* Header
------------------------------------------------------------------------*/
 .fc-header td {
    white-space: nowrap;
}
.fc-header-left {
    width: 25%;
    text-align: left;
}
.fc-header-center {
    text-align: center;
}
.fc-header-right {
    width: 25%;
    text-align: right;
}
.fc-header-title {
    display: inline-block;
    vertical-align: top;
}
.fc-header-title h2 {
    margin-top: 0;
    white-space: nowrap;
}
.fc .fc-header-space {
    padding-left: 10px;
}
.fc-header .fc-button {
    margin-bottom: 1em;
    vertical-align: top;
}
/* buttons edges butting together */
 .fc-header .fc-button {
    margin-right: -1px;
}
.fc-header .fc-corner-right,
/* non-theme */
 .fc-header .ui-corner-right {
    /* theme */
    margin-right: 0;
    /* back to normal */
}
/* button layering (for border precedence) */
 .fc-header .fc-state-hover, .fc-header .ui-state-hover {
    z-index: 2;
}
.fc-header .fc-state-down {
    z-index: 3;
}
.fc-header .fc-state-active, .fc-header .ui-state-active {
    z-index: 4;
}
/* Content
------------------------------------------------------------------------*/
 .fc-content {
    clear: both;
    zoom: 1;
    /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
}
.fc-view {
    width: 100%;
    overflow: hidden;
}
/* Cell Styles
------------------------------------------------------------------------*/
 .fc-widget-header,
/* <th>, usually */
 .fc-widget-content {
    /* <td>, usually */
    border: 1px solid #ddd;
}
.fc-state-highlight {
    /* <td> today cell */
    /*...

JavaScript

$(document).ready(function () {
    $('#calendar').fullCalendar({
        events: 'http://www.google.com/calendar/feeds/en.usa%23holiday%40group.v.calendar.google.com/public/basic',
        header: {
            left: 'title',
            center: 'month, basicWeek, basicDay',
            right: 'today, prev, next'
        }
    });
});