1. 基础外观

    <div class="c_calendar">
    	<div class="date">
    		<a href="#nogo" class="preYear"></a>
    		<a href="#nogo" class="preMonth"></a>
    		<span class="year"><input type="text" value="2011" /></span>
    		<span class="month"><input type="text" value="八月" /></span>
    		<a href="#nogo" class="nextMonth"></a>
    		<a href="#nogo" class="nextYear"></a>
    	</div>
    	<ul class="week">
    		<li class="sunday"><span><em>星期</em>日</span></li>
    		<li><span><em>星期</em>一</span></li>
    		<li><span><em>星期</em>二</span></li>
    		<li><span><em>星期</em>三</span></li>
    		<li><span><em>星期</em>四</span></li>
    		<li><span><em>星期</em>五</span></li>
    		<li class="saturday"><span><em>星期</em>六</span></li>
    	</ul>
    	<ul class="day">
    		<li>
    			<a class="li" href="#nogo">
    				<span class="g">31</span>
    				<span class="l">初三</span>
    			</a>
    		</li>
    	</ul>
    	<div class="fn">
    		<a href="#nogo" class="today">今天</a>
    		<a href="#nogo" class="cancel">取消</a>
    		<a href="#nogo" class="clear">清除</a>
    	</div>
    	<div class="option option-year" id="year" style="display:none;"><!-- 年份选择 -->
    		<div class="list">
    			<a href="#nogo">1999</a>
    			<a href="#nogo">2000</a>
    			<a href="#nogo">2001</a>
    			<a href="#nogo">2002</a>
    			<a class="on" href="#nogo">2003</a>
    			<a href="#nogo">2004</a>
    			<a href="#nogo">2005</a>
    			<a href="#nogo">2006</a>
    			<a href="#nogo">2007</a>
    			<a href="#nogo">2008</a>
    			<a href="#nogo">2009</a>
    			<a href="#nogo">2010</a>
    			<a href="#nogo">2011</a>
    			<a class="cur" href="#nogo">2012</a>
    			<a href="#nogo">2013</a>
    		</div>
    		<div class="page">
    			<a href="#nogo" class="pre">下页</a>
    			<a href="#nogo" class="next">下页</a>
    			<a href="#nogo" class="close"></a>
    		</div>
    	</div>
    	<div class="option option-month" id="month" style="display:none;"><!-- 月份选择 -->
    		<div class="list">
    			<a href="#nogo">一月</a>
    			<a href="#nogo">七月</a>
    			<a href="#nogo">二月</a>
    			<a href="#nogo">八月</a>
    			<a href="#nogo">三月</a>
    			<a href="#nogo">九月</a>
    			<a class="on" href="#nogo">四月</a>
    			<a href="#nogo">十月</a>
    			<a href="#nogo">五月</a>
    			<a href="#nogo">十一</a>
    			<a href="#nogo">六月</a>
    			<a class="cur" href="#nogo">十二</a>
    		</div>
    		<div class="page">
    			<a href="#nogo" class="close"></a>
    		</div>
    	</div>
    </div>
    
  2. 扩展外观

    1. 加入时间

      <div class="c_calendar">
      	<div class="date">
      		...
      	</div>
      	<ul class="week">
      		...
      	</ul>
      	<ul class="day">
      		...
      	</ul>
      	<div class="time">
      		<ul>
      			<li>
      				<input type="text" />
      				<span class="label">时</span>
      			</li>
      			<li>
      				<input type="text" />
      				<span class="label">分</span>
      			</li>
      			<li>
      				<input type="text" />
      				<span class="label">秒</span>
      			</li>
      		</ul>
      	</div>
      	<div class="fn">
      		...
      	</div>
      	<div class="option option-year" id="year" style="display:none;"><!-- 年份选择 -->
      		...
      	</div>
      	<div class="option option-month" id="month" style="display:none;"><!-- 月份选择 -->
      		...
      	</div>
      	<div class="option option-hour" id="month" style="display:none;"><!-- 小时选择 -->
      		...
      	</div>
      	<div class="option option-minute" id="month" style="display:none;"><!-- 分钟选择 -->
      		...
      	</div>
      	<div class="option option-second" id="month" style="display:none;"><!-- 秒钟选择 -->
      		...
      	</div>
      </div>
      
    2. 加大版(适用于弹出的形式展示)

      <div class="c_calendar c_calendar-big">
      	...
      </div>
      
    3. 带农历的日历(适用于弹出的形式展示)

      <div class="c_calendar c_calendar-lunar">
      	...
      </div>
      
    4. 公历节日

      <div class="c_calendar">
      	<ul class="day">
      		<li class="festival">
      			<span class="li">
      				<span class="g">普通公历</span>
      				<span class="l">普通农历</span>
      			</span>
      		</li>
      	</ul>
      </div>
      
    5. 农历节日

      <div class="c_calendar">
      	<ul class="day">
      		<li class="festival-l">
      			<span class="li">
      				<span class="g">普通公历</span>
      				<span class="l">普通农历</span>
      			</span>
      		</li>
      	</ul>
      </div>
      
    6. 今天

      <div class="c_calendar">
      	<ul class="day">
      		<li class="today">
      			<span class="li">
      				<span class="g">普通公历</span>
      				<span class="l">普通农历</span>
      			</span>
      		</li>
      	</ul>
      </div>
      
    7. 选定日

      <div class="c_calendar">
      	<ul class="day">
      		<li class="on">
      			<span class="li">
      				<span class="g">普通公历</span>
      				<span class="l">普通农历</span>
      			</span>
      		</li>
      	</ul>
      </div>