Canvas Calendar Timeline

HTML

<script src="https://dl.dropboxusercontent.com/u/938212/kinetic-v4.3.3.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/938212/date.js"></script>
<script src="https://dl.dropboxusercontent.com/u/938212/calendar.js"></script>
<div id="container">
		</div>

CSS

html
			{
			  width:  100%;
			  height: 100%;
			  margin: 0px;
			}
			
			body 
			{
			  width:  100%;
			  height: 100%;
			  margin: 0px;
			}
			
			#CalendarContainer
			{
				/*height: 90%;*/
				height: 500px;
				background-image:url('http://www.socwall.com/images/wallpapers/31009-3759x2516.jpg');
				background-color:#000;
				background-repeat:no-repeat;
				background-size:cover;
			}

			#CalendarContainerMiniMap
			{
				/*height: 10%;*/
				height:100px;
				background-image:url('http://www.socwall.com/images/wallpapers/31009-3759x2516.jpg');
				background-color:#000;
				background-repeat:no-repeat;
				background-size:cover;
			}

			.Calendar
			{
				/*width: 100%;*/
				width: 1000px;
				margin: 0px;
				/*border: 1px solid black;*/
			}

			#container{
				width: 1000px;
				height: 600px;
			}

JavaScript

var data = {
			2013: {
				4: {
					15: [
						{
							Id: 1,
							Size: 100,
							Ycoord: 0,
							Color: "rgba(255,0,0,1)",
							Text: "Bugs Bunny",
							Type: "point",
							HoverText: "Hover Text for Bugs Bunny!"
						}
					],
					16: [
						{
							Id: 2,
							Size: 25,
							Ycoord: 25,
							Color: "rgba(0,0,255,1)",
							Text: "Homer Simpson",
							Type: "point",
							HoverText: "Hover Text for Homer Simpson!"
						}
					],
					17: [
						{
							Id: 3,
							Size: 50,
							Ycoord: 50,
							Color: "rgba(128,0,128,1)",
							Text: "Mickey Mouse",
							Type: "point",
							HoverText: "Hover Text for Mickey Mouse!"
						}
					],
					18: [
						{
							Id: 4,
							Size: 75,
							Ycoord: 75,
							Color: "rgba(255,127,0,1)",
							Text: "Bart Simpson",
							Type: "point",
							HoverText: "Hover Text for Bart Simpson!"
						}
					],
					19: [
						{
							Id: 5,
							Size: 100,
							Ycoord: 100,
							Color: "rgba(150,75,0,1)",
							Text: "Charlie Brown",
							Type: "point",
							HoverText: "Hover Text for Charlie Brown! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed neque vel arcu porta facilisis sagittis non odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Pellentesque pulvinar varius massa, id scelerisque orci dapibus eget. Cras auctor arcu blandit felis condimentum viverra. Nullam accumsan nunc sit amet mi consequat tincidunt. In egestas, nibh eget tincidunt blandit, lorem dui convallis orci, eget tincidunt nibh diam ac libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel lorem eleifend leo mattis luctus ut et leo. Donec a mi sapien. Ut iaculis dui a felis luctus varius scelerisque mauris varius. Donec ultricies est et sapien bibendum id iaculis diam fermentum."
						}
					]
				}
			}
		};

var calendar = new Calendar({ data: data, container: $("#container") });