• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:javascriptでカレンダーを作る方法)

javascriptでカレンダーを作る方法

このQ&Aのポイント
  • javascriptを使用してカレンダーを作成する方法について
  • 指定のHTML要素内にカレンダーを表示するためのjavascriptの書き方
  • 日曜日から始まるカレンダーの作成方法とセルに数字を表示する方法

質問者が選んだベストアンサー

  • ベストアンサー
  • hwoa1024
  • ベストアンサー率36% (122/336)
回答No.1

やり方はいろいろありますが、一例です。 <!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>

poidakepoi
質問者

お礼

お答えしていただきありがとうございます。 質問するのは初めてなのでしっかり伝わっているか心配でしたが安心しました。ただ、私の説明不足で聞き忘れていましたが、 ・数字と文字だけ赤くするにはどうすればいいと思いますか? ・マスを全て同じ大きさにするにはどうすればいいと思いますか? 出来ればこの2つもお答えして頂ければ嬉しいです。 本当にありがとうございました。

その他の回答 (1)

  • hwoa1024
  • ベストアンサー率36% (122/336)
回答No.2

>>数字と文字だけ赤くするにはどうすればいいと思いますか? 回答に示した下記の部分になります。 td.style.color='red'; 何番目の列を赤にするかは if (j == 0) {} で指定しています。土曜を青にするなら if (j == 6) { td.style.color='blue'; } になります。 >>マスを全て同じ大きさにするにはどうすればいいと思いますか? 幅はwidthになり、widthも上記と同様にstyleに属しますので td.style.width='150'; (この場合は幅150pxということです) で指定してやればいいです。 ただし、幅より文字列の方が長いと広がってしまうため 広がらない幅で設定してください。

poidakepoi
質問者

お礼

追加で答えていただきありがとうございました。 本当に助かりました。

関連するQ&A