「今月のカレンダーを表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

今月のカレンダーを表示

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>今月のカレンダーを表示</title>
  6. <style type="text/css">
  7. td, th
  8. {
  9.   border:1px solid #ccc;
  10. }
  11. .today
  12. {
  13.   font-weight:bold;
  14. }
  15. </style>
  16. <body>
  18. <h1>今月のカレンダーを表示</h1>
  20. <script type="text/javascript">
  21. /**
  22.  * 年月日に指定された数値を足して返す
  23.  * ymdDate：日付データ
  24.  * 追加する項目：年月日のどれか（ymd）
  25.  * 追加する数値
  26.  */
  27. function addDate(ymdDate, target, add)
  28. {
  29.   addNum = parseFloat(add);
  30.   
  31.   yea = ymdDate.getFullYear();
  32.   mon = ymdDate.getMonth();
  33.   day = ymdDate.getDate();
  34.   
  35.   if(target == "y")
  36.   {
  37.     yea += addNum;
  38.   }
  39.   else if(target == "m")
  40.   {
  41.     mon += addNum;
  42.   }
  43.   else if(target == "d")
  44.   {
  45.     day += addNum;
  46.   }
  47.   return new Date(yea, mon, day);
  48. }
  50. /**
  51.  * カレンダー用に日曜から1日、月末から土曜までを何かで埋め、配列にして返す
  52.  * year    表示するカレンダーの年
  53.  * month  表示するカレンダーの月
  54.  * Fill    日曜から1日まで、月末から土曜まで埋める文字
  55.  */
  56. function convertDayOfCalendar(year, month, Fill)
  57. {
  58.   // 月初と月末
  59.   var startMonth = new Date(year + "/" + month + "/1");
  60.   var endMonth   = addDate(new Date(year, month, 1), "d", -1);
  61.   
  62.   // カレンダー用に日にちを配列化：
  63.   DayArray = new Array();
  64.   
  65.   // 日曜～1日の空白を埋める。
  66.   for (i=0; i<startMonth.getDay(); i++)
  67.   {
  68.     DayArray.push(Fill);
  69.   }
  70.   
  71.   // 月初め（1日）～月末までを埋める
  72.   for (i=0; i<endMonth.getDate(); i++)
  73.   {
  74.     DayArray.push(i+1);
  75.   }
  76.   
  77.   // 月末～土曜の空白を埋める
  78.   if (endMonth.getDay() != 6)
  79.   {
  80.     startWeek = parseFloat(endMonth.getDay()) + 1;
  81.     for (i=startWeek; i<7; i++)
  82.     {
  83.       DayArray.push(Fill);
  84.     }
  85.   }
  86.   return DayArray;
  87. }
  89. function cal(year, month, day)
  90. {
  91.   // 年月日の指定が無ければ、今月のカレンダー
  92.   today=new Date();
  93.   var year  = year  || today.getFullYear();
  94.   var month = month || today.getMonth() + 1;
  95.   var day   = day   || today.getDate();
  96.   
  97.   // 曜日配列
  98.   week = new Array("日", "月", "火", "水", "木", "金", "土");
  99.   
  100.   // カレンダー用に日を配列化（日曜から1日までを何かで埋める）
  101.   DayArray = convertDayOfCalendar(year, month, "-");
  102.   
  103.   // 年月
  104.   when = year + "/" + month;
  105.   
  106.   var calendar = "";
  107.   calendar += '<table>';
  108.   calendar += "<caption>" + when + '</caption>';
  109.   
  110.   // 曜日
  111.   calendar += "<tr>";
  112.   for (i=0; i<7; i++)
  113.   {
  114.     calendar += '<th>' + week[i] + '</th>';
  115.   }
  116.   calendar += "</tr>";
  117.   
  118.   // （週単位で）日にち
  119.   for (j=0; j<DayArray.length; j++)
  120.   {
  121.     if (j%7 == 7)
  122.     {
  123.       calendar += '<tr>';
  124.     }
  125.     else if (j%7 == 0)
  126.     {
  127.       calendar += '</tr>';
  128.     }
  129.     
  130.     // 「今日」の場合はclassを追加。
  131.     todayClass = "";
  132.     if (day == DayArray[j])
  133.     {
  134.       todayClass = ' class="today"';
  135.     }
  136.     calendar += '<td' + todayClass + '>' + DayArray[j] + '</td>';
  137.   }
  138.   calendar += '</tr>';
  139.   calendar += '</table>' + "\n";
  141.   return calendar;
  142. }
  144. document.write(cal());
  146. </script>
  148. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  149. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  150. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  151. </div>
  153. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  154. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  155. </div>
  157. </body>
  158. </html>