ホームページのカレンダー

質問

お店のページに特定の日の色が変えられるカレンダーをのせたいのです。何も書き込めなくていいのです。
JavaScriptのカレンダーをいろいろ捜して見ました。
コピペをするだけで
休日の色、曜日別に色分け、当日の色が変えられて
便利なのですが、
特定の１日だけを変えることのできる
カレンダーはないのでしょうか？
今のままでは休みの日だけ別に書いてカレンダーは
普段どおりというカッコが悪い状態なので困ってます。
よろしくお願いします。

回答No.4

hirumin · ベストアンサー

こんな感じでしょうか？
独学なのでお粗末かも知れませんが、参考になれば幸いです。

<SCRIPT language="JavaScript">
<!--
// 表示月数(x)
x=2;
//
cldr = "";
day = new Date();
thisday = day.getDate();
day.setDate(1);
month = day.getMonth() + 1;
year = day.getYear();
if(year < 2000) year += 1900;
numdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if((year%4 == 0) && (year%100 != 0) || (year%400 == 0)) numdays[1] = 29;
for(j = 0; j < x; j++){
date = new Date();
date.setDate(1)
thisMonth = date.getMonth() + 1 + j;
date.setMonth(thisMonth - 1);
if(thisMonth > 12){
if(thisMonth % 12 == 1){
year++;
}
}
thisMonth = date.getMonth() + 1;
date.setDate(1);
firstDay = date.getDay();
if(thisMonth == 1){holiday1 = 1; holiday2 = 14-(firstDay+5)%7; holiday3 = -1}
else if(thisMonth == 2){holiday1 = 11; holiday2 = -1; holiday3 = -1}
else if(thisMonth == 3){
ed = 20.8431 + 0.242194 * (year - 1980) - Math.floor((year - 1980)/4);
holiday1 = Math.floor(ed);
holiday2 = -1;
holiday3 = -1;
}
else if(thisMonth == 4){holiday1 = 29; holiday2 = -1; holiday3 = -1}
else if(thisMonth == 5){holiday1 = 3; holiday2 = 4; holiday3 = 5}
else if(thisMonth == 6){holiday1 = -1; holiday2 = -1; holiday3 = -1}
else if(thisMonth == 7){holiday1 = 21-(firstDay+5)%7; holiday2 = -1;holiday3 = -1}
else if(thisMonth == 8){holiday1 = -1; holiday2 = -1; holiday3 = -1}
else if(thisMonth == 9){
holiday1 = 21-(firstDay+5)%7;
ed = 23.2488 + 0.242194 * (year - 1980) - Math.floor((year - 1980)/4);
holiday2 = Math.floor(ed);
holiday3 = -1
}
else if(thisMonth == 10){holiday1 = 14-(firstDay+5)%7;; holiday2 = -1; holiday3 = -1}
else if(thisMonth == 11){holiday1 = 3; holiday2 = 23; holiday3 = -1}
else if(thisMonth == 12){holiday1 = 23; holiday2 = -1; holiday3 = -1}
// 特別な日
// 1月から12月まで個別設定。
// event1，event2（予備）に日を記入。無ければ「-1」
if(thisMonth == 1) {event1 = -1; event2 = -1;}
else if(thisMonth == 2) {event1 = -1; event2 = -1;}
else if(thisMonth == 3) {event1 = -1; event2 = -1;}
else if(thisMonth == 4) {event1 = 15; event2 = -1;}
else if(thisMonth == 5) {event1 = 15; event2 = -1;}
else if(thisMonth == 6) {event1 = -1; event2 = -1;}
else if(thisMonth == 7) {event1 = -1; event2 = -1;}
else if(thisMonth == 8) {event1 = -1; event2 = -1;}
else if(thisMonth == 9) {event1 = -1; event2 = -1;}
else if(thisMonth == 10){event1 = -1; event2 = -1;}
else if(thisMonth == 11){event1 = -1; event2 = -1;}
else if(thisMonth == 12){event1 = -1; event2 = -1;}
//
// 文字サイズ
ymsize = 20;
dysize = 16;
//
// 色
color0 = "#cccc00"; // 今日の背景
color1 = "#00ff00"; // 特別な日
color2 = "#0000ff"; // 日曜，金曜
color3 = "#ff0000"; // 水曜，祝祭日
//
wd = Math.round( dysize * 1.4);
cldr += "<table border='0' style='float : left;'><tbody><tr><td>"
cldr += "<table border='0' style='font-weight : bold; font-size : "+ dysize +"px;' bgcolor='#ffffff'>"; // カレンダーTable内の書式
cldr += "<tr bgcolor='#000000' align=center><th colspan=7><font color='#ffffff' style='font-size : "+ ymsize +"px;'>"+year+"年"+thisMonth+"月</font></th></tr>"; // 年月セルの書式
cldr += "<tr align=center><td width='"+ wd +"'><font color='"+ color2 +"'>日</font></td><td width='"+ wd +"'>月</td><td width='"+ wd +"'>火</td><td width='"+ wd +"'><font color='"+ color3 +"'>水</font></td><td width='"+ wd +"'>木</td><td width='"+ wd +"'><font color='"+ color2 +"'>金</font></td><td width='"+ wd +"'>土</td></tr>";
for(sunday = 1-date.getDay(); sunday <= 36; sunday +=7){
cldr += "<tr align=center>";
for(i = sunday; i < sunday + 7; i++){

if((i > 0) && (i <= numdays[thisMonth-1])){
date.setDate(i);
today = date.getDay();
if((thisday == i)&&(month == thisMonth)){
cldr += "<td bgcolor='"+ color0 +"'>"
}else{
cldr += "<td>";
}
if((i == event1)||(i == event2)){
cldr += "<font color='"+ color1 +"'>"+ i +"</font>"; // 特別な日の書式
}else if((today == 0)||(today ==5)) {
cldr += "<font color='"+ color2 +"'>"+ i +"</font>"; // 日曜，金曜の書式
}else if((today == 3)||(i == holiday1)||(i == holiday2)||(i == holiday3)||((today == 1)&&((i-1 == holiday1)||(i-1 == holiday2)||(i-1 == holiday3)))){
cldr += "<font color='"+ color3 +"'>"+ i +"</font>"; // 水曜，祝祭日の書式
}else{
cldr += i; // その他の日の書式
}
cldr += "</td>";
}else{
cldr += "<td>　</td>";
}
}
cldr += "</tr>";
}
cldr += "</table>";
cldr += "</td></tr></tbody></table>"
}
document.write(cldr);
-->
</SCRIPT>

