Asp.net calendario personalizzato css stile

Question

voglio usare il calendario asp.net nel mio sito, ho trovato sotto disegno e si desidera impostare al mio design del calendario con i CSS:

io uso qui di seguito html e css per progettare in questo modo:

<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

.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; 
} 

** la mia sorgente della pagina: **

//

<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> 

ma ho un sacco di problemi, non ho potuto impostare lo stile di oggi e il mio design è molto brutto e non come l'immagine sotto , tutti possono aiutarmi con un css perfetto? grazie?

Answer 1

Questo è ciò che ho finora, dovrebbe certamente essere in grado di indicarvi la giusta direzione:

http://jsfiddle.net/7wm8L/3/

Ci sono un sacco di cambiamenti CSS, e ho anche aggiunto un div con una classe di calendarWrapper che è un modo migliore per aggiungere il bordo al calendario ma non rompere il bordo sul td nel resto della tabella.

<div class="calendarWrapper"> 
<!--Calendar here --> 
</div> 

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; 
    }