Html Asp.net Calendar 自定义css样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23383433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 01:40:14 来源:igfitidea点击:
Asp.net Calendar custom css style
提问by mina morsali
I want to use asp.net calendar in my site,I found below design and want to set it to my calendar design with css:
我想在我的网站中使用 asp.net 日历，我发现下面的设计并想用 css 将它设置为我的日历设计：
I now use below html and css to design like this:
我现在使用下面的 html 和 css 来设计这样的：
<asp:Calendar ID="Calendar1" runat="server" DayNameFormat="FirstLetter" Font-Names="Tahoma" Font-Size="11px" NextMonthText="." PrevMonthText="." SelectMonthText="?" SelectWeekText="?" CssClass="myCalendar" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_DayRender" CellPadding="0">
<OtherMonthDayStyle ForeColor="#b0b0b0" />
<DayStyle CssClass="myCalendarDay" ForeColor="#2d3338" />
<DayHeaderStyle CssClass="myCalendarDayHeader" ForeColor="#2d3338" />
<SelectedDayStyle Font-Bold="True" Font-Size="12px" CssClass="myCalendarSelector" />
<TodayDayStyle CssClass="myCalendarToday" />
<SelectorStyle CssClass="myCalendarSelector" />
<NextPrevStyle CssClass="myCalendarNextPrev" />
<TitleStyle CssClass="myCalendarTitle" />
</asp:Calendar>
CSS
CSS
.myCalendar {
background-color: #f2f2f2;
width: 156px;
border:10px solid #4CCAEF !important;
border-top:0px !important;}
.myCalendar a {
text-decoration: none; }
.myCalendar .myCalendarTitle {
font-weight: bold;
height:40px;line-height:40px;
background-color:#4CCAEF;
color:#ffffff;
}
.myCalendar th.myCalendarDayHeader
{
height:25px;
border-bottom: outset 2px #fbfbfb;
border-right: outset 2px #fbfbfb;
}
.myCalendar td.myCalendarDay {
border: outset 2px #fbfbfb;
}
.myCalendar td.myCalendarDay:nth-child(7) a{color:#c52e2e !important;}
.myCalendar .myCalendarNextPrev {
text-align: center;
}
.myCalendar .myCalendarNextPrev a {font-size:1px;}
.myCalendar .myCalendarNextPrev:nth-child(1) a{color:#4CCAEF!important;background:url("prevMonth.png") no-repeat center center;}
.myCalendar .myCalendarNextPrev:nth-child(1) a:hover,.myCalendar .myCalendarNextPrev:nth-child(3) a:hover{background-color:transparent;}
.myCalendar .myCalendarNextPrev:nth-child(3) a{color:#4CCAEF!important;background:url("nextMonth.png") no-repeat center center;}
.myCalendar td.myCalendarSelector a {
background-color: #25bae5;
}
.myCalendar .myCalendarDayHeader a,
.myCalendar .myCalendarDay a,
.myCalendar .myCalendarSelector a,
.myCalendar .myCalendarNextPrev a {
display: block;
line-height: 20px;
}
.myCalendar .myCalendarToday{ background-color: #f2f2f2; -webkit-box-shadow: 0 0 7px 3px #e5e5e5;
box-shadow: 0 0 7px 3px #e5e5e5;}
.myCalendar .myCalendarToday a{color:#25bae5 !important;}
.myCalendar .myCalendarDay a:hover,
.myCalendar .myCalendarSelector a:hover {
background-color: #25bae5;
}
**my page source: **
**我的页面来源：**
//<div>
<table id="Calendar1" class="myCalendar" cellspacing="0" cellpadding="0" title="Calendar" style="border-width:1px;border-style:solid;font-family:Tahoma;font-size:11px;border-collapse:collapse;">
<tr><td colspan="7" style="background-color:Silver;"><table class="myCalendarTitle" cellspacing="0" style="font-family:Tahoma;font-size:11px;width:100%;border-collapse:collapse;">
<tr><td class="myCalendarNextPrev" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V5193')" style="color:Black" title="Go to the previous month">.</a></td><td align="center" style="width:70%;">???????? 1393</td><td class="myCalendarNextPrev" align="right" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V5255')" style="color:Black" title="Go to the next month">.</a></td></tr>
</table></td></tr><tr><th class="myCalendarDayHeader" align="center" abbr="????" scope="col" style="color:#2D3338;">?</th><th class="myCalendarDayHeader" align="center" abbr="??????" scope="col" style="color:#2D3338;">?</th><th class="myCalendarDayHeader" align="center" abbr="??????" scope="col" style="color:#2D3338;">?</th><th class="myCalendarDayHeader" align="center" abbr="??????" scope="col" style="color:#2D3338;">?</th><th class="myCalendarDayHeader" align="center" abbr="????????" scope="col" style="color:#2D3338;">?</th><th class="myCalendarDayHeader" align="center" abbr="???????" scope="col" style="color:#2D3338;">?</th><th class="myCalendarDayHeader" align="center" abbr="????" scope="col" style="color:#2D3338;">?</th></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5222')" style="color:#B0B0B0" title="??????? 30">30</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5223')" style="color:#B0B0B0" title="??????? 31">31</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5224')" style="color:#2D3338" title="???????? 01">1</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5225')" style="color:#2D3338" title="???????? 02">2</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5226')" style="color:#2D3338" title="???????? 03">3</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5227')" style="color:#2D3338" title="???????? 04">4</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5228')" style="color:#2D3338" title="???????? 05">5</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5229')" style="color:#2D3338" title="???????? 06">6</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5230')" style="color:#2D3338" title="???????? 07">7</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5231')" style="color:#2D3338" title="???????? 08">8</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5232')" style="color:#2D3338" title="???????? 09">9</a></td><td title="aaaaa" class="myCalendarToday" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5233')" style="color:#2D3338" title="???????? 10">10</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5234')" style="color:#2D3338" title="???????? 11">11</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5235')" style="color:#2D3338" title="???????? 12">12</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5236')" style="color:#2D3338" title="???????? 13">13</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5237')" style="color:#2D3338" title="???????? 14">14</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5238')" style="color:#2D3338" title="???????? 15">15</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5239')" style="color:#2D3338" title="???????? 16">16</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5240')" style="color:#2D3338" title="???????? 17">17</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5241')" style="color:#2D3338" title="???????? 18">18</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5242')" style="color:#2D3338" title="???????? 19">19</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5243')" style="color:#2D3338" title="???????? 20">20</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5244')" style="color:#2D3338" title="???????? 21">21</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5245')" style="color:#2D3338" title="???????? 22">22</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5246')" style="color:#2D3338" title="???????? 23">23</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5247')" style="color:#2D3338" title="???????? 24">24</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5248')" style="color:#2D3338" title="???????? 25">25</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5249')" style="color:#2D3338" title="???????? 26">26</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5250')" style="color:#2D3338" title="???????? 27">27</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5251')" style="color:#2D3338" title="???????? 28">28</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5252')" style="color:#2D3338" title="???????? 29">29</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5253')" style="color:#2D3338" title="???????? 30">30</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"><a href="javascript:__doPostBack('Calendar1','5254')" style="color:#2D3338" title="???????? 31">31</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5255')" style="color:#B0B0B0" title="????? 01">1</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5256')" style="color:#B0B0B0" title="????? 02">2</a></td></tr><tr><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5257')" style="color:#B0B0B0" title="????? 03">3</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5258')" style="color:#B0B0B0" title="????? 04">4</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5259')" style="color:#B0B0B0" title="????? 05">5</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5260')" style="color:#B0B0B0" title="????? 06">6</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5261')" style="color:#B0B0B0" title="????? 07">7</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5262')" style="color:#B0B0B0" title="????? 08">8</a></td><td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"><a href="javascript:__doPostBack('Calendar1','5263')" style="color:#B0B0B0" title="????? 09">9</a></td></tr>
</form>
but I have a lot of problems , I couldn't set today style and my design is very bad and not like below picture, can everyone help me with a perfect css? thank you?
但是我有很多问题，我无法设置今天的样式，我的设计很糟糕，不像下图，大家可以帮我做一个完美的 css 吗？谢谢你？
回答by wf4
This is what I have so far, it should certainly be able to point you in the right direction:
这是我到目前为止所拥有的，它当然应该能够为您指明正确的方向：
There are a lot of CSS changes, and I have also added a divwith a class of calendarWrapperwhich is a better way to add the border on the calendar but not breaking the border on the td in the rest of the table.
有很多 CSS 更改，我还添加了div一个类，calendarWrapper其中一个类是在日历上添加边框的更好方法，但不会破坏表格其余部分中 td 上的边框。
<div class="calendarWrapper">
<!--Calendar here -->
</div>
CSS:
CSS：
.calendarWrapper
{
background-color: #4CCAEF;
padding: 10px;
display: inline-block;
}
.myCalendar
{
background-color: #f2f2f2;
width: 156px;
border: none !important;
}
.myCalendar a
{
text-decoration: none;
}
.myCalendar .myCalendarTitle
{
font-weight: bold;
height: 40px;
line-height: 40px;
background-color: #4CCAEF;
color: #ffffff;
border: none !important;
}
.myCalendar th.myCalendarDayHeader
{
height: 25px;
}
.myCalendar tr
{
border-bottom: solid 1px #ddd;
}
.myCalendar table tr
{
border-bottom: none !important;
}
.myCalendar tr:last-child td
{
border-bottom: none;
}
.myCalendar tr td.myCalendarDay, .myCalendar tr th.myCalendarDayHeader
{
border-right: solid 1px #ddd;
}
.myCalendar tr td:last-child.myCalendarDay, .myCalendar tr th:last-child.myCalendarDayHeader
{
border-right: none;
}
.myCalendar td.myCalendarDay:nth-child(7) a
{
color: #c52e2e !important;
}
.myCalendar .myCalendarNextPrev
{
text-align: center;
}
.myCalendar .myCalendarNextPrev a
{
font-size: 1px;
}
.myCalendar .myCalendarNextPrev:nth-child(1) a
{
color: #4CCAEF!important;
background: url("prevMonth.png") no-repeat center center;
}
.myCalendar .myCalendarNextPrev:nth-child(1) a:hover, .myCalendar .myCalendarNextPrev:nth-child(3) a:hover
{
background-color: transparent;
}
.myCalendar .myCalendarNextPrev:nth-child(3) a
{
color: #4CCAEF!important;
background: url("nextMonth.png") no-repeat center center;
}
.myCalendar td.myCalendarSelector a
{
background-color: #25bae5;
}
.myCalendar .myCalendarDayHeader a,
.myCalendar .myCalendarDay a,
.myCalendar .myCalendarSelector a,
.myCalendar .myCalendarNextPrev a
{
display: block;
line-height: 20px;
}
.myCalendar .myCalendarToday
{
background-color: #f2f2f2;
-webkit-box-shadow: 1px 1px 8px 1px #8f8f8f;
box-shadow: 1px 1px 8px 1px #8f8f8f;
display: inline-block;
width: 22px !important;
height: 19px !important;
border: 2px solid #f2f2f2;
margin-left: -1px;
margin-top: -1px;
position: relative;
}
.myCalendar .myCalendarToday a
{
color: #25bae5 !important;
font-weight: bold;
}
.myCalendar .myCalendarToday a:after
{
content: "TODAY";
color: #000;
font-size: 0.5em;
display: inline-block;
pointer-events: none;
width: 100%;
float: left;
}
.myCalendar .myCalendarDay a:hover,
.myCalendar .myCalendarSelector a:hover
{
background-color: #25bae5;
}