お礼

ありがとうございます。
大きさは文字を大きくすればいいのですよね。
完璧です。嬉しいです。
本当にありがとうございました。

回答No.3

hirumin

http://www004.upp.so-net.ne.jp/sekiuchi/js/contents/hcldr3.html
他のサイトになりますがこちらはどうでしょうか。
私はココを参考にしました。毎年の休日も計算してくれるので便利です。
仮に、これで特定の１日が『毎月15日』であり、太字にする場合の加工方法です。

『// 日付の書き込み』以降の以下の行の後に、１行追加します。（59行目付近）

> if(thisday == i) cldr += "<td bgcolor='#00ff00'>"; // 今日の背景色を緑にする
> else cldr += "<td>";

if(i == 15) cldr += "<b>";
（↑この１行を追加）

厳密にはこれだけでは不足なのですが、表示上はこれで可能です。
太字ではなく、背景色を変えたいという場合は「今日の背景色」と重なった場合の調整が必要となり、文字色を変えたいとなると土日祝祭日と重なった場合の調整が必要となってきます。

gamera190さんの必要としているカレンダーの条件はどのようなものでしょう
・表示は１ヶ月だけで良いのか、２ヶ月以上必要なのか？
・特定の１日は毎年なのか、毎月なのか、毎週なのか？
・特定の１日は年，月毎に変動するのか？
・休日などに重なった際に振替があるのか？
・表示方法の指定は？

条件によって、加工箇所も増えていってしまいます。
個人間のやりとりを禁止しているこういった質問サイトでは、javascriptソース丸々の話になってくると向いてないかもしれません。

補足

上の所に行ってきました。
何とか自分でいじってみようとしましたが
だめでした。
とりあえず必要なのは
金曜と日曜日の日付文字を青にして水曜日が赤
ここは何とかできました。祝日の赤はそのままで
特定の日は文字の色を変更したいです。
優先順位は特定の日＞金と日と水＞祝日の文字色に
したいです。
表示はできれば２ヶ月がよいです。
欲を出せば縦じゃなくて横。
囲みをなくしてサイズと文字の大きさを変更できれば
理想の形に仕上がります。
よろしくお願いします。

回答No.2

hirumin

私は、カレンダー表示するjavascriptを加工し、特定日を別の色に変更して表示するようにしています。
プログラムの知識があれば加工は容易だと思うのですが、そうでないと難しいですよね。
個人のサイトへ誘導することは規約で禁止されているので直接提供できないのが残念です。

さて、javascriptでカレンダーを表示させる場合ですが１日ごとに条件判断をして表示方法を決めていると思います。
【１日】
「この日は日曜日か？」
「この日は土曜日か？」
「この日は祝祭日か？」
「この日は今日か？」
これらの条件に合っていれば、それぞれに合わせて文字色や背景色を変えて表示させます。
以後
【２日】
【３日】
　　↓
【晦日】
と続けた結果、１ヶ月のカレンダーとなります。

最初に書いた４つの条件、これに更にgamera190さんのいう
「この日は［特定の１日］か？」
という条件を加えて、文字色や背景色を指定する事になります。

基本としたいjavascript素材の提供サイトなどお教え頂ければ、加工のポイントなどお教えできるかもしれません。（私でなくとも）

補足

http://www.ne.jp/asahi/qpon/b/java/java40.htm
今回はこのカレンダーをつかわさせていただいてます。javascriptについてはまったくわかりません。
上記のページのカレンダーみたいな感じで
使いやすそうで加工できそうなのがあったら
教えてください。よろしくお願いします。

回答No.1

Peater

ＣＧＩを使ったものだと、毎週火曜日とか、第１，第３木曜日とか、指定できるものもありますが、難しいですかね。

参考URL：

http://www3.biwako.ne.jp/~nobuaki/webcal/

お礼

ご回答ありがとうございます。
ページを見てきました。
すこし、理想と違ってました。