Googleカレンダーで日付入力の際に出てくるポップアップミニカレンダーの作り方(CSS編)

Googleカレンダーで日付選択をするときに、ポップアップで出てくるミニカレンダーみたいなやつをHTML/CSSで作る方法。

GoogleカレンダーのJavaScriptを解析して、静的HTML化してみました。
CSSのお勉強にどうぞ。

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>

html{overflow-y:auto}
body{font:small/normal Arial,Sans-serif}

.cal-dayh{ font-size:78% }
.cal-monthtable{
  width:100%;
  padding:0;
  border-bottom:1px #a2bbdd solid;
  -webkit-user-select:none;
  -khtml-user-select:none;
  table-layout:fixed;
}
.cal-cell{ text-align:center;padding:2px;font-family:Verdana,sans-serif;font-size:85%}
.cal-heading { color:#112abb; font-weight:bold;vertical-align:middle} /* 年月の文字色 */
.cal-cur{font-weight:bold;padding-bottom:4px;text-align:center;white-space:nowrap;font-size:100%}
.cal-prev,.cal-next{font-size:100%;padding-bottom:6px;cursor:pointer}
.cal-prev { text-align:right}
.cal-next { text-align:left}
.cal-weekday          { background:#fff }
.cal-weekday-selected { background:#ace }
.cal-weekend          { background:#eee }
.cal-weekend-selected { background:#9bd }
.cal-offmonth         { color:#888} /* その月の前後月に属する日の文字色*/
.cal-day-left         { border-left:1px #a2bbdd solid}
.cal-day-right        { border-right:1px #a2bbdd solid}
.cal-dayh             { border-bottom:1px #a2bbdd solid}
.cal-today,.cal-today-selected{
                        padding:1px;color:#fff;border:1px solid }
.cal-today            { background:#9ab;border-color:#567 #abc #abc #567} /* 現在日の背景色 */
.cal-today-selected   { background:#579;border-color:#246 #9bd #9bd #246} /* 現在日が選択された場合の背景色 */
.cal-onhover          { background-color:#def;color:black}

.cal-popup{
    background:#d9ffc3; /* カンレダー上部の背景色 */
    line-height:1em;
    width:12.45em;
    position:absolute;
    z-index:300
}


</style>

</head>

<body>

<div style="top: 30px; left: 30px;" class="cal-popup">

<table id="caltbl" class="cal-monthtable" style="-moz-user-select: none;" cellpadding="0" cellspacing="0">
<tbody>
<tr style="cursor: pointer;" class="cal-cell cal-heading" id=":dheader">
    <td id=":dprev" class="cal-cell cal-prev">«</td>
    <td colspan="5" id=":dcur" class="cal-cell cal-cur">2009年 8月</td>
    <td id=":dnext" class="cal-cell cal-next">»</td>
</tr>
<tr class="cal-days">
    <td class="cal-cell cal-dayh">日</td>
    <td class="cal-cell cal-dayh">月</td>
    <td class="cal-cell cal-dayh">火</td>
    <td class="cal-cell cal-dayh">水</td>
    <td class="cal-cell cal-dayh">木</td>
    <td class="cal-cell cal-dayh">金</td>
    <td class="cal-cell cal-dayh">土</td>
</tr>
<tr style="cursor: pointer;" id=":drow_0"><td id=":dday_20218" class="cal-cell cal-weekend cal-offmonth cal-day-left">26</td>
    <td id=":dday_20219" class="cal-cell cal-weekday cal-offmonth">27</td>
    <td id=":dday_20220" class="cal-cell cal-weekday cal-offmonth">28</td>
    <td id=":dday_20221" class="cal-cell cal-weekday cal-offmonth">29</td>
    <td id=":dday_20222" class="cal-cell cal-weekday cal-offmonth">30</td>
    <td id=":dday_20223" class="cal-cell cal-weekday cal-offmonth">31</td>
    <td id=":dday_20225" class="cal-cell cal-weekend cal-onmonth cal-day-right">1</td>
</tr>
<tr style="cursor: pointer;" id=":drow_1"><td id=":dday_20226" class="cal-cell cal-weekend cal-onmonth cal-day-left">2</td>
    <td id=":dday_20227" class="cal-cell cal-weekday cal-onmonth">3</td>
    <td id=":dday_20228" class="cal-cell cal-weekday cal-onmonth">4</td>
    <td id=":dday_20229" class="cal-cell cal-weekday cal-onmonth">5</td>
    <td id=":dday_20230" class="cal-cell cal-weekday cal-onmonth">6</td>
    <td id=":dday_20231" class="cal-cell cal-weekday cal-onmonth">7</td>
    <td id=":dday_20232" class="cal-cell cal-weekend cal-onmonth cal-day-right">8</td>
</tr>
<tr style="cursor: pointer;" id=":drow_2"><td id=":dday_20233" class="cal-cell cal-weekend cal-onmonth cal-day-left">9</td>    <td id=":dday_20234" class="cal-cell cal-weekday cal-onmonth">10</td>
    <td id=":dday_20235" class="cal-cell cal-weekday cal-onmonth">11</td>
    <td id=":dday_20236" class="cal-cell cal-weekday cal-onmonth">12</td>
    <td id=":dday_20237" class="cal-cell cal-weekday cal-onmonth">13</td>
    <td id=":dday_20238" class="cal-cell cal-weekday cal-onmonth">14</td>
    <td id=":dday_20239" class="cal-cell cal-weekend cal-onmonth cal-day-right">15</td>
</tr>
<tr style="cursor: pointer;" id=":drow_3"><td id=":dday_20240" class="cal-cell cal-weekend cal-onmonth cal-day-left">16</td>
    <td id=":dday_20241" class="cal-cell cal-weekday cal-onmonth">17</td>
    <td id=":dday_20242" class="cal-cell cal-weekday cal-onmonth cal-today">18</td>
    <td id=":dday_20243" class="cal-cell cal-weekday cal-onmonth">19</td>
    <td id=":dday_20244" class="cal-cell cal-weekday cal-onmonth">20</td>
    <td id=":dday_20245" class="cal-cell cal-weekday cal-onmonth cal-weekday-selected">21</td>
    <td id=":dday_20246" class="cal-cell cal-weekend cal-onmonth cal-day-right">22</td>
</tr>
<tr style="cursor: pointer;" id=":drow_4"><td id=":dday_20247" class="cal-cell cal-weekend cal-onmonth cal-day-left">23</td>
    <td id=":dday_20248" class="cal-cell cal-weekday cal-onmonth">24</td>
    <td id=":dday_20249" class="cal-cell cal-weekday cal-onmonth">25</td>
    <td id=":dday_20250" class="cal-cell cal-weekday cal-onmonth">26</td>
    <td id=":dday_20251" class="cal-cell cal-weekday cal-onmonth">27</td>
    <td id=":dday_20252" class="cal-cell cal-weekday cal-onmonth">28</td>
<td id=":dday_20253" class="cal-cell cal-weekend cal-onmonth cal-day-right">29</td>
</tr>
<tr style="cursor: pointer;" id=":drow_5"><td id=":dday_20254" class="cal-cell cal-weekend cal-onmonth cal-day-left">30</td>
    <td id=":dday_20255" class="cal-cell cal-weekday cal-onmonth">31</td>
    <td id=":dday_20257" class="cal-cell cal-weekday cal-offmonth">1</td>
    <td id=":dday_20258" class="cal-cell cal-weekday cal-offmonth">2</td>
    <td id=":dday_20259" class="cal-cell cal-weekday cal-offmonth">3</td>
    <td id=":dday_20260" class="cal-cell cal-weekday cal-offmonth">4</td>
    <td id=":dday_20261" class="cal-cell cal-weekend cal-offmonth cal-day-right">5</td>
</tr>
<tr style="cursor: pointer;" id=":drow_6"><td id=":dday_20262" class="cal-cell cal-weekend cal-offmonth cal-day-left">6</td>
    <td id=":dday_20263" class="cal-cell cal-weekday cal-offmonth">7</td>
    <td id=":dday_20264" class="cal-cell cal-weekday cal-offmonth">8</td>
    <td id=":dday_20265" class="cal-cell cal-weekday cal-offmonth">9</td>
    <td id=":dday_20266" class="cal-cell cal-weekday cal-offmonth">10</td>
    <td id=":dday_20267" class="cal-cell cal-weekday cal-offmonth">11</td>
    <td id=":dday_20268" class="cal-cell cal-weekend cal-offmonth cal-day-right">12</td>
</tr>
</tbody>
</table>

</div>

</body>
</html>

カテゴリ: