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="&lt;&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 Answers, 1 is accepted
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
Rank 1