![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
No.4ベストアンサー
- 回答日時:
こんな感じでしょうか?
独学なのでお粗末かも知れませんが、参考になれば幸いです。
<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
- 回答日時:
他のサイトになりますがこちらはどうでしょうか。
私はココを参考にしました。毎年の休日も計算してくれるので便利です。
仮に、これで特定の1日が『毎月15日』であり、太字にする場合の加工方法です。
『// 日付の書き込み』以降の以下の行の後に、1行追加します。(59行目付近)
> if(thisday == i) cldr += "<td bgcolor='#00ff00'>"; // 今日の背景色を緑にする
> else cldr += "<td>";
if(i == 15) cldr += "<b>";
(↑この1行を追加)
厳密にはこれだけでは不足なのですが、表示上はこれで可能です。
太字ではなく、背景色を変えたいという場合は「今日の背景色」と重なった場合の調整が必要となり、文字色を変えたいとなると土日祝祭日と重なった場合の調整が必要となってきます。
gamera190さんの必要としているカレンダーの条件はどのようなものでしょう
・表示は1ヶ月だけで良いのか、2ヶ月以上必要なのか?
・特定の1日は毎年なのか、毎月なのか、毎週なのか?
・特定の1日は年,月毎に変動するのか?
・休日などに重なった際に振替があるのか?
・表示方法の指定は?
条件によって、加工箇所も増えていってしまいます。
個人間のやりとりを禁止しているこういった質問サイトでは、javascriptソース丸々の話になってくると向いてないかもしれません。
この回答への補足
上の所に行ってきました。
何とか自分でいじってみようとしましたが
だめでした。
とりあえず必要なのは
金曜と日曜日の日付文字を青にして水曜日が赤
ここは何とかできました。祝日の赤はそのままで
特定の日は文字の色を変更したいです。
優先順位は特定の日>金と日と水>祝日の文字色に
したいです。
表示はできれば2ヶ月がよいです。
欲を出せば縦じゃなくて横。
囲みをなくしてサイズと文字の大きさを変更できれば
理想の形に仕上がります。
よろしくお願いします。
No.2
- 回答日時:
私は、カレンダー表示するjavascriptを加工し、特定日を別の色に変更して表示するようにしています。
プログラムの知識があれば加工は容易だと思うのですが、そうでないと難しいですよね。
個人のサイトへ誘導することは規約で禁止されているので直接提供できないのが残念です。
さて、javascriptでカレンダーを表示させる場合ですが1日ごとに条件判断をして表示方法を決めていると思います。
【1日】
「この日は日曜日か?」
「この日は土曜日か?」
「この日は祝祭日か?」
「この日は今日か?」
これらの条件に合っていれば、それぞれに合わせて文字色や背景色を変えて表示させます。
以後
【2日】
【3日】
↓
【晦日】
と続けた結果、1ヶ月のカレンダーとなります。
最初に書いた4つの条件、これに更にgamera190さんのいう
「この日は[特定の1日]か?」
という条件を加えて、文字色や背景色を指定する事になります。
基本としたいjavascript素材の提供サイトなどお教え頂ければ、加工のポイントなどお教えできるかもしれません。(私でなくとも)
この回答への補足
http://www.ne.jp/asahi/qpon/b/java/java40.htm
今回はこのカレンダーをつかわさせていただいてます。javascriptについてはまったくわかりません。
上記のページのカレンダーみたいな感じで
使いやすそうで加工できそうなのがあったら
教えてください。よろしくお願いします。
No.1
- 回答日時:
CGIを使ったものだと、毎週火曜日とか、第1,第3木曜日とか、指定できるものもありますが、難しいですかね。
参考URL:http://www3.biwako.ne.jp/~nobuaki/webcal/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルでカレンダーを作りたい 5 2023/05/16 07:32
- その他(クラウドサービス・オンラインストレージ) Googleカレンダーの予定の色を変えたい、文字色を変えたい。 1 2022/10/18 21:43
- カップル・彼氏・彼女 男性に質問です。 5日ほど前に2年半付き合っている彼氏と初めてレベルの喧嘩をし、その翌日から距離を置 3 2022/07/23 09:39
- フィナンシャルプランナー(FP) 本日の日付が(F1)出たら、本日の勤務が(F2)同時に出るようにしたいのです。 1 2022/09/12 11:53
- HTML・CSS アドバイスを下さい。 1 2022/10/08 01:18
- Excel(エクセル) エクセルの条件付き書式について エクセルでカレンダーを作りました。縦に日付が並んでいて、横にスケジュ 3 2022/10/10 15:32
- Excel(エクセル) DATE関数で指定する「日」のセルが関数の場合の対処法 5 2022/09/14 15:46
- Access(アクセス) Access DTPickerの初期表示月を変えたい 1 2022/08/02 08:55
- 正社員 会社カレンダーの信憑性&夜勤について 3 2022/12/03 23:17
- Visual Basic(VBA) excel2016でリストからカレンダーに内容を反映させたいです 2 2022/10/27 15:32
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLでテーブルを縦に並べたい!
-
table内で画像と文字をセンター...
-
表の中に表
-
テーブルにスクロールバーを付...
-
perlについて質問があります。
-
同じ<table align="center">を...
-
複数集計をしたい
-
スタイルシートを組むと、テー...
-
htmlの記述で、カーソルを...
-
cssのfont-sizeがFirefoxで効か...
-
ブログのHTMLからtrackback:pin...
-
CSSのtransform: translate(-50...
-
Excel で等間隔で縦線を引きた...
-
htmlでテーブル内にテキストボ...
-
ホームページビルダーで表の列...
-
指定時間になったら、WEBサイト...
-
テキストボックスの様に文字の...
-
エクセルでサイズに合ったもの...
-
aタグに直接style=""で:hoverを...
-
表を作るときに枠線を
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
HTMLでテーブルを縦に並べたい!
-
Excelで可視部分だけをWeb形式...
-
表の中に表
-
テーブルで3セル作った行の下に...
-
<td> 内のテーブルを上寄せにす...
-
プリントアウト時、ページ内容...
-
テーブルとテーブルの間に、隙...
-
CSS line-height が効かない
-
表の中でのフォーム
-
dreamweaverで、テーブルのボー...
-
テーブルにスクロールバーを付...
-
テーブルの中のグラデーション...
-
Jimdoで表組のなかの画像をポッ...
-
スタイルシートで<table>の内側...
-
<緊急>テーブルを使わないで...
-
ページ上部にスペースが空いて...
-
スタイルシートがMACで有効にな...
-
ドリームウェーバー(ウィーバ...
-
Dreamweaverでソースが横一列に...
おすすめ情報