title: Asp.net Calendar custom css style
body: <p>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:
  <img src="https://i.stack.imgur.com/eyfMV.jpg" alt="enter image description here"></p>
  
  <p>I now use below html and css to design like this:</p>
  
  <pre><code> &lt;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"&gt;
              &lt;OtherMonthDayStyle ForeColor="#b0b0b0" /&gt;
              &lt;DayStyle CssClass="myCalendarDay" ForeColor="#2d3338" /&gt;
              &lt;DayHeaderStyle CssClass="myCalendarDayHeader" ForeColor="#2d3338" /&gt;
  &lt;SelectedDayStyle Font-Bold="True" Font-Size="12px" CssClass="myCalendarSelector" /&gt;
              &lt;TodayDayStyle CssClass="myCalendarToday" /&gt;
              &lt;SelectorStyle CssClass="myCalendarSelector" /&gt;
              &lt;NextPrevStyle CssClass="myCalendarNextPrev" /&gt;
              &lt;TitleStyle CssClass="myCalendarTitle" /&gt;
          &lt;/asp:Calendar&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .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;  
  }
  </code></pre>
  
  <p>**my page source: **</p>
  
  <p></p>
  
  <p>
  </p>
  
  <p>
      
      
      
      
      
      
      
  
      </p>
  
  
  
  
  
  
  
  
  //
  
  
  
  
      
  
  
  <pre><code>&lt;div&gt;
      &lt;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;"&gt;
  &lt;tr&gt;&lt;td colspan="7" style="background-color:Silver;"&gt;&lt;table class="myCalendarTitle" cellspacing="0" style="font-family:Tahoma;font-size:11px;width:100%;border-collapse:collapse;"&gt;
      &lt;tr&gt;&lt;td class="myCalendarNextPrev" style="width:15%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','V5193')" style="color:Black" title="Go to the previous month"&gt;.&lt;/a&gt;&lt;/td&gt;&lt;td align="center" style="width:70%;"&gt;اردیبهشت 1393&lt;/td&gt;&lt;td class="myCalendarNextPrev" align="right" style="width:15%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','V5255')" style="color:Black" title="Go to the next month"&gt;.&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="شنبه" scope="col" style="color:#2D3338;"&gt;ش&lt;/th&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="یکشنبه" scope="col" style="color:#2D3338;"&gt;ی&lt;/th&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="دوشنبه" scope="col" style="color:#2D3338;"&gt;د&lt;/th&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="ﺳﻪشنبه" scope="col" style="color:#2D3338;"&gt;ﺳ&lt;/th&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="چهارشنبه" scope="col" style="color:#2D3338;"&gt;چ&lt;/th&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="پنجشنبه" scope="col" style="color:#2D3338;"&gt;پ&lt;/th&gt;&lt;th class="myCalendarDayHeader" align="center" abbr="جمعه" scope="col" style="color:#2D3338;"&gt;ج&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5222')" style="color:#B0B0B0" title="فروردین 30"&gt;30&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5223')" style="color:#B0B0B0" title="فروردین 31"&gt;31&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5224')" style="color:#2D3338" title="اردیبهشت 01"&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5225')" style="color:#2D3338" title="اردیبهشت 02"&gt;2&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5226')" style="color:#2D3338" title="اردیبهشت 03"&gt;3&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5227')" style="color:#2D3338" title="اردیبهشت 04"&gt;4&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5228')" style="color:#2D3338" title="اردیبهشت 05"&gt;5&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5229')" style="color:#2D3338" title="اردیبهشت 06"&gt;6&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5230')" style="color:#2D3338" title="اردیبهشت 07"&gt;7&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5231')" style="color:#2D3338" title="اردیبهشت 08"&gt;8&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5232')" style="color:#2D3338" title="اردیبهشت 09"&gt;9&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarToday" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5233')" style="color:#2D3338" title="اردیبهشت 10"&gt;10&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5234')" style="color:#2D3338" title="اردیبهشت 11"&gt;11&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5235')" style="color:#2D3338" title="اردیبهشت 12"&gt;12&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5236')" style="color:#2D3338" title="اردیبهشت 13"&gt;13&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5237')" style="color:#2D3338" title="اردیبهشت 14"&gt;14&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5238')" style="color:#2D3338" title="اردیبهشت 15"&gt;15&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5239')" style="color:#2D3338" title="اردیبهشت 16"&gt;16&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5240')" style="color:#2D3338" title="اردیبهشت 17"&gt;17&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5241')" style="color:#2D3338" title="اردیبهشت 18"&gt;18&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5242')" style="color:#2D3338" title="اردیبهشت 19"&gt;19&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5243')" style="color:#2D3338" title="اردیبهشت 20"&gt;20&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5244')" style="color:#2D3338" title="اردیبهشت 21"&gt;21&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5245')" style="color:#2D3338" title="اردیبهشت 22"&gt;22&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5246')" style="color:#2D3338" title="اردیبهشت 23"&gt;23&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5247')" style="color:#2D3338" title="اردیبهشت 24"&gt;24&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5248')" style="color:#2D3338" title="اردیبهشت 25"&gt;25&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5249')" style="color:#2D3338" title="اردیبهشت 26"&gt;26&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5250')" style="color:#2D3338" title="اردیبهشت 27"&gt;27&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5251')" style="color:#2D3338" title="اردیبهشت 28"&gt;28&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5252')" style="color:#2D3338" title="اردیبهشت 29"&gt;29&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5253')" style="color:#2D3338" title="اردیبهشت 30"&gt;30&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#2D3338;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5254')" style="color:#2D3338" title="اردیبهشت 31"&gt;31&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5255')" style="color:#B0B0B0" title="خرداد 01"&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5256')" style="color:#B0B0B0" title="خرداد 02"&gt;2&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5257')" style="color:#B0B0B0" title="خرداد 03"&gt;3&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5258')" style="color:#B0B0B0" title="خرداد 04"&gt;4&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5259')" style="color:#B0B0B0" title="خرداد 05"&gt;5&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5260')" style="color:#B0B0B0" title="خرداد 06"&gt;6&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5261')" style="color:#B0B0B0" title="خرداد 07"&gt;7&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5262')" style="color:#B0B0B0" title="خرداد 08"&gt;8&lt;/a&gt;&lt;/td&gt;&lt;td title="aaaaa" class="myCalendarDay" align="center" style="color:#B0B0B0;width:14%;"&gt;&lt;a href="javascript:__doPostBack('Calendar1','5263')" style="color:#B0B0B0" title="خرداد 09"&gt;9&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;/form&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>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?</p>