今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」

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>
スポンサーリンク

関連記事(一部広告含む)