Inserting SVG element into calendar cell

3 posts, 0 answers
  1. Jared
    Jared avatar
    10 posts
    Member since:
    Sep 2015

    Posted 08 Dec 2015 Link to this post

    Hello,

     I'm trying to insert SVG elements into my calendar day cells, to color the cell with two colors split down a diagonal (using SVG polygons). However, when I insert this SVG element with 100% height and 100% width, the cell expands to quite a bit larger than it's original size. For reference, I'm trying to insert something like this: https://jsfiddle.net/qgLvbhn8/

    The SVG elements are inserted on the server side during the OnDayRender event as follows:

    Literal styledcell = new Literal();

    styledcell.Text = "<svg width=\"100%\" height=\"100%\" style=\"\" >" + "</svg>";

    e.Cell.Controls.Add(styledcell);

     

    The calendar itself is being given a static size, but it is expanding way past that size when I insert the SVG elements into the day cells. The calendar is being used as a full-year calendar, here is the markup:

    <telerik:RadCalendar
                ID="RadCalendar"
                runat="server"
                FocusedDate="2015-01-01"
                TitleFormat="yyyy"
                SingleViewRows="53"
                SingleViewColumns="7"
                EnableWeekends="True"
                FastNavigationNextText="&amp;lt;&amp;lt;"
                ResolvedRenderMode="Classic"
                SelectedDate=""
                OnDayRender="CustomizeDay"
                EnableNavigation="False"
                RangeSelectionMode="OnKeyHold"
                EnableMonthYearFastNavigation="False"
                NavigationCaption=""
                ShowOtherMonthsDays="True"
                ShowRowHeaders="true"
                ShowFastNavigationButtons="False"
                Width="180px"
                Height="900px"
                Style="padding-bottom: 20px"
                CssClass="dtCal"
                >
                <HeaderTemplate>
                    <asp:Label ID="CalLabel" CssClass="calendar-label" runat="server" Text="" Width="100%" Font-Bold="true" Font-Size="X-Large" ForeColor="Black"></asp:Label>
                </HeaderTemplate>
                <WeekendDayStyle CssClass="rcWeekend" />
                <CalendarTableStyle CssClass="rcMainTable" />
                <OtherMonthDayStyle CssClass="rcOtherMonth" />
                <OutOfRangeDayStyle CssClass="rcOutOfRange" />
                <DisabledDayStyle CssClass="rcDisabled" />
                <SelectedDayStyle CssClass="rcSelected" />
                <DayOverStyle CssClass="rcHover" />
                <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Default" />
                <ViewSelectorStyle CssClass="rcViewSel" />
                <ClientEvents OnDateSelecting="formatSelect"/>
            </telerik:RadCalendar>

    I've tried to statically size the cells to their approximate dimensions before they are enlarged by inserting the SVG element using CSS:

    .dtCal .rcMain  .rcMainTable .rcRow  td{
        height:18.4px;
        width:21.6px;
    }

     This has no effect in Chrome, and only restricts the height in IE9.

     

    I'm not sure what to do at this point. Is there a way I can set the size of the day cells statically? Or is there a way I can insert elements into the cells without the size of the cell blowing up?

  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 11 Dec 2015 Link to this post

    Hello Jared,

    I was able to replicate the issue but only under one circumstance: if the date cell has no explicit height, which in turns is expected. However after setting height in pixels the problem with the big height was resolved. I am attaching my test page, check it out.

    Regards,
    Venelin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jared
    Jared avatar
    10 posts
    Member since:
    Sep 2015

    Posted 11 Dec 2015 in reply to Venelin Link to this post

    I appreciate the response.
Back to Top