Qitailang's HP > webtech

イベント カレンダー

2014/08/31

1. jQueryプラグインによるイベントカレンダー。

色付きの日付のところのマウスオーバーでイベント内容がポップアップで表示される。指定したurlへのリンクもできる。2D風にし枠を取るなどデザインを少しイジった。

sample1

<link rel="stylesheet" type="text/css" href="example.css">
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.calendar.js"></script>
<script>
$(function($) {
  // year: 2014,
  // month: 8,
  //年月を指定することもできる      
  $('#calendar').calendar({
    events: {
      '2014-8-5': {title: '今日はお休み'},
      '2014-8-15': {title: 'Googleで検索する日',url: 'http://google.co.jp/'}
    }
  });
});
</script>
<div id="calendar"></div> <!--ここにカレンダーが表示される-->

作者サイト
http://rewish.jp/blog/releases/jquery_calendar

2. JavaScriptによるショップ向けイベントカレンダー

上のカレンダー機能に加え、毎年の祝祭日、定休日などを一括して登録できる。イベントは別ボックスで一覧できる。ただしJavaScriptファイルを直接加工するので、設定方法が難しい。幅を狭くするなど少しイジった。

sample2

...
<link rel="stylesheet" href="cal.css" type="text/css">
</head>
<body>
  <div id="cal0" class="cal_wrapper">
  <!-- ここにカレンダーが表示される -->
  </div>
  <div class="schedule_wrapper">
    <h3>予定表</h3>
    <div id="schedule0" class="schedule_list">
    <!-- ここにイベント一欄が表示される  -->
    </div>
  </div>
  <script type="text/javascript" charset="UTF-8" src="cal.js"></script>
</body>
</html>

cal.js でよく解らないところが多いのだが、とりあえず、初期設定のままでは過去のイベントが表示されないので、下のように書き換えた。

66行目あたり
[-] calObj[0].backward = 'backward';
[+] calObj[0].backward = 'null';

前月と翌月( < prev - next > ) の間の "-" のリンクが何を意味しているのか解らないので取り除いた。

148行目あたりをコメントアウト
/* calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />"; */

作者サイト
http://www.synck.com/contents/download/javascript/cal2.1.html


Ida Qitailang