JavaScriptでカレンダーを作る

勉強記録を付けるために、JavaScriptでカレンダーを作る方法を調べました。

やりたいことは、、

  • ページを開いたらカレンダーが表示されること
  • カレンダーの日付をタッチすると「英語」、「プログラム」等その日の活動が記録できること

です。

FullCalendarを使う

カレンダー表示方法はいくつかありますが、FullCalendarを選びました「FullCalendar - Full-sized Calendar jQuery Plugin」。

 

公式ページからライブラリをダウンロードして、htmlから参照すれば使えます。

使い方は「jQuery カレンダープラグイン FullCalendar を使用してスケジュール表を作成する ~その1~ | 打ち聞かせ」や、「Rossyの開発日記: jQueryのFullCalendarが素敵」を参照して、簡単に作れました。

作成したカレンダーはこちらにまとめています(カレンダー部分はindex.htmlを参照)。

完成イメージはこんな感じ

f:id:saj_kz:20140129000457p:plain

 

 

この後紹介する、input要素、DatePickerでも簡単にカレンダー形式の表示、入力が行えるのですが、複数の日付を選択し、選択した際に「英語」、「プログラム」等のタグを付けることは難しい(行えない?)ようだったので、今回はFullCalendarを使いました。

 

input要素を使う 

日付を1つ選んで入力するような場合、input要素のtype=date を指定する方法はとても簡単です。

 <input type="date" name="example" value="2012-02-16">

こんだけ。かんな感じになります。

    

 input要素を選択するとカレンダーが表示されて日付の選択が行えます。

 

DatePickerを使う

JavaScriptのDatePickerを使うことでもカレンダー表示はできます。 

Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO を見た感じではいろいろな表示形式が実現できそうです。

複数の月のカレンダーを表示した場合のイメージ図:

f:id:saj_kz:20140129003957p:plain

 

用途毎に使い分けるのが良いかと思います。