Inserting SVG element into calendar cell

[Jared]

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?

[Venelin]

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

[Jared]

I appreciate the response.