Calendar

by kadymov

CSS

body {
    font: 12px/12px Arial;
}

.calWeekTable {
    width: 100%;
    border-collapse: collapse;
}

.calWeekTable tr:nth-child(odd) {
    background: #eee;
}

.calWeekTable td {
    width: 12%;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
    vertical-align: middle;
}

.eventBlock {
    background: #dee;
    height: 20px;
    width: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
    border: 1px solid #9aa;
    overflow: hidden;
    word-wrap: break-word;
    cursor: default;
}

.eventBlock:hover {
    z-index: 99 !important;
    border: 1px solid #acc;
    overflow: visible;
}

.eventBlock:hover span {
    background: #fff;
    border: 1px solid #acc;
    padding: 5px;
    white-space: normal;
    display: block;
    position: absolute;
    margin: 5px;
}

JavaScript

var PREFIX = "calendarWeek_";

function getDateStrFormat(date) {
	return PREFIX + date.getDate() + "_" + date.getMonth() + "_" +
		date.getFullYear() + "_" + date.getHours() + "_" +
		(date.getMinutes() < 30 ? "00" : "30");
}

function getCellByDate(date, context) {
	if (context) {
		return $(context).find("." + getDateStrFormat(date)+":first");
	} else {
		return $("." + getDateStrFormat(date)+":first");
	}
}

function createCalWeekTable(startDay) {
	var table = $("<table />", {"class" : "calWeekTable"}),
		day = new Date(startDay),
		tableHtml = "";
		
	day.setHours(0);
	day.setMinutes(0);
	day.setSeconds(0);
	
	var classArray = [];
	
	for (var d = 0; d < 7; d++) {
        classArray[d] = [];
		for (var t = 0; t < 48; t++) {
				classArray[d][t] = getDateStrFormat(day);
				day.setMinutes(day.getMinutes() + 30);
		}
	}
	
	for (var t = 0; t < 48; t++) {
        var time = Math.floor(t / 2) + (t%2 === 0 ? ":00" : ":30");
        tableHtml += "<tr><td>"+time+"</td>";
        for (var d = 0; d < 7; d++) {
            tableHtml += "<td class='"+classArray[d][t]+"'></td>";
        }
        tableHtml += "</tr>";
    }
    
    table.append(tableHtml);
    return table;
}

var table = createCalWeekTable(new Date("21 May 2013 10:32"));
$("body").append(table);

function createEventBlock(eventStart, eventEnd, content, text, pos, count) {
	var start = getCellByDate(eventStart, content),
		end = getCellByDate(eventEnd, content),
        el = $("<div />", { "class" : "eventBlock", html : "<span></span>"}),
        pos = pos || 0,
        count = count || 0;
	el.find("span").text(text);	
	el.appendTo(start);
    
    var height = end.offset().top + end.outerHeight() - start.offset().top;
    el.height(height);
    
    
    if (count) {
        el.width(100/count+"%");
        el.css({ "margin-left" : 100/count*pos+"%" });
    } else {
        el.width(100-pos*20+"%");
        el.css({ "margin-left" : pos*20+"%", "z-index" : pos+1 });
    }
}


createEventBlock(new Date("21...