Rank 2
I am attempting to implement a custom skin with the RadCalendar control but I cannot seem to get it to display correctly. I would like to customize the ‘Silk” skin for the calendar but I have run into a few hurdles before I can continue any further. Once the custom skin is implemented (EnableEmbeddedSkins="False" Skin="Silk") the Calendar has some corrupted display issues. The navigation buttons do not display correctly and the Days of Week align to the right as opposed to being centered. Interestingly the calendar works fine with embedded default skin. It does this in both Firefox and IE10. Has anyone else run into this issue and if so were you able to rectify the situation? I have modified several controls – Menu, TabStrip, ToolBar, and Grid without any problems.
Additional:
System: Windows 8.0 64
Visual Studios 2012
IIS 8.0
Web App is built in HTML5 .Net 4.0 (Default Classic in VS 2012)
RadControls for ASP.NET AJAX Q2 2013 2.7
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WhoCalendar.aspx.cs" Inherits="En4cer.eSysAdmin.Users.WhoCalendar" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Calendar</title> <link href="../../Skins/Calendar/Blue/Calendar.Silk.css" rel="stylesheet" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <div> <telerik:RadCalendar ID="RadCalendar1" runat="server" EnableEmbeddedSkins="false" Skin="Silk" MultiViewColumns="2"></telerik:RadCalendar> </div> </form></body></html>The CSS file is the Calendar.Silk.css from RadControls for ASP.NET AJAX Q2 2013 unmodified. Attached is a jpg image of the control.
1 Answer, 1 is accepted
Your question has been answered in the support ticket you send recently. I'll post my answer in this thread for the community, and if someone else encounter similar problems he can refer to this thread.
In order to create a custom skin for RadCalendar based on Silk skin you can use the following approach.
ASPX:
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="false"> <StyleSheets> <telerik:StyleSheetReference Path="Silk/Calendar.Silk.css" /> <telerik:StyleSheetReference Path="Silk/Input.Silk.css" /> </StyleSheets></telerik:RadStyleSheetManager><telerik:RadCalendar ID="rc1" ShowRowHeaders="false" runat="server" nableEmbeddedSkins="false" Skin="Silk"></telerik:RadCalendar>and in the web.config:
<appSettings> <add key="Telerik.Web.UI.StyleSheetFolders" value="~/Silk/" /></appSettings>I also attach a sample project that is illustrating the approach.
Regards,
Venelin
Telerik