JAVASCRIPTで万年カレンダーを作りたい

締切済

質問者：yck30000
質問日時：2016/02/03 15:53
回答数：4件

いまのところは　カレンダーと祝日も作ってしまいましたが、一ページで1月から12月を表示したいです。先生は　カレンダーをHTMLで返す関数を作って、それを12回実行するようにすると済むといわれました、何ソースを使うが分かりません。
どんなソースを具体的に教えてください。お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： fujillin
回答日時：2016/02/05 18:17

ANo3です。

現在は<table>で作成なさっているようですので、その方向で考えるとして・・・

＞今どこから修正するかわからないです。
先生のおっしゃるように、「ひと月分のHTMLを返す関数」をまず作成してみるのがよろしいかと思います。
現在のものを修正するというよりも、使えるところを取り出して関数を化してみるという感じの方が分かり易いと思います。
次の部分を作成するときも、同様のやり方で、最終的には全体に（似ているけれど）別のものが出来上がるという感じでしょうか。

とは言っても、部分を作成するときにも全体のイメージがなければ、何を作るのかわかりませんね。
まずは全体像を考えることが大切です。そのうえで部分を作成する。

現在のものとは少し違いますが、例えば
　単純に、「ひと月分の7列の表のHTMLを作成する」
ようなものを考えたとします。
ANo3にも書きましたが、それを12回呼び出せば1年分になります。この12回呼び出す部分も関数化しておけば、それは「1年分を計算する関数」になるので、違う年を計算したければそれを呼び出せば良い。
ということになりそうですね。

例があるほうが多少はわかりやすいかと、「ひと月分を単純に返す関数」を作ってみました。
（計算方法は異なるとは思いますが、一つのサンプルとして・・・）
※ インデントを全角空白に置き換えてありますのでご注意。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>sample</title>
</head>
<body>

<div id="contorol"></div>
<div id="calendar"></div>

<script type="text/javascript">
var Calendar = (function(){
　var calendar = {
　　year: 2016,
　　getYear: function(){ return this.year; },
　　setYear: function(yy){ this.year = yy; }
　}

　var monthly = function(mm){
　　var yy = calendar.year;
　　var dayCount = 1 - (new Date(yy, mm-1)).getDay();
　　var dayMax = (new Date(yy, mm, 0)).getDate();

　　var html = "<table class='month'><caption>" + mm + "月</caption>";
　　html += "<thead><tr><td>" + "日月火水木金土".split("").join("</td><td>");
　　html += "</td></tr></thead><tbody>";

　　while(dayCount <= dayMax){
　　　html += "<tr>";
　　　for(var i = 0; i < 7; i++){
　　　　var holiday = isHoliday(yy, dayCount);
　　　　holiday = holiday?(" class='holiday' title='" + holiday + "'"):"";
　　　　html += "<td" + holiday + ">";
　　　　html +=　(dayCount<1 || dayMax<dayCount?"":dayCount) + "</td>";
　　　　dayCount++;
　　　}
　　　html += "</tr>";
　　}
　　return html + "</tbody></table>";
　}

　var isHoliday = function(yy, mm){
　　return false;
　}

//とりあえずの出力制御（1年分）
　var calc = function(yy){
　　calendar.year = yy;
　　for(var i=1; i<=12; i++){
　　　document.querySelector("#calendar").insertAdjacentHTML("beforeend",　monthly(i));
　　}
　}
　return calc;
})();

Calendar(2016);

</script>
</body>
</html>

実行してみると・・・
一応出力されるけれど、見にくいし色もついてないしレイアウトもされてない・・・なんじゃこりゃ～～！？？
でも、よく見てみれば『ひと月分のHTMLを返す関数』（monthlyの部分）としては機能してますよね？

そうは言うけど、計算できたって、こんなのじゃ・・・
試しに、head内に以下を追記してみてください。
<style type="text/css">
table.month { border:1px solid gray; display:inline-block; vertical-align:top; margin:5px; }
table.month td { text-align:center; font-weight: bold; }
table.month td:first-child { color: red; }
table.month td:last-child { color: blue; }
</style>

とりあえずのものですが、少しはそれらしくなったと思います。
機能ごとにスクリプトを関数化しておく方が、あとでその部分を修正したり入れ替えたりするのに便利だろうと考えてのことです。
例えば休日の計算を独立させておくと、そこだけを入れ替えれば日本以外の国でも使えるようになるだろうとか・・・
上のレイアウトの例はスクリプトではなくCSSでの例ですが、見え方を変えるときはこの部分を別のセットに変えれば良い。
といった感じです。（現在のHTML文書の考え方もそうなっています。）

