adiary開発マニュアル

サイドバーモジュールの中で、唯一対応が面倒なものといえばカレンダーモジュールでしょう。

必ず対応する必要はありませんが、非対応の時は README に一言記載すると良いと思います。

HTML構造

<div class="hatena-module" id="side-calendar" data-module-name="des_calendar-ja">
<div class="hatena-moduletitle">カレンダー</div>
<div class="hatena-modulebody">
<table class="calendar">
<thead>
<tr class="calendar-month">
	<td class="calendar-prev-month" colspan="2"><a href="#">&lt;&lt;</a>
	</td><td class="calendar-current-month" colspan="3"><a href="#">2015/01</a></td>
	<td class="calendar-next-month" colspan="2"><a href="#">&gt;&gt;</a></td>
</tr>
<tr class="calendar-wdayname">
	<td class="calendar-sunday   w0">日</td>
	<td class="calendar-weekday  w1">月</td>
	<td class="calendar-weekday  w2">火</td>
	<td class="calendar-weekday  w3">水</td>
	<td class="calendar-weekday  w4">木</td>
	<td class="calendar-weekday  w5">金</td>
	<td class="calendar-saturday w6">土</td>
</tr>
</thead><tbody>
<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td class="calendar-day w4 holiday" title="元日">1</td>
	<td class="calendar-day w5">2</td>
	<td class="calendar-day w6">3</td>
</tr>
<tr>
	<td class="calendar-day w0">4</td>
	<td class="calendar-day w1">5</td>
	<td class="calendar-day w2">6</td>
	<td class="calendar-day w3">7</td>
	<td class="calendar-day w4">8</td>
	<td class="calendar-day w5">9</td>
	<td class="calendar-day w6">10</td>
</tr>
<tr>
	<td class="calendar-day w0">11</td>
	<td class="calendar-day w1 holiday" title="成人の日">12</td>
	<td class="calendar-day w2">13</td>
	<td class="calendar-day w3">14</td>
	<td class="calendar-day w4"><a href="#">15</a></td>
	<td class="calendar-day w5">16</td>
	<td class="calendar-day w6">17</td>
</tr>
	<!-- 略 -->
</tbody></table>
</div> <!-- hatena-modulebody -->
</div> <!-- hatena-module -->

みればそのままなのであまり悩むことはないと思いますが、いくつか補足です。

• 該当日に記事が存在すると、その日付のリンクが生成されます。
• 表示中の記事の日付、表示しようとした日付（上の日付をたどった時など）は「day-selected」というクラスが出力されます。
• そのカレンダー表示してる「その日」に「day-today」というクラスが出力されます。

satsuki2の実装

/*--------------------------------------------------------------------
●sidebar：カレンダー
---------------------------------------------------------------------*/
table.calendar {
	margin-left:		auto;
	margin-right:		auto;
	font-size:		95%;
	line-height:		100%;
}
table.calendar td.calendar-prev-month    { text-align: left;  margin-left:  0.5em; }
table.calendar td.calendar-current-month { text-align: center; }
table.calendar td.calendar-next-month    { text-align: right; margin-right: 0.5em; }
table.calendar td {
	text-align:		right;
}
table.calendar td.calendar-day a {
	text-decoration:	underline;
}
/* 土曜日 */
table.calendar td.w6, table.calendar th.w6 {
	background-color: 	#ccf;
}
/* 日曜日、祝日 */
table.calendar td.w0, table.calendar th.w0,
table.calendar td.holiday {
	background-color: 	#fcc;
}
/* 今日 */
table.calendar td.day-today      { font-weight: bold; }
/* 選択した日付 */
table.calendar td.day-selected {
	text-decoration:	none;
	border:			1px solid #33f;
}