カレンダーの作成について

Question

phpかjavascriptを使ってカレンダーの作成をしようと思っています。
「調整さん」のようなカレンダーを作りたく質問させていただきました。
カレンダーの日にちをクリックしたらテキストとして、出力されるようなカレンダーです。

どこか参考になるサイトはありますでしょうか？

また、どのように書くのか教えていただきたいです。
抽象的な質問だとはわかっていますが、
どのように書いたらよいのか検討もつかないので、ご存知の方いらっしゃいましたら、ご教授願います。

現在、考えているのはjavascriptで
関数を作り、クリックされたらテキストに書き込まれるといった形をイメージしています。
しかし、次の月などの表記の仕方がわかりません。

Answer 1

一度に大量のことを実現しようと詰め込みすぎです。順番に下から固めていきましょう。まずはカレンダーの生成アルゴリズムを理解しましょう。以下はPHPでの例ですが、JavaScriptでもほとんど同じように書けるはずです。

・最もシンプルなカレンダー生成ロジック

その他参考になるページがこちらです。

・JavascriptのDateオブジェクトの月(month)に注意
・【覚書】JavaScriptでDateオブジェクトを使って一ヶ月の日数を得る
・Create a JavaScript array containing 1…N
・Split array into chunks

Array.prototype.chunk = function(size) {
    var array = this;
    return [].concat.apply([], array.map(function(e, i) {
        return i % size ? [] : [array.slice(i, i + size)];
    }));
}
function range(min, max) {
    return Array(max - min + 1).join().split(',').map(function(e, i) {
        return min + i;
    });
}
function calendar(date) {
    var dt     = new Date(date.getYear(), date.getMonth(), 1);
    var max    = new Date(dt.getYear(), dt.getMonth() + 1, 0).getDate();
    var before = dt.getDay();
    var after  = (7 - (before + max) % 7) % 7;
    return range(1 - before, max + after)
           .map(function (e) { return e < 1 || e > max ? '' : e; })
           .chunk(7);
}
var now = new Date;
var cal_now = calendar(now);

次の月を表示するのであれば、単純に渡すDateオブジェクトに1ヵ月加算すればいいだけです。

var next = new Date(now.getYear(), now.getMonth() + 1, now.getDate());
var cal_next = calendar(next);

実際に表示してクリックしたときに反応させるにはイベントハンドラを使います。月の移動に関しては、クリックする要素自体は固定されるので、 .click() を使えばいいと思います。

・.click()

各日にちに関しては、セルに共通のクラスを割り振っておいて、それに対してイベントハンドラを張ればいいと思います。動的に追加した要素に対しては.click()は使えないので、.on()を使う必要があります。

・.on()

実際に情報をサーバ側に保存するには、$.ajax()を使ってPHP(もしくはnode.js/Python/Rubyなど)のスクリプトにデータを送信する必要があります。

・$.ajax()
・JavaScript(jQuery)からPHPのAPIを利用する

Answer 2

jQueryUIを使うと楽そうです。
Datepicker