Skip to content

Instantly share code, notes, and snippets.

@rleddy

rleddy/index.html

Last active August 17, 2016 03:40
Show Gist options
  • Save rleddy/f06005e9b6b132ece4ac4d4d0efbc375 to your computer and use it in GitHub Desktop.
Save rleddy/f06005e9b6b132ece4ac4d4d0efbc375 to your computer and use it in GitHub Desktop.
Download ZIP
This is a date range picker done totally in SVG. This is known to work in Google Chrome at this time.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
pointer-events: all;
fill: none;
stroke: #666;
stroke-opacity: 0.2;
}
.active square {
stroke: #000;
stroke-width: 2px;
}
html, body { margin:0; padding:0; overflow:hidden }
</style>
<style>
.ticks {
font: 10px sans-serif;
}
.track,
.track-inset,
.track-overlay {
stroke-linecap: round;
}
.track {
stroke: #000;
stroke-opacity: 0.3;
stroke-width: 10px;
}
.track-inset {
stroke: #ddd;
stroke-width: 8px;
}
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
cursor: crosshair;
}
.handle {
fill: #fff;
stroke: #000;
stroke-opacity: 0.5;
stroke-width: 1.25px;
}
</style>
<svg id="mainsvg" width="0" height="0" ></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var sliderHandleMap = {}; /// a quick fix
var sliderFunctionMap = {};
var gCurrentSlider = "";
var g_calRange = {
"IntervalStart" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalEnd",
"exclOp" : function (a,b) { return( a <= b ); },
"time" : null
},
"IntervalEnd" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalStart",
"exclOp" : function (a,b) { return( a >= b ); },
"time" : null
}
};
var g_numOfMonth = {
"January" : 0,
"February" : 1,
"March" : 2,
"April" : 3,
"May" : 4,
"June" : 5,
"July" : 6,
"August" : 7,
"September" : 8,
"October" : 9,
"November" : 10,
"December" : 11
};
function slide(h,x,handle) {
handle.attr("cx", x(h));
}
g_currentSelectedCalendar = "CalStart";
function update_dateTime(tFacet,txt,whichCal) {
var cal = g_currentSelectedCalendar;
if ( whichCal ) {
cal = whichCal;
}
var saveOld = g_calRange[cal][tFacet];
g_calRange[cal][tFacet] = txt;
var time = new Date( 1*(g_calRange[cal].year), g_numOfMonth[g_calRange[cal].month], g_calRange[cal].day,
g_calRange[cal].CalHours, g_calRange[cal].CalMinutes, g_calRange[cal].CalSeconds );
var excl = g_calRange[cal].exclude;
if ( g_calRange[excl].time == null ) {
g_calRange[cal].time = time;
return(true);
}
if ( g_calRange[cal].exclOp(time,g_calRange[excl].time) ) {
g_calRange[cal].time = time;
return(true);
}
g_calRange[cal][tFacet] = saveOld;
return(false);
}
function setCalDates(calContainer) {
//-------------------------------------------
var yr = calContainer.select("#tspan-year").text();
var mo = calContainer.select("#tspan-month").text();
var moTime = new Date(mo + " 1, " + yr);
var curMo = moTime.getMonth();
while ( moTime.getDay() > 0 ) {
moTime.setDate(moTime.getDate()-1);
}
for ( var i = 0; i < 6; i++ ) {
for ( var j = 0; j < 7; j++ ) {
var tt = calContainer.select("#g_calBox_" + i + "_" + j).selectAll("tspan");
tt.text("" + moTime.getDate());
if ( curMo != moTime.getMonth() ) {
calContainer.select("#g_calBox_" + i + "_" + j).selectAll("rect")
.style("fill",function() {
var rct = d3.select(this);
this["preserve-color"] = rct.style("fill");
return("gray");
})
.style("fill-opacity","0.5");
} else {
calContainer.select("#g_calBox_" + i + "_" + j).selectAll("rect")
.style("fill",function() {
var rct = d3.select(this);
return( this["preserve-color"] ? this["preserve-color"] : rct.style("fill") );
})
.style("fill-opacity","1");
}
moTime.setDate(moTime.getDate()+1);
}
}
}
function toolMonth(monthList) {
monthList.style("visibility","hidden");
var mos = monthList.selectAll("g")
.on("mouseenter", function(){
var color = d3.select(this).select("rect").style("fill");
this["preserve_color"] = color;
d3.select(this).select("rect").style("fill","green");
})
.on("mouseleave", function(){
d3.select(this).select("rect").style("fill",this["preserve_color"]);
})
.on("click",function() {
var month_sel = d3.select(this).attr("id");
var calconP = d3.select(this.parentNode.parentNode);
var calcon = calconP.select("#calendar_widget");
var mo = calcon.select("#tspan-month").text(month_sel);
update_dateTime("month", month_sel );
setCalDates(calcon);
});
}
function addSlider(container,maxDomain,maxRange,sliderID) {
var whichCal = container.attr("id");
var margin = {right: 50, left: 550};
var width = maxRange - margin.left - margin.right;
var height = +container.attr("height");
var x = d3.scaleLinear()
.domain([0, maxDomain])
.range([0, maxRange])
.clamp(true);
var slider = container.append("g")
.attr("id",sliderID)
.attr("class", "slider")
.attr("visibility","hidden")
.attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
slider.append("text").attr("x",x.range()[0]).attr("y",-10).text(sliderID);
slider.append("line")
.attr("class", "track")
.attr("x1", x.range()[0])
.attr("x2", x.range()[1])
.select( function() { return this.parentNode.appendChild(this.cloneNode(true)); } )
.attr("class", "track-inset")
.select( function() { return this.parentNode.appendChild(this.cloneNode(true)); } )
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function () {
sliderFunctionMap[gCurrentSlider]();
}
));
sliderFunctionMap[whichCal + sliderID] = function() {
var h = x.invert(d3.event.x-50);
if ( update_dateTime( sliderID, h, whichCal ) ) {
slide( h , x, sliderHandleMap[whichCal + sliderID] );
}
};
slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.attr("transform", "translate(0," + 18 + ")")
.selectAll("text")
.data(x.ticks(10))
.enter().append("text")
.attr("x", x)
.attr("text-anchor", "middle")
.text(function(d) { return d + "°"; });
var handle = slider.insert("circle", ".track-overlay")
.attr("id","handle_" + sliderID)
.attr("class", "handle")
.attr("r", 9);
sliderHandleMap[whichCal + sliderID] = handle;
return(slider);
}
function hourSelection(hrsClock,svgCalBK) {
var vizState = svgCalBK.select("#CalHours").style("visibility");
hrsClock.raise();
hideAllSliders(svgCalBK);
if ( vizState == "hidden" ) {
var whichCal = svgCalBK.attr("id");
gCurrentSlider = whichCal + "CalHours";
svgCalBK.select("#CalHours").style("visibility","visible");
}
}
function minuteSelection(minsClock,svgCalBK) {
var vizState = svgCalBK.select("#CalMinutes").style("visibility");
minsClock.raise();
hideAllSliders(svgCalBK);
if ( vizState == "hidden" ) {
var whichCal = svgCalBK.attr("id");
gCurrentSlider = whichCal + "CalMinutes";
svgCalBK.select("#CalMinutes").style("visibility","visible");
}
}
function secondSelection(secsClock,svgCalBK) {
var vizState = svgCalBK.select("#CalSeconds").style("visibility");
secsClock.raise();
hideAllSliders(svgCalBK);
if ( vizState == "hidden" ) {
var whichCal = svgCalBK.attr("id");
gCurrentSlider = whichCal + "CalSeconds";
svgCalBK.select("#CalSeconds").style("visibility","visible");
}
}
function hideAllSliders(svgCalBK) {
svgCalBK.select("#CalHours").style("visibility","hidden");
svgCalBK.select("#CalMinutes").style("visibility","hidden");
svgCalBK.select("#CalSeconds").style("visibility","hidden");
}
function toolCalendar(svgCalBK,exclusionId) {
var calContainer = svgCalBK.selectAll("g");
calContainer.attr("exclusion",exclusionId);
calContainer.on("click", ( function(svgCalBKB,exclID) { return(function() {
var calContainer = d3.select(this.parentNode);
var exclusion = d3.select(this.parentNode.parentNode).select("#" + exclID);
var vbox = calContainer.attr("viewBox");
if ( vbox == "0 0 340 600" ) {
calContainer.attr("openstate","closed");
calContainer.lower();
var width = this.parentNode["saveW"];
var height = this.parentNode["saveH"];
calContainer
.attr("width", width)
.attr("height",height)
.attr("viewBox","0 0 500 490");
//var ccg = calContainer.select("#cal-clock-group");
//ccg.attr("transform", this.parentNode["saveCalClockOrigin"] );
for ( var i = 0; i < 6; i++ ) {
for ( var j = 0; j < 7; j++ ) {
calContainer.select("#g_calBox_" + i + "_" + j).selectAll("rect")
.on("mouseenter",null)
.on("mouseenter",null)
.on("click",null);
}
}
hideAllSliders(svgCalBKB);
} else {
if ( !exclusion.empty() ) {
var open = exclusion.attr("openstate");
if ( open === "open" ) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(
"click", /* type */
true, /* canBubble */
true, /* cancelable */
window, /* view */
0, /* detail */
0, /* screenX */
0, /* screenY */
0, /* clientX */
0, /* clientY */
false, /* ctrlKey */
false, /* altKey */
false, /* shiftKey */
false, /* metaKey */
0, /* button */
null); /* relatedTarget */
(exclusion.select("#calendar_widget").node()).dispatchEvent(evt);
}
}
calContainer.attr("openstate","open");
calContainer.raise();
this.parentNode["saveW"] = calContainer.attr("width");
this.parentNode["saveH"] = calContainer.attr("height");
var width = this.parentNode["saveW"];
var height = this.parentNode["saveH"];
calContainer
.attr("width", width*4)
.attr("height",height*8)
.attr("viewBox","0 0 340 600");
g_currentSelectedCalendar = svgCalBKB.attr("id");
var ccg = calContainer.select("#cal-clock-group");
ccg.raise();
//this.parentNode["saveCalClockOrigin"] = ccg.attr("transform");
for ( var i = 0; i < 6; i++ ) {
for ( var j = 0; j < 7; j++ ) {
calContainer.selectAll( "#g_calBox_" + i + "_" + j ).selectAll("rect")
.on("mouseenter",function() {
var boxC = d3.select(this);
if ( boxC.style("fill") == "rgb(255, 255, 255)" ) {
boxC.style("fill","green");
}
})
.on("mouseleave",function() {
var boxC = d3.select(this);
if ( boxC.style("fill") == "rgb(0, 128, 0)" ) {
boxC.style("fill","#ffffff");
}
})
.on("click",(function(calCtr) { return(
function() {
d3.event.stopPropagation();
var boxC = d3.select(this);
var bX = 1*boxC.attr("x");
var bY = 1*boxC.attr("y");
var boxGroup = d3.select(this.parentNode);
var dayTxt = boxGroup.select("tspan").text();
if ( !update_dateTime("day",dayTxt) ) return;
var ccg = calCtr.select("#cal-clock-group");
var groupRow = d3.select(this.parentNode.parentNode);
var t = groupRow.attr("transform");
var y = 0;
if ( t != null ) {
var numberPattern = /[+-]?\d+(\.\d+)?/g;
var els = t.match( numberPattern );
y = 1*els[1];
}
var h = 1*boxC.attr("height");
ccg.attr("transform","translate(" + [ bX - 500, y + h/3 ] + ")");
ccg.raise();
}
);})(calContainer) );
}
}
}
}); })(svgCalBK,exclusionId) );
var calclocks = calContainer.select("#cal-clock-group-background");
calclocks.on("click",function() { d3.event.stopPropagation(); } );
var calclockHour = calContainer.selectAll("#cal-clock-H");
var calclockMin = calContainer.selectAll("#cal-clock-M");
var calclockSecs = calContainer.selectAll("#cal-clock-S");
calclockHour.on("click", (function(svgCalBKB){ return(
function() {
d3.event.stopPropagation();
hourSelection(d3.select(this),svgCalBKB);
} ); })(svgCalBK) );
calclockMin.on("click", (function(svgCalBKB){ return(
function() {
d3.event.stopPropagation();
minuteSelection(d3.select(this),svgCalBKB);
} ); })(svgCalBK) );
calclockSecs.on("click", (function(svgCalBKB){ return(
function() {
d3.event.stopPropagation();
secondSelection(d3.select(this),svgCalBKB);
} ); })(svgCalBK) );
setCalDates(calContainer);
var month_button = calContainer.select("#month_button").on("click", (function(svgCalBKB) {
return(function() {
d3.event.stopPropagation();
var mlist = svgCalBKB.select("#cal-month_list");
mlist.raise();
var vis = mlist.style("visibility") == "hidden" ? "visible" : "hidden";
mlist.style("visibility",vis);
});
})(svgCalBK) );
}
var daysOfWeek = null;
function nestCalendar(selParent,calId,x,y,width,height,exclusivePair) {
selParent.append("svg")
.attr("id",calId)
.attr("x", x )
.attr("y", y )
.attr("width", width)
.attr("height",height)
.attr("viewBox","0 0 500 490")
.attr("preserveAspectRatio","xMinYMin meet");
var svgCal = selParent.select("svg");
d3.request("xcalendar-group.svg",
function(resp) {
var svgCalBK = selParent.select("#" + calId);
svgCalBK.html(resp.response);
toolCalendar(svgCalBK,exclusivePair);
d3.request("month-list.svg",
(function(svgCalB) { return(
function(resp) {
var monthList = svgCalB.append("g").attr("id","cal-month_list").html(resp.response);
var hoursPerDay = addSlider(svgCalB,24,300,"CalHours");
var minutePerHour = addSlider(svgCalB,60,300,"CalMinutes");
var secondsPerMinut = addSlider(svgCalB,60,300,"CalSeconds");
toolMonth(monthList);
}); })(svgCalBK) );
});
}
/* -- // d3 example by Richard Leddy (c) 2016 */
function updateRemove(pSvg,d) {
var ms = pSvg.selectAll("#win-" + d.iam);
ms.remove();
}
function update_control_context(ctxtCtrl,d) {
ctxtCtrl.text(d.iam);
}
var topSvg = d3.select("#mainsvg");
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
wx = w.innerWidth || e.clientWidth || g.clientWidth,
wy = w.innerHeight|| e.clientHeight|| g.clientHeight;
topSvg.attr("width",window.screen.width);
topSvg.attr("height",window.screen.height);
var winCount = 0;
var width = wx,
height = wy,
radius = 200;
var rectsAll = d3.range(6).map(function() {
return {
iam: winCount++,
x: Math.round(Math.random() * (width/2 - radius * 2) + radius),
y: Math.round(Math.random() * (height/2 - radius * 2) + radius),
w : radius,
h : radius/2
};
});
rectsAll.push({
iam: "context",
x: 40,
y: 40,
w : 2*width/3,
h : radius/2
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
function addWindows(pSvg,defRegions) {
var rectangle = pSvg.selectAll("g.windowBox")
.data(defRegions, function(d) { return(d.iam); } )
.enter().append("g")
.attr("id", function(d){ return("win-" + d.iam); } )
.attr("class","windowBox")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
rectangle.attr("deltaX",function(d) { return(0); })
.attr("deltaY",function(d) { return(0); });
// This is the containing box window
rectangle.append("rect")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("height", function(d) { return d.h; })
.attr("width", function(d) { return d.w; })
.attr("cursor", "move")
.style("fill", function(d, i) { return color(i); });
var noDrag = d3.drag()
.on('start', function(d){
d3.select(this.parentNode).raise().classed("active", true);
var ctxtCtrl = d3.select("#data-context-control-text");
update_control_context(ctxtCtrl,d);
})
.on('drag', function(d,i){
})
.on("end", function(d,i){
d3.select(this.parentNode).classed("active", false);
});
// This is the interior box window
rectangle.append("rect")
.attr("x", function(d) { return d.x+1; })
.attr("y", function(d) { return d.y+20; })
.attr("height", function(d) { return d.h-22; })
.attr("width", function(d) { return d.w-2; })
.style("fill", function(d, i) { return "#FAFACC"; })
.call(noDrag);
var dragBox = d3.drag()
.on('start', function(d){
d3.event.sourceEvent.stopPropagation();
var ctxtCtrl = d3.select("#data-context-control-text");
update_control_context(ctxtCtrl,d);
})
.on('drag', function(d,i){
var resizeBox = d3.select(this);
var mx = +resizeBox.attr("x");
var my = +resizeBox.attr("y");
var topLimit = d.y + 20;
var leftLimit = d.x + 20;
mx += d3.event.dx;
if ( d.iam != "context" ) {
my += d3.event.dy;
}
if ( (mx > leftLimit) && (my > topLimit) ) {
resizeBox.attr('x', mx).attr('y', my);
var height = my - d.y;
var width = mx - d.x;
d3.select(this.previousElementSibling)
.attr("x", mx);
d3.select(this.previousElementSibling.previousElementSibling)
.attr("width", width + 10 - 2)
.attr("height", height + 10 - 22);
d3.select(this.previousElementSibling.previousElementSibling.previousElementSibling)
.attr("width", width + 10)
.attr("height", height + 10);
var subView = d3.select(this.parentNode).select("svg");
if ( !subView.empty()) {
var resF = subView.attr("custom-resize");
if ( resF && d.resize ) {
d.resize(subView,d,width,height);
}
}
}
});
rectangle.append("rect")
.attr("x", function(d) { return d.x + d.w - 10; })
.attr("y", function(d) { return d.y; })
.attr("height", 10)
.attr("width", 10)
.attr("fill", "navy" )
.attr("cursor","pointer")
.on("click", function(d,i) {
if ( d.iam == "context" ) return;
var j = rectsAll.findIndex(function(obj){ var res = (obj.iam === d.iam); return res; });
rectsAll.splice(j,1);
updateRemove(pSvg,d);
var rect = d3.select(this);
var cc = rect.attr("fill");
cc = (cc == "navy" )? "green" : "navy";
rect.attr("fill",cc);
});
rectangle.append("rect")
.attr("x", function(d) { return d.x + d.w - 10; })
.attr("y", function(d) { return d.y + d.h - 10; })
.attr("height", 10)
.attr("width", 10)
.style("fill", function(d, i) { return "#993300"; })
.attr("cursor", "nw-resize")
.call(dragBox);
}
function dragstarted(d) {
var dltX = 1*(d3.select(this).attr("deltaX"));
var dltY = 1*(d3.select(this).attr("deltaY"));
d3.select(this).attr("deltaX",d3.event.x - dltX);
d3.select(this).attr("deltaY",d3.event.y - dltY);
d3.select(this).raise().classed("active", true);
var ctxtCtrl = d3.select("#data-context-control-text");
update_control_context(ctxtCtrl,d);
}
function dragged(d) {
var dltX = 1*(d3.select(this).attr("deltaX"));
var dltY = 1*(d3.select(this).attr("deltaY"));
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d3.event.x - dltX, d3.event.y - dltY] + ")"
});
}
function dragended(d, i) {
var dltX = 1*(d3.select(this).attr("deltaX"));
var dltY = 1*(d3.select(this).attr("deltaY"));
d3.select(this).attr("deltaX",d3.event.x - dltX);
d3.select(this).attr("deltaY",d3.event.y - dltY);
d3.select(this).classed("active", false);
}
function renderCell(d) {
return d == null ? null : "M" + d.join("L") + "Z";
}
topSvg.append("rect")
.attr("x",5)
.attr("y",5)
.attr("height",20)
.attr("width",20).attr("fill","orange")
.on("click", function() {
var rect = d3.select(this);
var cc = rect.attr("fill");
cc = cc == "orange" ? "blue" : "orange";
rect.attr("fill",cc);
var newDatum = {
iam: winCount++,
x: Math.round(Math.random() * (width/2 - radius * 2) + radius),
y: Math.round(Math.random() * (height/2 - radius * 2) + radius),
w : radius,
h : radius/2
};
console.log(newDatum);
rectsAll.push(newDatum);
addWindows(topSvg,rectsAll);
});
addWindows(topSvg,rectsAll);
var context_window = topSvg.select("#win-context")
.append("svg")
.attr("id","data-context-control")
.attr("x", function(d){return d.x})
.attr("y", function(d){return d.y})
.attr("width", function(d){return width;})
.attr("height", function(d){return height;})
.attr("custom-resize",function(d) { // clip the content of this window in a particular way.
d.resize = function(subsvg,data,w,h) {
subsvg.attr("width",w);
}
return("true");
})
.append("text")
.attr("id","data-context-control-text")
.attr("stroke","black")
.attr("x", function(d){return 10})
.attr("y", function(d){return 15})
.text(function(d){ return "context"; });
nestCalendar( topSvg.select("#win-context").select("svg"), "IntervalStart", 10, 22, 45*7, 72, "IntervalEnd" );
nestCalendar( topSvg.select("#win-context").select("svg"), "IntervalEnd", 90, 22, 45*7, 72, "IntervalStart" );
</script>
Display the source blob
Display the rendered blob
Raw
month-list.svg
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.90304047;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5009"
width="72.123421"
height="194.41856"
x="1.4515202"
y="2.1411293" />
<g
id="January"
transform="matrix(0.82236426,0,0,0.99239384,-12.351547,-15.04901)">
<rect
y="18.076843"
x="16.398285"
height="17.499292"
width="89.285011"
id="rect5011"
style="fill:#a5e0f6;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.30070549;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text4957"
y="30.02149"
x="19.917934"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="30.02149"
x="19.917934"
id="tspan4959">January</tspan></text>
</g>
<g
id="February"
transform="matrix(0.82236426,0,0,0.99239384,-12.351547,-14.403007)">
<rect
style="fill:#a5f6f0;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.29301414;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5013"
width="89.292702"
height="16.614128"
x="16.39444"
y="35.572998" />
<text
id="text4961"
y="47.341946"
x="19.692932"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
id="tspan4965"
y="47.341946"
x="19.692932">February</tspan></text>
</g>
<g
id="March"
transform="matrix(0.82236426,0,0,0.99239384,-12.351546,-14.040558)">
<rect
y="52.45948"
x="16.388067"
height="15.198298"
width="89.30545"
id="rect5015"
style="fill:#a5f6bb;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text4969"
y="65.368629"
x="19.737932"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="65.368629"
x="19.737932"
id="tspan4971">March</tspan></text>
</g>
<g
id="April"
transform="matrix(0.82236426,0,0,0.99239384,-103.73,6.8004037)">
<rect
style="fill:#c6f6a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5017"
width="89.30545"
height="15.198298"
x="127.50484"
y="47.288292" />
<text
id="text4973"
y="58.34494"
x="131.73972"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="58.34494"
x="131.73972"
id="tspan4975">April</tspan></text>
</g>
<g
id="May"
transform="matrix(0.82236426,0,0,0.99239384,-103.73,-13.945132)">
<rect
y="84.022339"
x="127.50484"
height="15.198298"
width="89.30545"
id="rect5019"
style="fill:#e8f6a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text4977"
y="94.81649"
x="130.85471"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="94.81649"
x="130.85471"
id="tspan4979">May</tspan></text>
</g>
<g
id="June"
transform="matrix(0.82236426,0,0,0.99239384,-12.351546,-14.548143)">
<rect
style="fill:#f6e6a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5021"
width="89.30545"
height="15.198298"
x="16.388067"
y="100.45948" />
<text
id="text4981"
y="113.29363"
x="19.917931"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="113.29363"
x="19.917931"
id="tspan4983">June</tspan></text>
</g>
<g
id="July"
transform="matrix(0.82236426,0,0,0.99239384,-12.351546,-15.075411)">
<rect
y="116.8203"
x="16.388067"
height="15.198298"
width="89.30545"
id="rect5023"
style="fill:#f6c5a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text4985"
y="127.68195"
x="19.917934"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="127.68195"
x="19.917934"
id="tspan4987">July</tspan></text>
</g>
<g
id="August"
transform="matrix(0.82236426,0,0,0.99239384,-12.351546,-15.262163)">
<rect
style="fill:#e9f6a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5025"
width="89.30545"
height="15.198298"
x="16.388067"
y="132.85371" />
<text
id="text4989"
y="143.79785"
x="20.622932"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="143.79785"
x="20.622932"
id="tspan4991">August</tspan></text>
</g>
<g
id="September"
transform="matrix(0.82236426,0,0,0.99239384,-12.351546,-15.024519)">
<rect
y="148.45947"
x="16.388067"
height="15.198298"
width="89.30545"
id="rect5027"
style="fill:#f6d8a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text4993"
y="160.58458"
x="19.259163"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="160.58458"
x="19.259163"
id="tspan4995">September</tspan></text>
</g>
<g
id="October"
transform="matrix(0.82236426,0,0,0.99239384,-12.351547,-15.211782)">
<rect
style="fill:#f6e3a5;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28933966;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5029"
width="89.296379"
height="16.199383"
x="16.392603"
y="165.45386" />
<text
id="text4997"
y="178.90855"
x="19.617931"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#564901;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="178.90855"
x="19.617931"
id="tspan4999">October</tspan></text>
</g>
<g
id="November"
transform="matrix(0.82236426,0,0,0.99239384,-12.351548,-14.879752)">
<rect
y="181.95668"
x="16.390354"
height="15.698805"
width="89.30088"
id="rect5031"
style="fill:#a79751;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28484133;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text5001"
y="195.01108"
x="19.737932"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="195.01108"
x="19.737932"
id="tspan5003">November</tspan></text>
</g>
<g
id="December"
transform="matrix(0.82236426,0,0,0.99239384,-12.351546,-15.048948)">
<rect
style="fill:#5ff7ec;fill-opacity:0.23052961;stroke:#9413e2;stroke-width:0.28027108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect5033"
width="89.30545"
height="15.198298"
x="16.388067"
y="198.45947" />
<text
id="text5005"
y="210.57103"
x="19.767933"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:Didot;-inkscape-font-specification:'Didot, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="210.57103"
x="19.767933"
id="tspan5007">December</tspan></text>
</g>
Display the source blob
Display the rendered blob
Raw
xcalendar-group.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment