イベントを表示するカレンダーを実装「kalendar」

イベントを表示するカレンダーを実装するプラグイン「kalendar」を紹介します。

jQueryプラグイン「kalendar」

このプラグインを使えば、手動で指定したイベントに加えて、Googleカレンダーのイベントも合わせて表示できるカレンダーを実装することができます。

オプションでは、イベント・カラー・曜日始まり……などさまざまな項目を設定することができます。

スポンサーリンク

それではデモページのカレンダーをご覧ください。

「kalendar」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="kalendar のデモでーす。">
<title>kalendar - jQuery Plugin Demo</title>
<link href="kalendar.css" rel="stylesheet">
<style>
.kalendar {
  width: 600px;
}
</style>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/kalendar/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>kalendar のデモ。</h1>

<div class="kalendar"></div>

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="kalendar.js"></script>
<script>
$(document).ready(function() {
  $('.kalendar').kalendar({ 
    events: [
      {
        title:"タイトル",
        start: {
          date: 20150315,
          time: "12.00"
        },
        end: {
          date: "20150316",
          time: "14.00"
        },
        location: "Japan",
        color: "yellow"
      },
    ],
    eventcolors: {
      yellow: {
        background: "#FC0",
        text: "#000",
        link: "#000"
      }
    },
    color: "blue",
    firstDayOfWeek: "Sunday"
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事と広告