休日の情報や年を指定するためのＵＩなどは、上の例では省いていますし、1年分を計算する部分もテスト用のとりあえずのものです。
あくまでも「ひと月分を計算する」がメインなので・・・
（後を考えて、少し余分なコードがあちこちに入っていますが、気にしないように（笑））

・・・ってな感じで、順次作成してゆくと、機能ごとに作成・テストができるので考えやすいのではなかろうかと思います。

- 0
- 件

通報する

参考程度に

No.3

回答者： fujillin
回答日時：2016/02/04 11:45

こんにちは

現状出来ているものがどのような形式になっているのか不明なので、具体的に書けませんが、先生の「HTMLで返す関数を作って・・・」という言葉から推測すると、現在はひと月分を表示することはできているけれど、それをまとめてHTMLになさってはいないということでしょうか。

例えばひと月分を一つの表（Table要素）で表示するものと仮定します。（他の文書構造でも同様ですが）
現在の計算方法はそのまま使えるものとして、『年月を指定されたら、その月のカレンダー（のHTML）を返す』関数になるように修正します。

function calc_month(yyyy, mm){
var hoge;
　　// ～～計算～～
　return hoge;
}
のような感じで、指定されたyyyy(年）、mm(月）から計算するものです。
返り値(hoge)は,"<table>～～～</table>"のようなHTML文字列でも良いですし、あるいは文書断片（DocumentFragment）でもよいです。
https://developer.mozilla.org/ja/docs/Web/API/Do …

これを月を変えて12回呼び出せば1年分のカレンダーができますよね？
　var mm, yyyy = xxxx;
　for( mm=1; mm<13; mm++){
　　var one_month = calc_month( yyyy, mm);
//　one_monthを表示する
　　//　親要素に追加するとか、直接HTMLに記述するとか、表に組み込むなど
}
年を変えたいときは、これをさらに関数にしておいて、新しいyyyyの値で再実行すればできますよね。

上の例では単に「//表示する」としていますが、ひと月のブロックをどう表示するかも、いろいろ考えられるところです。
HTML上は連続して流し込んでおいてCSSでfloatさせて表示するとか、あるいは、さらに上位の表の中に入れて表示するとかでしょうか？

例えば
http://doremi.s206.xrea.com/tool/cal.php
では、ひと月分を表にしておいて、さらに各月を上位の表の中に入れています。
また年の指定にはインプットボックスが利用されていますが、このあたりの表示方法やＵＩをどのようにするかによっても具体的なスクリプトは変わってきます。
とはいうものの、基本的な考え方は変わらないので、変わるのは表示とＵＩに関わる部分だけとも言えますが。

＞どんなソースを具体的に教えてください
質問が具体的でないので（概念的には具体的なのですが…）、上記のように考えられる形式もいろいろありますし、それを実現する方法もさらにいろいろ考えられます。
それなので、仮に具体例を書いてもほんの一例にすぎないので、抽象的な回答（概念レベルでの回答）になってしまうのです。

- 1
- 件

通報する

この回答へのお礼

返事ありがとうございます。確かに色々方法ありますが、今どこから修正するかわからないです。ソースは長すぎで、ここで貼れないです。今までのソースはこれです。お願いします。m(_ _)m
https://teratail.com/questions/25945

通報する

お礼日時：2016/02/04 17:03

No.2

回答者： yambejp
回答日時：2016/02/04 11:26

＞一ページで1月から12月を表示することです

たとえば、カレンダーを取得する関数を
view_calendar(y,m)
という仕様にして
view_calendar(2016,1)
とすれば2016年の1月を取得するようにすれば
1から12まで入れれば12カ月分の表示されますよね？

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2016/02/04 10:03

仕様をきめるとこから始めてください

・テーブルを使う
・よこ７列を曜日とし、日曜からはじめる
・ヘッダに曜日を漢字で記載する
・たては4～6行可変？
・１日より前、月末日よりあとは空白とするorグレーでかく

が基本型、あわせて

・日曜は赤、土曜は青とし、地の色or字の色をかえる
・祝日は別途関数で用意し、該当日は色をかえる
・テーブルの罫線をひく
・年と月はキャプションで記載

など決め込んで、それに併せて処理をかいてください