Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Asp.net Calendar custom css style

Tags:

html

css

asp.net

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: enter image description here

I now use below html and css to design like this:

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

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

like image 649
mina morsali Avatar asked Apr 30 '14 08:04

mina morsali

Video Answer

1 Answers

This is what I have so far, it should certainly be able to point you in the right direction:

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

There are a lot of CSS changes, and I have also added a div with a class of calendarWrapper which 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.

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

image preview of calendar

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;
    }
like image 56
wf4 Avatar answered Sep 17 '22 19:09

wf4
Sign in to Comment

Related questions

Fabric.js stage.getActiveObject().clone() vs. fabric.util.object.clone(stage.getActiveObject())
Merge direct HTML siblings into one in jQuery
How to detect strictly adjacent siblings
PHP - $_FILES array is empty [duplicate]
insert value of html select form into mysql database
Split text of input button into 2 lines, on on-top of the other
CSS nth-child misses element
Input overflows container
Bootstrap/Stylus - Make Table Column as small as possible
Nest text inside SVG path
Refresh list after adding an item with jQuery UI sortable plugin
wrapping subsections of text with tags in BeautifulSoup
Why minify when the transport will gzip?
getComputedStyle gives "transparent" instead of actual background color
how to extract the designated div table data in lxml?
Convert multiline plain text to HTML paragraphs with AngularJS
How to create a pattern overlay on top of an image
How does the W3C define a "Web Application"?
Crossbrowser brightness filter over img using css
Keep footer at bottom but not sticky?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!