This is a migrated thread and some comments may be shown as answers.

Calendar / Datepicker Skins

5 Answers 180 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 06 May 2008, 02:23 PM

Hi Konstantin

Yes the samples following your link work fine. The .ASPX contains the following:

<telerik:RadScriptManager ID="ScriptManager1" runat="server"/>

<div>

<telerik:RadDatePicker ID="dtX" runat="server" Skin="Vista">

</telerik:RadDatePicker>

<telerik:RadCalendar ID="calX" runat="server" Skin="Vista"/>

</div>

</form>

and the rendered HTML (with viewstate removed) is:

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Untitled Page</TITLE><LINK href="App_Themes/UKCRN/Master.css" originalAttribute="href" originalPath="App_Themes/UKCRN/Master.css" type=text/css rel=stylesheet><LINK href="App_Themes/UKCRN/Wizard.css" originalAttribute="href" originalPath="App_Themes/UKCRN/Wizard.css" type=text/css rel=stylesheet><LINK title="Telerik stylesheet" href="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHj5a8MXIjsM6ZY2PHmEfmusNjsmwxooC6ZIdzt3DfC_Gw2&t=633438057600000000" originalAttribute="href" originalPath="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHj5a8MXIjsM6ZY2PHmEfmusNjsmwxooC6ZIdzt3DfC_Gw2&t=633438057600000000" type=text/css rel=stylesheet><LINK title="Telerik stylesheet" href="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRvwCnDix74Ax8Wx9FlcqZ5A2&t=633438057600000000" originalAttribute="href" originalPath="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRvwCnDix74Ax8Wx9FlcqZ5A2&t=633438057600000000" type=text/css rel=stylesheet></HEAD>

<BODY>

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

//]]>

</SCRIPT>

//<![CDATA[

if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');

//]]>

</SCRIPT>

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));

Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);

//]]>

</SCRIPT>

<DIV>

<TBODY>

<TR>

<TBODY>

<TR>

<TBODY>

<TR>

<TD><A id=dtX_calendar_NN title=">" href="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" originalAttribute="href" originalPath="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" alt=">" src="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRUl_VYy5fZMk5YTt0RuP1hUzytyuVdDFseacAvfl-6bM1&t=633438057600000000"></A></TD>

<TD><A id=dtX_calendar_FNN title=">>" href="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" originalAttribute="href" originalPath="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" alt=">>" src="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRHLTnkq3fyKBsYUJs6SebdRy2e7LnIsHaPxokBpSifEU1&t=633438057600000000"></A></TD></TR></TBODY></TABLE></TD></TR>

<TR>

<TBODY>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

<TBODY>

<TR>

<TBODY>

<TR>

<TD><A id=calX_NN title=">" href="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" originalAttribute="href" originalPath="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" alt=">" src="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRUl_VYy5fZMk5YTt0RuP1hUzytyuVdDFseacAvfl-6bM1&t=633438057600000000"></A></TD>

<TD><A id=calX_FNN title=">>" href="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" originalAttribute="href" originalPath="#"><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" alt=">>" src="/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRHLTnkq3fyKBsYUJs6SebdRy2e7LnIsHaPxokBpSifEU1&t=633438057600000000"></A></TD></TR></TBODY></TABLE></TD></TR>

<TR>

<TBODY>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

<TR>

//<![CDATA[

Sys.Application.initialize();

