.calendar { width:300px; height:243px; border:1px solid #ccc; border-radius:5px; position:relative; } .calendar .head { padding:10px 10px; text-align:center; position:relative; } .calendar .head button { width:30px; height:30px; line-height:30px; text-align:center; background:#fff; border:1px solid #ccc; border-radius:3px; } .calendar .head button.prevbtn { position:absolute; left:30px; } .calendar .head button.nextbtn { position:absolute; right:30px; } .calendar .head select { height:30px; width:100px; text-align:center; } .calendar .head select option { text-align:center; } .calendar .datebody table { width:100%; } .calendar .datebody table td { text-align:center; border:1px solid #ccc; } .calendar .new,.old { color:#ccc; } .calendar .active { background:#0BB20C; } .calendar .on { background:#FF6600; }
大家可以 根据自己样式,进行随意更改,比较简单好用,没有外部插件,不会有任何冲突,兼容性没有试过。