First question on stackoverflow, hope it's not too boneheaded. I've been trying to figure out a way to display a calendar with split event days. What I came up with was using an SVG graphic placed with inline css as a background for the specific calendar table cell in order to split days that have a split. It works wonderfully in Firefox and Chrome but the graphics do not display in Internet explorer (I've tried 9 and 10 but not 11).
The calendar is first generated with javascript and events are placed by adding css classes to targeted cells from JSON data.
Here is a small snip of the a CSS classes being used to apply the background, full example with the HTML in the fiddle:
.calendar td {
position:relative;
}
.calendar .split {
background-repeat:no-repeat;
background-position: top left;
background-size: 100% 100%;
}
.calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}
Here is the fiddle containing the HTML and CSS that illustrates the issue:
- http://jsfiddle.net/0mspvexg/2/
Running the fiddle in Firefox and chrome shows the split days properly but Internet explorer 9, 10, (11?) does not display the split days.
I have looked at similar questions such as the following but have not yet found any clear solutions:
- SVG background image in IE9
- Inline SVG not working as background-image in IE
Anyone have any experience with getting Internet explorer to display inline SVG as a background or see something obvious I'm overlooking or maybe I'm approaching this the wrong way. Thanks!