Sys.Application.add_init(function() {

$create(Telerik.Web.UI.RadDateInput, {"_originalValue":"","_postBackEventReferenceScript":"__doPostBack(\u0027dtX\u0027,\u0027\u0027)","clientStateFieldID":"dtX_dateInput_ClientState","dateFormat":"dd/MM/yyyy","dateFormatInfo":{"DayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"MonthNames":["January","February","March","April","May","June","July","August","September","October","November","December",""],"AbbreviatedDayNames":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"AbbreviatedMonthNames":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"AMDesignator":"AM","PMDesignator":"PM","DateSeparator":"/","TimeSeparator":":","FirstDayOfWeek":1,"DateSlots":{"Month":1,"Year":2,"Day":0},"ShortYearCenturyEnd":2029,"TimeInputOnly":false},"displayDateFormat":"dd/MM/yyyy","enabled":true,"incrementSettings":{InterceptArrowKeys:true,InterceptMouseWheel:true,Step:1},"invalidStyleDuration":100,"styles":{HoveredStyle: ["width:100%;", "radHoverCss_Vista"],InvalidStyle: ["width:100%;", "radInvalidCss_Vista"],DisabledStyle: ["width:100%;", "radDisabledCss_Vista"],FocusedStyle: ["width:100%;", "radFocusedCss_Vista"],EmptyMessageStyle: ["width:100%;", "radEmptyMessageCss_Vista"],ReadOnlyStyle: ["width:100%;", "radReadOnlyCss_Vista"],EnabledStyle: ["width:100%;", "radEnabledCss_Vista"]}}, null, null, $get("dtX_dateInput"));

});

Sys.Application.add_init(function() {

$create(Telerik.Web.UI.RadCalendar, {"_DayRenderChangedDays":{},"_FormatInfoArray":[["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["January","February","March","April","May","June","July","August","September","October","November","December",],["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",],"dd MMMM yyyy HH:mm:ss","dd MMMM yyyy","HH:mm:ss","dd MMMM","ddd, dd MMM yyyy HH\':\'mm\':\'ss \'GMT\'","dd/MM/yyyy","HH:mm","yyyy\'-\'MM\'-\'dd\'T\'HH\':\'mm\':\'ss","yyyy\'-\'MM\'-\'dd HH\':\'mm\':\'ss\'Z\'","MMMM yyyy","AM","PM","/",":",1],"_ViewRepeatableDays":{},"_ViewsHash":{dtX_calendar_Top : [[2008,5,1], 1]},"_calendarWeekRule":0,"_firstDayOfWeek":7,"_postBackCall":"__doPostBack(\u0027dtX$calendar\u0027,\u0027@@\u0027)","clientStateFieldID":"dtX_calendar_ClientState","enabled":true,"monthYearNavigationSettings":["Today","OK","Cancel","Date is out of range.","False"],"skin":"Vista","specialDaysArray":[],"stylesHash":{DayStyle: ["", "radCalDefault_Vista"],CalendarTableStyle: ["", "TableLayout_Vista"],OtherMonthDayStyle: ["", "otherMonth_Vista"],TitleStyle: ["", "titlebar_Vista"],SelectedDayStyle: ["", "radCalSelect_Vista"],SelectorStyle: ["", "DaysOfWeek_Vista"],DisabledDayStyle: ["", "radCalDisable_Vista"],OutOfRangeDayStyle: ["", "outOfRange_Vista"],WeekendDayStyle: ["", "radCalWeekendDefault_Vista"],DayOverStyle: ["", "radCalHover_Vista"],FastNavigationStyle: ["", "MonthYearFastNav_Vista"]}}, null, null, $get("dtX_calendar"));

});

Sys.Application.add_init(function() {

$create(Telerik.Web.UI.RadDatePicker, {"_PopupButtonSettings":{ ResolvedImageUrl : "/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRis_Y3C2SyZ1cMdUoMXFWgAIJEJ3RR-zcICAX87VjBUU1&t=633438057600000000", ResolvedHoverImageUrl : "/WebResource.axd?d=J0aT66QIW5blWvGEw6n4vecc3GisiCVzaCczPUobMHgSt8JDNeDsFuhC0yYs-ehRis_Y3C2SyZ1cMdUoMXFWgNuGX7ND3V9Ikru2GhYEYbY1&t=633438057600000000"},"_popupControlID":"dtX_popupButton","clientStateFieldID":"dtX_ClientState","focusedDate":"2008-05-06-00-00-00"}, null, {"calendar":"dtX_calendar","dateInput":"dtX_dateInput"}, $get("dtX"));

});

Sys.Application.add_init(function() {

$create(Telerik.Web.UI.RadCalendar, {"_DayRenderChangedDays":{},"_FormatInfoArray":[["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["January","February","March","April","May","June","July","August","September","October","November","December",],["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",],"dd MMMM yyyy HH:mm:ss","dd MMMM yyyy","HH:mm:ss","dd MMMM","ddd, dd MMM yyyy HH\':\'mm\':\'ss \'GMT\'","dd/MM/yyyy","HH:mm","yyyy\'-\'MM\'-\'dd\'T\'HH\':\'mm\':\'ss","yyyy\'-\'MM\'-\'dd HH\':\'mm\':\'ss\'Z\'","MMMM yyyy","AM","PM","/",":",1],"_ViewRepeatableDays":{},"_ViewsHash":{calX_Top : [[2008,5,1], 1]},"_calendarWeekRule":0,"_firstDayOfWeek":7,"_postBackCall":"__doPostBack(\u0027calX\u0027,\u0027@@\u0027)","clientStateFieldID":"calX_ClientState","enabled":true,"monthYearNavigationSettings":["Today","OK","Cancel","Date is out of range.","False"],"skin":"Vista","specialDaysArray":[],"stylesHash":{DayStyle: ["", "radCalDefault_Vista"],CalendarTableStyle: ["", "TableLayout_Vista"],OtherMonthDayStyle: ["", "otherMonth_Vista"],TitleStyle: ["", "titlebar_Vista"],SelectedDayStyle: ["", "radCalSelect_Vista"],SelectorStyle: ["", "DaysOfWeek_Vista"],DisabledDayStyle: ["", "radCalDisable_Vista"],OutOfRangeDayStyle: ["", "outOfRange_Vista"],WeekendDayStyle: ["", "radCalWeekendDefault_Vista"],DayOverStyle: ["", "radCalHover_Vista"],FastNavigationStyle: ["", "MonthYearFastNav_Vista"]}}, null, null, $get("calX"));

});

//]]>

</SCRIPT>

</FORM></BODY></HTML>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Calendar / Datepicker Skins

5 Answers, 1 is accepted