最後更新: 2016-02-03

Download

• http://fullcalendar.io/

Usage

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

..........

<div id='calendar'></div>

..........

<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
        })
    });
</script>

Options

$('#calendar').fullCalendar({
    weekends: false // will hide Saturdays and Sundays
});

Callbacks:

$('#calendar').fullCalendar({
    dayClick: function() {
        alert('a day has been clicked!');
    }
});

Methods:

$('#calendar').fullCalendar('next');

bootstrap-fullcalendar.css

Setting

firstDay: 0

# width-to-height

aspectRatio: 1.35

# calculated by aspectRatio

height: auto

header:

{
    left:   'title',
    center: '',
    right:  'today prev,next'
}

theme: true

# jQuery UI theming

titleFormat

'MMM D YYYY'  // like 'Sep 13 2009', for week views

eventMouseover: function(event, jsEvent, view) {
    if (view.name !== 'agendaDay') {
        $(jsEvent.target).attr('title', event.title);
    }
},

events (as a json feed)

This happens when the user clicks prev/next or changes views.

ISO8601 date strings (like 2013-12-01)

Event Source Object

Array of events(feed):

{
    events: [
        {
            title: 'Event1',
            start: '2011-04-04'
        },
        {
            title: 'Event2',
            start: '2011-05-05'
        }
        // etc...
    ],
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

JSON feed:

{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

JSON feed:

* GET

$('#calendar').fullCalendar({
    events: '/myfeed.php'
});

POST:

/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381

-------------------

jQuery $.ajax options

$('#calendar').fullCalendar({
    events: {
        url: '/myfeed.php',
        type: 'POST',
        data: {
            custom_param1: 'something',
            custom_param2: 'somethingelse'
        },
        error: function() {
            alert('there was an error while fetching events!');
        },
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    }
});

-------------------
Event Object

id
title

backgroundColor

# event 個框框
borderColor

textColor

#f00, #ff0000, rgb(255,0,0), or red

url

A URL that will be visited when this event is clicked by the user.

-------------------

Options
            
Caching

By default, FullCalendar will insert a _ parameter into the URL of the request to prevent the browser from caching the response.

$('#calendar').fullCalendar({
    events: {
        url: '/myfeed.php',
        cache: true
    }
});
 

qtip

http://qtip2.com

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2010-01-01',
            description: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.qtip({
            content: event.description
        });
    }
});