skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」

｜ ｜ ｜ ｜ ｜ ｜ ｜

JavaScriptライブラリの「jQuery」を使用してカレンダーを作ります。
via：FullCalendar - Full-sized Calendar jQuery Plugin

使用方法
FullCalendar - Full-sized Calendar jQuery Pluginからファイル一式をダウンロードします。
<link rel="stylesheet" href="fullcalendar.css" media="all">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core2.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="fullcalendar.js"></script>
<script>
$(document).ready(function() {
$('#id名').fullCalendar();
});
</script>

あとはid名を表示させたい場所に記述すれば完成です。
また、イベントは以下のように書きこむことで表示されます。
events: [
{
id: 1, //イベントID
title: "skuare.net", //タイトル
start: "2009-09-05", //始まり
end: "2009-09-10" //終わり（省略可）
url: "http://www.skuare.net" //リンク先
}

JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」サンプル

記事作成：2009年09月23日

前の記事：friendfeedのストリームを表示するJavaScript「FriendFeed JSONP Widget」
次の記事：これはスゴイ！JavaScriptで画像をうにゃうにゃさせる「Liquid Image FX」