- ベストアンサー
javascriptでカレンダーを作る方法
- javascriptを使用してカレンダーを作成する方法について
- 指定のHTML要素内にカレンダーを表示するためのjavascriptの書き方
- 日曜日から始まるカレンダーの作成方法とセルに数字を表示する方法
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
やり方はいろいろありますが、一例です。 <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var youbi = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]; var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<6;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); if (i == 0) { var txt=youbi[j]; } else { var txt=(i-1)*7+j-2; if (txt < 1 || txt > 30) { txt = ""; } } td.appendChild(document.createTextNode(txt)); if (j == 0) { td.style.color='red'; } tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
その他の回答 (1)
- hwoa1024
- ベストアンサー率36% (122/336)
>>数字と文字だけ赤くするにはどうすればいいと思いますか? 回答に示した下記の部分になります。 td.style.color='red'; 何番目の列を赤にするかは if (j == 0) {} で指定しています。土曜を青にするなら if (j == 6) { td.style.color='blue'; } になります。 >>マスを全て同じ大きさにするにはどうすればいいと思いますか? 幅はwidthになり、widthも上記と同様にstyleに属しますので td.style.width='150'; (この場合は幅150pxということです) で指定してやればいいです。 ただし、幅より文字列の方が長いと広がってしまうため 広がらない幅で設定してください。
お礼
追加で答えていただきありがとうございました。 本当に助かりました。
お礼
お答えしていただきありがとうございます。 質問するのは初めてなのでしっかり伝わっているか心配でしたが安心しました。ただ、私の説明不足で聞き忘れていましたが、 ・数字と文字だけ赤くするにはどうすればいいと思いますか? ・マスを全て同じ大きさにするにはどうすればいいと思いますか? 出来ればこの2つもお答えして頂ければ嬉しいです。 本当にありがとうございました。