Bootstrapを使ったカレンダーを実装「Zabuto Calendar」
当ページのリンクには広告が含まれています。
スポンサーリンク
Bootstrapを使ったカレンダーを実装するプラグイン「Zabuto Calendar」を紹介します。
jQueryプラグイン「Zabuto Calendar」
このプラグインでは、大人気のCSSフレームワーク「Twitter Bootstrap」を使ったカレンダーを実装することができます。
JSON形式のデータを使って、カレンダー上にスケジュールを追加することができます。追加したスケジュールはカレンダー上で色が変わり、クリックすると内容をポップアップすることもできます。便利！
スポンサーリンク
デモでカレンダーの外観を確認してみてください。青色は本日、オレンジはJSONデータによるスケジュールです。スケジュールをクリックしてみてください。なかなかカッコイイですよー。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Zabuto Calendar - jQueryまとめのカルマ</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="zabuto_calendar.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="zabuto_calendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
cell_border: true,
today: true,
weekstartson: 0,
ajax: {
url: "schedule.json",
modal: true
}
});
});
</script>
</head>
<body>
<div class="container">
<h1>Zabuto Calendarのデモでーす。</h1>
<div class="row">
<div id="my-calendar"></div>
</div>
</div>
</body>
</html>
スポンサーリンク