[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 521
  • Last Modified:

need help in outlook css

I need to display asp.net calendar control similar to the Outlook view.
how would i do that? what i'm missing
 
here is what i'm donig:


<asp:Calendar ID="EventCalendar"  Width="350px"  Height="190px"  OnDayRender="EventCalendar_DayRender" runat="server"  CssFile="outlook.css" > </asp:Calendar>

outlook.CSS:

table.calendarWrapper
{
background: #fff;
cursor: default;
font: normal 8pt Tahoma;
}

.TableLayout
{
margin: 0px 7px;
background: url('img/titlebarBg.gif') repeat-x left 15px;
}

.TableLayout td a
{
text-align: right;
width: 13px;
height: 12px;
padding: 1px;
display: block;
text-decoration: none;
color: #000;
cursor: default;
}

.DaysOfWeek
{
color: #000004;
text-align: right;
text-transform: uppercase;
height: 16px;
}

.otherMonth
{
color: #aca899;
text-align: right;
}

.outOfRange
{
color: #aca899;
text-align: right;
background: #fff;
}

.titlebar
{
font: normal 8pt Tahoma;
height: 16px;
width: 100%;
background-color: #9ebef5;
border: 1px solid #9ebef5;
}

.MonthYearFastNav
{
border: 1px solid #9ebef5;
background: #fff;
font: normal 8pt Tahoma;
color: #000;
border-collapse: collapse;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#666666,strength=3);
cursor: default;
}

.MonthYearFastNav td
{
vertical-align: middle;
}

.MonthYearFastNav td.selected
{
background: #fbe694;
color: #000;
text-align: center;
}

.MonthYearFastNav td.bottom
{
text-align: right;
padding-left: 9px;
}

.MonthYearFastNav td input
{
background: #9ebef5;
border: solid 1px #000;
font: normal 8pt Tahoma;
color: #000000;
float: left;
width: auto;
margin-right: 1px;
}

.outlookDefault a,
.outlookHover a,
.outlookWeekendDefault a,
.outlookWeekendHover a
{
background: #fff;
border: solid 1px #fff;
text-align: right;
width: 15px;
height: 13px;
display: block;
text-decoration: none;
color: #000;
}

.outlookToday a
{
background: #fff;
border: solid 1px #bb5503;
}

.outlookTodaySelected a
{
background: #fbe694;
border: solid 1px #bb5503;
}

.outlookTodaySelected
{
background: #fbe694  !important;
}

.outlookSelect a,
.outlookWeekendSelect a
{
background: #fbe694;
border: solid 1px #fbe694;
}

.outlookSelect,
.outlookWeekendSelect
{
background: #fbe694 !important;
}

.ScheduledVisits a
{
font-weight: bold;
color: #082D6B ;

}


0
nisarkhan
Asked:
nisarkhan
1 Solution
 
JezcentralCommented:
Could you give us the generated source code? That will help us see what is wrong. :)
0
 
