Bootstrapを使ったカレンダーを実装「Zabuto Calendar」

当ページのリンクには広告が含まれています。

jQuery Plugin » テーブル » Bootstrapを使ったカレンダーを実装「Zabuto Calendar」

Bootstrapを使ったカレンダーを実装するプラグイン「Zabuto Calendar」を紹介します。

jQueryプラグイン「Zabuto Calendar」

このプラグインでは、大人気のCSSフレームワーク「Twitter Bootstrap」を使ったカレンダーを実装することができます。

JSON形式のデータを使って、カレンダー上にスケジュールを追加することができます。追加したスケジュールはカレンダー上で色が変わり、クリックすると内容をポップアップすることもできます。便利！

デモでカレンダーの外観を確認してみてください。青色は本日、オレンジはJSONデータによるスケジュールです。スケジュールをクリックしてみてください。なかなかカッコイイですよー。

「Zabuto Calendar」のデモ

デモのソース（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>

Zabuto Calendar

jQueryプラグイン「Zabuto Calendar」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）