Hello sir,
I am using radcalender in one of my application
My application is developing and running in VS 2010 + Telerik 2013.1.220 + IE 10
I am getting radcalender display as shown in image attached to it
I have created skinn in theme and the attached to it.
I have created Skin for it as
Please take me out of this
I am using radcalender in one of my application
My application is developing and running in VS 2010 + Telerik 2013.1.220 + IE 10
<
telerik:RadDatePicker
SkinID
=
"ESSDatePicker"
ID
=
"PickerFrom"
runat
=
"server"
AutoPostBack
=
"True OnSelectedDateChanged="
PickerFrom_SelectedDateChanged"
Width
=
"140px"
>
<
DateInput
ButtonsPosition
=
"Left"
runat
=
"server"
DateFormat
=
"dd-MMM-yyyy"
DisplayDateFormat
=
"ddd, dd-MMM-yyyy"
ReadOnly
=
"True"
AutoPostBack
=
"True"
Height
=
"23px"
>
</
DateInput
>
</
telerik:RadDatePicker
>
I am getting radcalender display as shown in image attached to it
I have created skinn in theme and the attached to it.
<telerik:RadDatePicker SkinID=
"ESSDatePicker"
EnableEmbeddedSkins=
"false"
Skin=
"Eil"
runat=
"server"
>
<DateInput cssClass=
"rdDatepicker"
>
<EnabledStyle BackColor=
"White"
/>
</DateInput>
<Calendar
ShowRowHeaders=
"false"
ShowOtherMonthsDays=
"false"
EnableEmbeddedBaseStylesheet=
"false"
font-family= Arial;>
</Calendar>
<DatePopupButton HoverImageUrl=
""
ImageUrl=
""
/>
</telerik:RadDatePicker>
I have created Skin for it as
table.RadCalendar_Eil
{
table-layout
:
auto
;
border-collapse
:
separate
;
border
:
0
;
background
:
#fff
;
font-family
:
Arial
;
font-size
:
8pt
;
width
:
220px
;
}
/*titlebar*/
.RadCalendar_Eil .rcTitlebar
{
height
:
22px
;
width
:
100%
;
border
:
1px
solid
;
border-color
:
#868686
#868686
#c4c4c4
;
padding
:
0
;
background
:
#eaeaea
0
-1000px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
color
:
#000
;
}
.RadCalendar_Eil .rcTitlebar table
{
table-layout
:
auto
;
width
:
100%
;
border-collapse
:
separate
;
border
:
0
;
font-family
:
Arial
;
font-size
:
8pt
;
}
.RadCalendar_Eil .rcTitlebar td
{
border
:
0
;
padding
:
0
0
1px
;
text-align
:
center
;
vertical-align
:
middle
;
}
.RadCalendar_Eil .rcTitlebar .rcTitle
{
width
:
100%
;
cursor
:
pointer
;
}
.RadCalendar_Eil .rcNoNav .rcTitle
{
cursor
:
default
;
}
.RadCalendar_Eil .rcTitlebar .rcPrev,
.RadCalendar_Eil .rcTitlebar .rcNext,
.RadCalendar_Eil .rcTitlebar .rcFastPrev,
.RadCalendar_Eil .rcTitlebar .rcFastNext
{
display
:
block
!important
;
width
:
15px
;
height
:
15px
;
overflow
:
hidden
!important
;
margin
:
0
4px
;
background
:
transparent
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
)
no-repeat
;
text-indent
:
-2222px
;
text-decoration
:
none
;
color
:
#ccc
;
}
.RadCalendar_Eil .rcTitlebar .rcFastPrev
{
margin-left
:
6px
;
background-position
:
1px
-197px
;
}
.RadCalendar_Eil .rcTitlebar .rcFastPrev:hover
{
background-position
:
1px
-247px
;
}
.RadCalendar_Eil .rcTitlebar .rcPrev
{
background-position
:
4px
-297px
;
}
.RadCalendar_Eil .rcTitlebar .rcPrev:hover
{
background-position
:
4px
-347px
;
}
.RadCalendar_Eil .rcTitlebar .rcNext
{
background-position
:
3px
-397px
;
}
.RadCalendar_Eil .rcTitlebar .rcNext:hover
{
background-position
:
3px
-447px
;
}
.RadCalendar_Eil .rcTitlebar .rcFastNext
{
margin-right
:
6px
;
background-position
:
1px
-497px
;
}
.RadCalendar_Eil .rcTitlebar .rcFastNext:hover
{
background-position
:
1px
-547px
;
}
.RadCalendar_Eil .rcMain
{
width
:
100%
;
border
:
1px
solid
#868686
;
border-top
:
0
;
padding
:
0
;
}
.RadCalendar_Eil .rcMainTable
{
table-layout
:
auto
;
border-collapse
:
separate
;
border
:
0
;
width
:
100%
;
font-family
:
Arial
;
font-size
:
8pt
;
}
/*header, footer*/
.RadCalendar_Eil .rcHeader,
.RadCalendar_Eil .rcFooter
{
border
:
1px
solid
#868686
;
border-top
:
0
;
padding
:
0
;
}
/*week numbers and days*/
.RadCalendar_Eil .rcRow th,
.RadCalendar_Eil .rcWeek th
{
border
:
0
;
font-family
:
Arial
;
font-size
:
8pt
;
vertical-align
:
middle
;
cursor
:
default
;
}
.RadCalendar_Eil .rcWeek th
{
border-bottom
:
1px
solid
#c5c5c5
;
padding
:
4px
6px
3px
0
;
text-align
:
right
;
color
:
#333
;
}
.RadCalendar_Eil .rcWeek .rcViewSel,
.RadCalendar_Eil .rcRow th
{
width
:
13px
;
padding
:
0
7px
0
9px
;
background
:
#eee
;
text-align
:
center
;
}
.RadCalendar_Eil .rcRow th
{
color
:
#777
;
}
/*date cells*/
.RadCalendar_Eil .rcRow td
{
border
:
1px
solid
#fff
;
padding
:
0
;
text-align
:
right
;
vertical-align
:
middle
;
}
.RadCalendar_Eil .rcMain .rcRow a,
.RadCalendar_Eil .rcMain .rcRow span
{
display
:
block
;
padding
:
1px
5px
1px
0
;
text-decoration
:
none
;
color
:
#333
;
}
.RadCalendar_Eil .rcPreview .rcRow a
{
outline
:
none
;
}
.RadCalendar_Eil .rcMain .rcWeekend a
{
color
:
#666
;
}
.RadCalendar_Eil .rcRow .rcToday
{
border-color
:
#898989
;
}
.RadCalendar_Eil .rcMain .rcOtherMonth a
{
color
:
#898989
;
}
.RadCalendar_Eil .rcMain .rcOutOfRange span
{
color
:
#898989
;
cursor
:
default
;
}
.RadCalendar_Eil .rcRow .rcHover
{
border-color
:
#c4c4c4
#b2b2b2
#9e9e9e
;
background
:
#c5c5c5
0
-1600px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
}
.RadCalendar_Eil .rcRow .rcSelected
{
border-color
:
#8d8d8d
#7d7d7d
#6c6c6c
;
background
:
#828282
0
-1700px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
}
.RadCalendar_Eil .rcMain .rcRow .rcSelected a
{
color
:
#fff
;
}
/*multimonth view*/
table.RadCalendarMultiView_Eil
{
width
:
auto
;
}
.RadCalendarMultiView_Eil .rcTitlebar
{
border-color
:
#9a9a9a
#9c9c9c
#9c9c9c
;
background
:
#c5c5c5
0
-1199px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
}
.RadCalendarMultiView_Eil .rcTitlebar table
{
border
:
1px
solid
;
border-color
:
#fdfdfd
#f3f3f3
#e7e7e7
;
line-height
:
27px
;
}
.RadCalendarMultiView_Eil .rcTitlebar .rcFastPrev:hover
{
background-position
:
1px
-647px
;
}
.RadCalendarMultiView_Eil .rcTitlebar .rcPrev:hover
{
background-position
:
4px
-747px
;
}
.RadCalendarMultiView_Eil .rcTitlebar .rcNext:hover
{
background-position
:
3px
-847px
;
}
.RadCalendarMultiView_Eil .rcTitlebar .rcFastNext:hover
{
background-position
:
1px
-947px
;
}
.RadCalendarMultiView_Eil .rcMain
{
border-color
:
#9b9b9b
;
}
.RadCalendarMultiView_Eil .rcCalendar
{
width
:
220px
;
border
:
1px
solid
#868686
;
padding
:
0
;
}
.RadCalendarMultiView_Eil .rcMainTable .rcTitle
{
border
:
0
;
border-bottom
:
1px
solid
#c4c4c4
;
padding
:
0
0
2px
;
background
:
#eaeaea
0
-1000px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
text-align
:
center
;
line-height
:
22px
;
}
/*month view*/
table.RadCalendarMonthView_Eil
{
border-collapse
:
separate
;
border
:
1px
solid
#979797
;
background
:
#fff
;
font-family
:
Arial
;
font-size
:
8pt
;
}
table.RadCalendarMonthView_Eil td
{
border
:
0
;
padding
:
5px
2px
0
;
}
.RadCalendarMonthView_Eil #rcMView_Feb,
.RadCalendarMonthView_Eil #rcMView_Apr,
.RadCalendarMonthView_Eil #rcMView_Jun,
.RadCalendarMonthView_Eil #rcMView_Aug,
.RadCalendarMonthView_Eil #rcMView_Oct,
.RadCalendarMonthView_Eil #rcMView_Dec
{
border-right
:
1px
solid
#e0e0e0
;
}
.RadCalendarMonthView_Eil a
{
display
:
block
!important
;
padding
:
2px
4px
;
text-align
:
center
;
text-decoration
:
none
;
color
:
#333
;
}
.RadCalendarMonthView_Eil .rcSelected a
{
border
:
1px
solid
!important
;
border-color
:
#8d8d8d
#7d7d7d
#6c6c6c
;
padding
:
1px
3px
;
background
:
#828282
0
-1700px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
color
:
#fff
;
}
.RadCalendarMonthView_Eil #rcMView_PrevY a,
.RadCalendarMonthView_Eil #rcMView_NextY a
{
display
:
block
!important
;
width
:
17px
;
height
:
14px
;
overflow
:
hidden
!important
;
margin
:
0
auto
;
background
:
transparent
no-repeat
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
text-indent
:
-2222px
;
text-align
:
center
;
text-decoration
:
none
;
color
:
#ccc
;
}
.RadCalendarMonthView_Eil #rcMView_PrevY a
{
background-position
:
7px
-196px
;
}
.RadCalendarMonthView_Eil #rcMView_NextY a
{
background-position
:
7px
-496px
;
}
.RadCalendarMonthView_Eil .rcButtons
{
padding
:
6px
7px
5px
;
text-align
:
center
;
}
.RadCalendarMonthView_Eil input
{
border
:
1px
solid
;
border-color
:
#a7a7a7
#7b7b7b
#7b7b7b
#a7a7a7
;
padding
:
0
;
background
:
#e9e9e9
0
-2300px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
color
:
#000
;
font-family
:
Arial
;
font-size
:
8pt
;
cursor
:
pointer
;
}
.RadCalendarMonthView_Eil #rcMView_Today
{
margin
:
0
0.4em
0
0
;
}
.RadCalendarMonthView_Eil #rcMView_OK
{
padding
:
0
0.2em
;
}
/*time view*/
table.RadCalendarTimeView_Eil
{
border-collapse
:
separate
;
border
:
1px
solid
#868686
;
background
:
#fff
;
font-family
:
Arial
;
font-size
:
8pt
;
}
.RadCalendarTimeView_Eil th
{
border
:
0
;
border-bottom
:
1px
solid
#c4c4c4
;
padding
:
0
0
1px
;
background
:
#eaeaea
0
-1000px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
color
:
#000
;
text-align
:
center
;
cursor
:
default
;
line-height
:
23px
;
font-family
:
Arial
;
font-size
:
8pt
;
}
table.RadCalendarTimeView_Eil td
{
border
:
0
;
border-left
:
1px
solid
#c5c5c5
;
padding
:
2px
2px
3px
;
}
table.RadCalendarTimeView_Eil td:first-child
{
border-left
:
0
;
}
.RadCalendarTimeView_Eil a
{
display
:
block
!important
;
padding
:
2px
6px
;
text-align
:
center
;
color
:
#333
;
text-decoration
:
none
;
}
.RadCalendarTimeView_Eil td.rcSelected a
{
border
:
1px
solid
;
border-color
:
#8d8d8d
#7d7d7d
#6c6c6c
;
padding
:
1px
5px
;
background
:
#828282
0
-1700px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
color
:
#fff
;
}
.RadCalendarTimeView_Eil td.rcHover a
{
border
:
1px
solid
;
border-color
:
#c4c4c4
#b2b2b2
#9e9e9e
;
padding
:
1px
5px
;
background
:
#c5c5c5
0
-1600px
repeat-x
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
);
color
:
#000
;
}
.RadCalendarTimeView_Eil .rcFooter
{
border
:
0
;
border-top
:
1px
solid
#c5c5c5
;
padding
:
0
;
}
/*pickers*/
.RadPicker_Eil,
.RadPicker_Eil td
{
vertical-align
:
middle
;
}
.RadPicker_Eil .RadInput
{
vertical-align
:
baseline
!important
;
}
.RadPicker_Eil .rcTable
{
table-layout
:
auto
;
}
.RadPicker_Eil table.rcTable,
.RadPicker_Eil table.rcTable td
{
border
:
0
;
margin
:
0
;
padding
:
0
;
}
.RadPicker_Eil table.rcTable .rcInputCell
{
padding
:
0
4px
0
0
;
}
.RadPicker_Eil td a
{
position
:
relative
!important
;
/*FF*/
outline
:
none
!important
;
/*FF*/
z-index
:
2
!important
;
/*Opera*/
margin
:
0
2px
!important
;
text-decoration
:
none
!important
;
}
* html .RadPicker_Eil td a{
position
:
static
}
/*IE6*/
*+html .RadPicker_Eil td a{
position
:
static
}
/*IE7*/
.RadPicker_Eil .rcCalPopup,
.RadPicker_Eil .rcTimePopup
{
display
:
block
!important
;
overflow
:
hidden
!important
;
width
:
22px
!important
;
height
:
22px
!important
;
background
:
url
(
'../../Pages/Images/SKIN/Calendar/sprite.gif'
)
no-repeat
;
text-indent
:
-2222px
;
text-align
:
center
;
}
.RadPicker_Eil .rcCalPopup,
.RadPicker_Eil .rcDisabled.rcCalPopup:hover
{
background-position
:
0
0
;
}
.RadPicker_Eil .rcCalPopup:hover,
.RadPicker_Eil .rcCalPopup:focus,
.RadPicker_Eil .rcCalPopup:active
{
background-position
:
0
-50px
;
}
.RadPicker_Eil .rcTimePopup,
.RadPicker_Eil .rcDisabled.rcTimePopup:hover
{
background-position
:
0
-100px
;
}
.RadPicker_Eil .rcTimePopup:hover,
.RadPicker_Eil .rcTimePopup:focus,
.RadPicker_Eil .rcTimePopup:active
{
background-position
:
0
-150px
;
}
.RadPicker_Eil .rcDisabled,
.RadCalendarMonthView_Eil .rcDisabled
{
opacity:
0.5
;
filter:alpha(opacity=
50
);
}
/*rtl*/
.RadCalendarRTL_Eil .rcTitlebar .rcFastPrev
{
background-position
:
1px
-497px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcFastPrev:hover
{
background-position
:
1px
-547px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcPrev
{
background-position
:
3px
-397px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcPrev:hover
{
background-position
:
3px
-447px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcNext
{
background-position
:
4px
-297px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcNext:hover
{
background-position
:
4px
-347px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcFastNext
{
background-position
:
1px
-197px
;
}
.RadCalendarRTL_Eil .rcTitlebar .rcFastNext:hover
{
background-position
:
1px
-247px
;
}
.RadCalendarMultiViewRTL_Eil .rcTitlebar .rcFastPrev:hover
{
background-position
:
1px
-947px
;
}
.RadCalendarMultiViewRTL_Eil .rcTitlebar .rcPrev:hover
{
background-position
:
3px
-847px
;
}
.RadCalendarMultiViewRTL_Eil .rcTitlebar .rcNext:hover
{
background-position
:
4px
-747px
;
}
.RadCalendarMultiViewRTL_Eil .rcTitlebar .rcFastNext:hover
{
background-position
:
1px
-647px
;
}
Please take me out of this