nisarkhanAuthor Commented:
here is that souce generated:


 <table id="calendar1" cellspacing="0" cellpadding="2" title="Calendar" border="0" style="width:220px;height:200px;font-size:8pt;font-family:Verdana;color:#663399;border-width:1px;border-style:solid;border-color:#FFCC66;background-color:#FFFFCC;border-collapse:collapse;">
	<tr><td colspan="7" style="background-color:#990000;"><table cellspacing="0" border="0" style="color:#FFFFCC;font-family:Verdana;font-size:9pt;font-weight:bold;width:100%;border-collapse:collapse;">
		<tr><td style="color:#FFFFCC;font-size:8pt;width:15%;"><a href="javascript:__doPostBack('calendar1','V2922')" style="color:#FFFFCC" title="Go to the previous month">&lt;</a></td><td align="center" style="width:70%;">February 2008</td><td align="right" style="color:#FFFFCC;font-size:8pt;width:15%;"><a href="javascript:__doPostBack('calendar1','V2982')" style="color:#FFFFCC" title="Go to the next month">&gt;</a></td></tr>
	</table></td></tr><tr><th align="center" abbr="Sunday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">Su</th><th align="center" abbr="Monday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">Mo</th><th align="center" abbr="Tuesday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">Tu</th><th align="center" abbr="Wednesday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">We</th><th align="center" abbr="Thursday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">Th</th><th align="center" abbr="Friday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">Fr</th><th align="center" abbr="Saturday" scope="col" style="background-color:#FFCC66;font-weight:bold;height:1px;">Sa</th></tr><tr><td align="center" style="color:#CC9966;width:14%;">27</td><td align="center" style="color:#CC9966;width:14%;">28</td><td align="center" style="color:#CC9966;width:14%;">29</td><td align="center" style="color:#CC9966;width:14%;">30</td><td align="center" style="color:#CC9966;width:14%;">31</td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/1/2008' style='color: black;text-decoration:none; font-weight:normal'>1</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/2/2008' style='color: black;text-decoration:none; font-weight:normal'>2</a></td></tr><tr><td align="center" style="width:14%;"><a href='cal.aspx?day=2/3/2008' style='color: black;text-decoration:none; font-weight:normal'>3</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/4/2008' style='color: black;text-decoration:none; font-weight:normal'>4</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/5/2008' style='color: black;text-decoration:none; font-weight:normal'>5</a></td><td align="center" style="color:White;background-color:#FFCC66;width:14%;"><a href='cal.aspx?day=2/6/2008' style='color: black;text-decoration:none; font-weight:normal'>6</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/7/2008' style='color: black;text-decoration:none; font-weight:normal'>7</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/8/2008' style='color: black;text-decoration:none; font-weight:normal'>8</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/9/2008' style='color: black;text-decoration:none; font-weight:normal'>9</a></td></tr><tr><td align="center" style="width:14%;"><a href='cal.aspx?day=2/10/2008' style='color: black;text-decoration:none; font-weight:normal'>10</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/11/2008' style='color: black;text-decoration:none; font-weight:normal'>11</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/12/2008' style='color: black;text-decoration:none; font-weight:normal'>12</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/13/2008' style='color: black;text-decoration:none; font-weight:normal'>13</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/14/2008' style='color: black;text-decoration:none; font-weight:normal'>14</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/15/2008' style='color: black;text-decoration:none; font-weight:normal'>15</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/16/2008' style='color: black;text-decoration:none; font-weight:normal'>16</a></td></tr><tr><td align="center" style="width:14%;"><a href='cal.aspx?day=2/17/2008' style='color: black;text-decoration:none; font-weight:normal'>17</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/18/2008' style='color: black;text-decoration:none; font-weight:normal'>18</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/19/2008' style='color: black;text-decoration:none; font-weight:normal'>19</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/20/2008' style='color: black;text-decoration:none; font-weight:normal'>20</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/21/2008' style='color: black;text-decoration:none; font-weight:normal'>21</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/22/2008' style='color: black;text-decoration:none; font-weight:normal'>22</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/23/2008' style='color: black;text-decoration:none; font-weight:normal'>23</a></td></tr><tr><td align="center" style="width:14%;"><a href='cal.aspx?day=2/24/2008' style='color: black;text-decoration:none; font-weight:normal'>24</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/25/2008' style='color: black;text-decoration:none; font-weight:normal'>25</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/26/2008' style='color: black;text-decoration:none; font-weight:normal'>26</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/27/2008' style='color: black;text-decoration:none; font-weight:normal'>27</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/28/2008' style='color: black;text-decoration:none; font-weight:normal'>28</a></td><td align="center" style="width:14%;"><a href='cal.aspx?day=2/29/2008' style='color: black;text-decoration:none; font-weight:normal'>29</a></td><td align="center" style="color:#CC9966;width:14%;">1</td></tr><tr><td align="center" style="color:#CC9966;width:14%;">2</td><td align="center" style="color:#CC9966;width:14%;">3</td><td align="center" style="color:#CC9966;width:14%;">4</td><td align="center" style="color:#CC9966;width:14%;">5</td><td align="center" style="color:#CC9966;width:14%;">6</td><td align="center" style="color:#CC9966;width:14%;">7</td><td align="center" style="color:#CC9966;width:14%;">8</td></tr>
</table> 

Open in new window

0
 
khan2000Commented:
why dont you use the yahoo calendar api?
http://developer.yahoo.com/yui/calendar/

 
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now