RadCalendar Custom Skin Issue

2 posts, 0 answers
  1. Bernard Bobinski
    Bernard Bobinski avatar
    4 posts
    Member since:
    Dec 2009

    Posted 14 Aug 2013 Link to this post

    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>
     
    <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.
  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 19 Aug 2013 Link to this post

    Hello Bernard,

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top