Publicado em 16 de ago.

Calendario de Eventos ASP + jQuery

Abri um tópico http://forum.imasters.com.br/topic/525142-redigitar-em-asp/ e não obtive sucesso, mesmo não entendendo nada de PHP, resolvi arriscar e cheguei ao resultado esperado.

Vou postar abaixo (uma maneira de contribuir com o fórum)

Os arquivos Js, tem os comentários em português eu coloquei para facilitar na hora de ver o que cada ação fazia.

Outra dica: como usei isso em projeto já existente, coloquei o calendário dentro de iframe para não afetar o css do que já estava pronto

usei 10 arquivos:

calendar.asp

cursos-lista-detalhes-aulas-cad.asp

reset.css

jquery.weekcalendar.css

calendar.css

<script type='text/javascript' src='[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js%27)

<script type='text/javascript' src='[http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'>](http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js%27)

jquery.weekcalendar.js

calendar.js

calendar.asp

<%
Function FormataData(Data)
If Data <> "" Then FormataData = DatePart("yyyy", Data) & "-" & Right("0" & DatePart("m", Data),2) & "-" & Right("0" & DatePart("d", Data),2)
End Function
%>

<%
IdCurso = Request("IdReg")
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

	<link rel='stylesheet' type='text/css' href='css/calendar/reset.css' />
	<link rel='stylesheet' type='text/css' href='[http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css'](http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css) />
	<link rel='stylesheet' type='text/css' href='css/calendar/jquery.weekcalendar.css' />
	<link rel='stylesheet' type='text/css' href='css/calendar/calendar.css' />

	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
	<script type='text/javascript' src='js/calendar/jquery.weekcalendar.js'></script>
	<script type='text/javascript' src='js/calendar/calendar.js'></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
	<div style="width:90%; margin-left:30px;">
 <div id='calendar'></div>
 <div id="event_edit_container">
 <form>
 <input type="hidden" />
 <ul>
 <li>
 <span>Data: </span><span class="date_holder"></span>
 </li>
 <li>
 <label for="end">Id Curso: </label><input type="text" name="idcurso" value="<%=IdCurso%>" />
 </li>
 <li>
 <label for="start">Horário Inicial: </label><select name="start"><option value="">Selecione...</option></select>
 </li>
 <li>
 <label for="end">Horário Final: </label><select name="end"><option value="">Selecione...</option></select>
 </li>
 <li>
 <label for="title">Título: </label><input type="text" name="title" />
 </li>
 <li>
 <label for="title">Ch: </label><input type="text" name="ch" />
 </li>
 <li>
 <label for="body">Observação: </label><textarea name="body"></textarea>
 </li>
 </ul>
 </form>
 </div>
	</div>

	<%
	set RSLerDadosAula = server.createobject("adodb.recordset")
	SQLLerDadosAula = "SELECT * FROM cursos_aulas where IdCurso = '" & IdCurso & "' "
	RSLerDadosAula.open SQLLerDadosAula, objConn
	%>

	<script>

 function getEventData() {
 var year = new Date().getFullYear();
 var month = new Date().getMonth();
 //alert(month);
 var day = new Date().getDate();

 return {
 events : [
 // EVENTOS CADASTRADOS ATUAIS

 // --- MES tem que ser menos (1)

 <%
 if RSLerDadosAula.eof then
 %>

 <%
 else
 %>

 <%
 while not RSLerDadosAula.eof
 %>

 <%
 IdAula = RSLerDadosAula("id")

 DataAula = RSLerDadosAula("DataAula")
 AnoData = Year(DataAula)
 MesData = month(DataAula)
 MesData = MesData - 1
 DiaData = Day(DataAula)

 HoraInicial = RSLerDadosAula("HoraInicial")
 HoraInicialI	= Mid(HoraInicial,1,2)
 HoraInicialF	= Mid(HoraInicial,4,2)

 HoraFinal = RSLerDadosAula("HoraFinal")
 HoraFinalI = Mid(HoraFinal,1,2)
 HoraFinalF = Mid(HoraFinal,4,2)

 ChAula = RSLerDadosAula("ChAula")
 NomeAula = RSLerDadosAula("NomeAula")
 DescricaoAula	= RSLerDadosAula("DescricaoAula")
 %>

 <%
 response.write "{"
 response.write """id"":" & IdAula & ","
 response.write """start"": new Date(" & AnoData & ", " & MesData & ", " & DiaData & ", " & HoraInicialI & ", " & HoraInicialF & "),"
 response.write """end"": new Date(" & AnoData & ", " & MesData & ", " & DiaData & ", " & HoraFinalI & ", " & HoraFinalF & "),"
 response.write """title"":""" & NomeAula & ""","
 response.write """body"":""" & DescricaoAula & ""","
 response.write """ch"":""" & ChAula & ""","
 response.write """idcurso"":""" & IdCurso & """"
 response.write "},"
 %>

 <%
 RSLerDadosAula.MoveNext : Wend
 %>

 <%
 end if
 %>

 // EVENTOS CADASTRADOS ATUAIS

 ]
 };
 }

	</script>

</body>
</html>

cursos-lista-detalhes-aulas-cad.asp

<%
Function FormataData(Data)
If Data <> "" Then FormataData = DatePart("yyyy", Data) & "-" & Right("0" & DatePart("m", Data),2) & "-" & Right("0" & DatePart("d", Data),2)
End Function
%>

<%
IdCurso = Request("IdCurso")
NomeAula = Request("TituloEvento")
HoraInicial = Request("HoraInicial")
HoraFinal = Request("HoraFinal")
DataAula = FormataData(Request("DataEvento"))
DescricaoAula = Request("DescricaoEvento")
ChAula = Request("Ch")
%>

<%
set RSLerDados = server.createobject("adodb.recordset")
SQLLerDados = "SELECT * FROM cursos_aulas where IdCurso = '" & IdCurso & "' and DataAula = '" & DataAula & "' and HoraInicial = '" & HoraInicial & "' and HoraFinal = '" & HoraFinal & "' "
RSLerDados.open SQLLerDados, objConn

if RSLerDados.eof then

	SQLLerDadosUm = "insert into cursos_aulas (IdCurso,NomeAula,HoraInicial,HoraFinal,DataAula,DescricaoAula,ChAula) values ('"&IdCurso&"','"&NomeAula&"','"&HoraInicial&"','"&HoraFinal&"','"&DataAula&"','"&DescricaoAula&"','"&ChAula&"')"
	Set RSLerDadosUm=Server.CreateObject("ADODB.Recordset")
	RSLerDadosUm.Open SQLLerDadosUm, objConn
	Set RSLerDadosUm = Nothing

else
IdReg = RSLerDados("Id")
Set RSLerDadosUm=Server.CreateObject("ADODB.Recordset")

	SQLLerDadosUm = "Update cursos_aulas set NomeAula='"&NomeAula&"',HoraInicial='"&HoraInicial&"',HoraFinal='"&HoraFinal&"',DataAula='"&DataAula&"',DescricaoAula='"&DescricaoAula&"',ChAula='"&ChAula&"' where id = " & idreg
	RSLerDadosUm.Open SQLLerDadosUm, objConn

end if
%>

reset.css

@charset "utf-8";
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.1
*/
html {

 color: #000;
 background: #FFF;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {

 margin: 0;
 padding: 0;
}

table {

 border-collapse: collapse;
 border-spacing: 0;
}

fieldset, img {

 border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {

 font-style: normal;
 font-weight: normal;
}

li {

 list-style: none;
}

caption, th {

 text-align: left;
}

h1, h2, h3, h4, h5, h6 {

 font-size: 100%;
 font-weight: normal;
}

q:before, q:after {

 content: '';
}

abbr, acronym {

 border: 0;
 font-variant: normal;
}

sup {

 vertical-align: text-top;
}

sub {

 vertical-align: text-bottom;
}

input, textarea, select {
 font-family: inherit;
 font-size: inherit;
 font-weight: inherit;
}

input, textarea, select {

* font-size:

 100%;
}

legend {

 color: #000;
}

jquery.weekcalendar.css

@charset "utf-8";

.wc-container {
	font-size: 14px;
	font-family: arial, helvetica;
}

.wc-nav {
	padding: 1em;
	text-align: right;
}

.wc-nav button {

	margin: 0 0.5em;
}

.wc-container table {

	border-collapse: collapse;
 border-spacing: 0;
}

.wc-container table td {

	margin: 0;
	padding: 0;
}

.wc-header {
	background: #eee;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	width: 100%;
}

.wc-header .wc-time-column-header {

	width: 6%;
}

.wc-header .wc-scrollbar-shim {

	width: 16px;
}

.wc-header .wc-day-column-header {

	text-align: center;
	padding: 0.4em;
}

.wc-header td {

	background-color: #eee;
}

.wc-grid-timeslot-header {
	width: 6%;
	background: #eee;
}

.wc-scrollable-grid {
	overflow: auto;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	position: relative;
	background-color: #fff;
	width: 100%;
}

table.wc-time-slots {

	width: 100%;
	table-layout: fixed;
	cursor: default;
}

.wc-day-column {
	width: 13.5%;
	border-left: 1px solid #ddd;
	overflow: visible;
	vertical-align: top;
}

.wc-day-column-inner {
	width: 100%;
	position:relative;
}

.wc-time-slot-wrapper {
	position:relative;
	height: 1px;
	top: 1px;
}

.wc-time-slots {
	position: absolute;
	width: 100%;
}

.wc-time-header-cell {
	padding: 5px;
	height: 80px; /* reference height */
}

.wc-time-slot {
	border-bottom: 1px dotted #ddd;
}

.wc-hour-header {
	text-align: right;
}

.wc-hour-end, .wc-hour-header {

	border-bottom: 1px solid #ccc;
	color: #555;
}

.wc-business-hours {
	background-color: #E6EEF1;
	border-bottom: 1px solid #ccc;
	color: #333;
	font-size: 1.4em;
}

.wc-business-hours .wc-am-pm {

	font-size: 0.6em;
}

.wc-day-header-cell {
	text-align: center;
	vertical-align: middle;
	padding: 5px;
}

.wc-time-slot-header .wc-header-cell {

	text-align: right;
	padding-right: 10px;
}

.wc-header .wc-today {

	font-weight: bold;
}

.wc-time-slots .wc-today {
/background-color: #ffffcc; /
}

.wc-cal-event {
	background-color: #68a1e5;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	position: absolute;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	color: #fff;
	width: 100%;
	display: none;
}

.wc-cal-event div {

	padding: 0 5px;

}

.wc-cal-event .wc-time {

	background-color: #2b72d0;
	border: 1px solid #1b62c0;
	color: #fff;
	padding: 0;
	font-weight: bold;
}

.wc-container .ui-draggable .wc-time {

	cursor: move;
}

.wc-cal-event .wc-title {

	position: relative;
}

.wc-container .ui-resizable-s {

	height: 10px;
	bottom: -8px;
}

.wc-container .ui-draggable-dragging {

 z-index: 1000;
}

calendar.css

@charset "utf-8";
body {

	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 83.33%;
}

h1 {

	padding: 0.5em;
	font-size: 1.6em;
}

h2 {

	margin: 0.5em 0;
	font-size: 1.4em;
}

p {

	margin: 0.5em;
}

.ui-widget {
	font-size: 1em;
}

#event_edit_container, #about {

	display: none;
}

#about_button_container {
	position: absolute;
	top: 1em;
	right: 1em;
	padding: 0.5em 2em;
	background: #ddf;
	border: 1px solid #bbd;
	width: 10em;
	text-align: center;
}

.wc-header td {

	background: url(images/header-bg.png) repeat-x;
}

label {

	display: block;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

form ul {

	padding: 0.3em;
}

select, input[type='text'], textarea {
	width: 250px;
	padding: 3px;
}

input[type='text'] {

	width: 245px;
}

ul.formatted,ol.formatted {

	display: block;
	margin: 1em 0.5em;
}

ul.formatted li,ol.formatted li {

	margin: 5px 30px;
	display: auto;
}

ul.formatted li {

	list-style-type: disc;
}

ol.formatted li {

	list-style-type: decimal;
}

jquery.weekcalendar.js

/*
* jQuery.weekCalendar v1.2.2
* http://www.redredred.com.au/
*
* Requires:
* - jquery.weekcalendar.css
* - jquery 1.3.x
* - jquery-ui 1.7.x (widget, drag, drop, resize)
*
* Copyright (c) 2009 Rob Monie
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* If you're after a monthly calendar plugin, check out http://arshaw.com/fullcalendar/
*/

(function($) {

 $.widget("ui.weekCalendar", {

 /***********************
 * Initialise calendar *
 ***********************/
 _init : function() {
 var self = this;
 self._computeOptions();
 self._setupEventDelegation();
 self._renderCalendar();
 self._loadCalEvents();
 self._resizeCalendar();
 self._scrollToHour(self.options.date.getHours());

 $(window).unbind("resize.weekcalendar");
 $(window).bind("resize.weekcalendar", function() {
 self._resizeCalendar();
 });

 },

 /********************
 * public functions *
 ********************/
 /*
 * Refresh the events for the currently displayed week.
 */
 refresh : function() {
 this._clearCalendar();
 this._loadCalEvents(this.element.data("startDate")); //reload with existing week
 },

 /*
 * Clear all events currently loaded into the calendar
 */
 clear : function() {
 this._clearCalendar();
 },

 /*
 * Go to this week
 */
 today : function() {
 this._clearCalendar();
 this._loadCalEvents(new Date());
 },

 /*
 * Go to the previous week relative to the currently displayed week
 */
 prevWeek : function() {
 //minus more than 1 day to be sure we're in previous week - account for daylight savings or other anomolies
 var newDate = new Date(this.element.data("startDate").getTime() - (MILLIS_IN_WEEK / 6));
 this._clearCalendar();
 this._loadCalEvents(newDate);
 },

 /*
 * Go to the next week relative to the currently displayed week
 */
 nextWeek : function() {
 //add 8 days to be sure of being in prev week - allows for daylight savings or other anomolies
 var newDate = new Date(this.element.data("startDate").getTime() + MILLIS_IN_WEEK + (MILLIS_IN_WEEK / 7));
 this._clearCalendar();
 this._loadCalEvents(newDate);
 },

 /*
 * Reload the calendar to whatever week the date passed in falls on.
 */
 gotoWeek : function(date) {
 this._clearCalendar();
 this._loadCalEvents(date);
 },

 /*
 * Remove an event based on it's id
 */
 removeEvent : function(eventId) {

 var self = this;

 self.element.find(".wc-cal-event").each(function() {
 if ($(this).data("calEvent").id === eventId) {
 $(this).remove();
 return false;
 }
 });

 //
 //
 //
 // -------------------- COLOCAR ROTINA PARA REMOVER EVENTO DA BASE DE DADOS ------------------------
 // eventId é o ID do evento
 //
 //
 //

 //this could be more efficient rather than running on all days regardless...
 self.element.find(".wc-day-column-inner").each(function() {
 self._adjustOverlappingEvents($(this));
 });
 },

 /*
 * Removes any events that have been added but not yet saved (have no id).
 * This is useful to call after adding a freshly saved new event.
 */
 removeUnsavedEvents : function() {

 var self = this;

 self.element.find(".wc-new-cal-event").each(function() {
 $(this).remove();
 });

 //
 //
 //
 // -------------------- QUANDO CLICA PARA ADD UM EVENTO E CLICA EM CANCELAR ------------------------
 // quando o evento ainda não tem ID
 //
 //
 //

 //this could be more efficient rather than running on all days regardless...
 self.element.find(".wc-day-column-inner").each(function() {
 self._adjustOverlappingEvents($(this));
 });
 },

 /*
 * update an event in the calendar. If the event exists it refreshes
 * it's rendering. If it's a new event that does not exist in the calendar
 * it will be added.
 */
 updateEvent : function (calEvent) {
 this._updateEventInCalendar(calEvent);

 //
 //
 //
 // -------------------- QUANDO CLICA EM SALVAR NO EDITAR DE UM EVENTO ------------------------
 // MAS NÃO TEM ID
 //
 //
 //
 //alert(calEvent);
 },

 /*
 * Returns an array of timeslot start and end times based on
 * the configured grid of the calendar. Returns in both date and
 * formatted time based on the 'timeFormat' config option.
 */
 getTimeslotTimes : function(date) {
 var options = this.options;
 var firstHourDisplayed = options.businessHours.limitDisplay ? options.businessHours.start : 0;
 var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), firstHourDisplayed);

 var times = []
 var startMillis = startDate.getTime();
 for (var i = 0; i < options.timeslotsPerDay; i++) {
 var endMillis = startMillis + options.millisPerTimeslot;
 times[i] = {
 start: new Date(startMillis),
 startFormatted: this._formatDate(new Date(startMillis), options.timeFormat),
 end: new Date(endMillis),
 endFormatted: this._formatDate(new Date(endMillis), options.timeFormat)
 };
 startMillis = endMillis;
 }
 return times;
 },

 formatDate : function(date, format) {
 if (format) {
 return this._formatDate(date, format);
 } else {
 return this._formatDate(date, this.options.dateFormat);
 }
 },

 formatTime : function(date, format) {
 if (format) {
 return this._formatDate(date, format);
 } else {
 return this._formatDate(date, this.options.timeFormat);
 }
 },

 getData : function(key) {
 return this._getData(key);
 },

 /*********************
 * private functions *
 *********************/
 // compute dynamic options based on other config values
 _computeOptions : function() {

 var options = this.options;

 if (options.businessHours.limitDisplay) {
 options.timeslotsPerDay = options.timeslotsPerHour * (options.businessHours.end - options.businessHours.start);
 options.millisToDisplay = (options.businessHours.end - options.businessHours.start) * 60 * 60 * 1000;
 options.millisPerTimeslot = options.millisToDisplay / options.timeslotsPerDay;
 } else {
 options.timeslotsPerDay = options.timeslotsPerHour * 24;
 options.millisToDisplay = MILLIS_IN_DAY;
 options.millisPerTimeslot = MILLIS_IN_DAY / options.timeslotsPerDay;
 }
 },

 /*
 * Resize the calendar scrollable height based on the provided function in options.
 */
 _resizeCalendar : function () {

 var options = this.options;
 if (options && $.isFunction(options.height)) {
 var calendarHeight = options.height(this.element);
 var headerHeight = this.element.find(".wc-header").outerHeight();
 var navHeight = this.element.find(".wc-nav").outerHeight();
 this.element.find(".wc-scrollable-grid").height(calendarHeight - navHeight - headerHeight);
 }
 },

 /*
 * configure calendar interaction events that are able to use event
 * delegation for greater efficiency
 */
 _setupEventDelegation : function() {
 var self = this;
 var options = this.options;
 this.element.click(function(event) {
 var $target = $(event.target);
 if ($target.data("preventClick")) {
 return;
 }
 if ($target.hasClass("wc-cal-event")) {
 options.eventClick($target.data("calEvent"), $target, event);
 } else if ($target.parent().hasClass("wc-cal-event")) {
 options.eventClick($target.parent().data("calEvent"), $target.parent(), event);
 }
 }).mouseover(function(event) {
 var $target = $(event.target);

 if (self._isDraggingOrResizing($target)) {
 return;
 }

 if ($target.hasClass("wc-cal-event")) {
 options.eventMouseover($target.data("calEvent"), $target, event);
 }
 }).mouseout(function(event) {
 var $target = $(event.target);
 if (self._isDraggingOrResizing($target)) {
 return;
 }
 if ($target.hasClass("wc-cal-event")) {
 if ($target.data("sizing")) return;
 options.eventMouseout($target.data("calEvent"), $target, event);

 }
 });
 },

 /*
 * check if a ui draggable or resizable is currently being dragged or resized
 */
 _isDraggingOrResizing : function ($target) {
 return $target.hasClass("ui-draggable-dragging") || $target.hasClass("ui-resizable-resizing");
 },

 /*
 * Render the main calendar layout
 */
 _renderCalendar : function() {

 var $calendarContainer, calendarNavHtml, calendarHeaderHtml, calendarBodyHtml, $weekDayColumns;
 var self = this;
 var options = this.options;

 $calendarContainer = $("<div class=\"wc-container\">").appendTo(self.element);

 if (options.buttons) {
 calendarNavHtml = "<div class=\"wc-nav\">\
 <button class=\"wc-today\">" + options.buttonText.today + "</button>\
 <button class=\"wc-prev\">" + options.buttonText.lastWeek + "</button>\
 <button class=\"wc-next\">" + options.buttonText.nextWeek + "</button>\
 </div>";

 $(calendarNavHtml).appendTo($calendarContainer);

 $calendarContainer.find(".wc-nav .wc-today").click(function() {
 self.element.weekCalendar("today");
 return false;
 });

 $calendarContainer.find(".wc-nav .wc-prev").click(function() {
 self.element.weekCalendar("prevWeek");
 return false;
 });

 $calendarContainer.find(".wc-nav .wc-next").click(function() {
 self.element.weekCalendar("nextWeek");
 return false;
 });

 }

 //render calendar header
 calendarHeaderHtml = "<table class=\"wc-header\"><tbody><tr><td class=\"wc-time-column-header\"></td>";
 for (var i = 1; i <= options.daysToShow; i++) {
 calendarHeaderHtml += "<td class=\"wc-day-column-header wc-day-" + i + "\"></td>";
 }
 calendarHeaderHtml += "<td class=\"wc-scrollbar-shim\"></td></tr></tbody></table>";

 //render calendar body
 calendarBodyHtml = "<div class=\"wc-scrollable-grid\">\
 <table class=\"wc-time-slots\">\
 <tbody>\
 <tr>\
 <td class=\"wc-grid-timeslot-header\"></td>\
 <td colspan=\"" + options.daysToShow + "\">\
 <div class=\"wc-time-slot-wrapper\">\
 <div class=\"wc-time-slots\">";

 var start = options.businessHours.limitDisplay ? options.businessHours.start : 0;
 var end = options.businessHours.limitDisplay ? options.businessHours.end : 24;

 for (var i = start; i < end; i++) {
 for (var j = 0; j < options.timeslotsPerHour - 1; j++) {
 calendarBodyHtml += "<div class=\"wc-time-slot\"></div>";
 }
 calendarBodyHtml += "<div class=\"wc-time-slot wc-hour-end\"></div>";
 }

 calendarBodyHtml += "</div></div></td></tr><tr><td class=\"wc-grid-timeslot-header\">";

 for (var i = start; i < end; i++) {

 var bhClass = (options.businessHours.start <= i && options.businessHours.end > i) ? "wc-business-hours" : "";
 calendarBodyHtml += "<div class=\"wc-hour-header " + bhClass + "\">"
 if (options.use24Hour) {
 calendarBodyHtml += "<div class=\"wc-time-header-cell\">" + self._24HourForIndex(i) + "</div>";
 } else {
 calendarBodyHtml += "<div class=\"wc-time-header-cell\">" + self._hourForIndex(i) + "<span class=\"wc-am-pm\">" + self._amOrPm(i) + "</span></div>";
 }
 calendarBodyHtml += "</div>";
 }

 calendarBodyHtml += "</td>";

 for (var i = 1; i <= options.daysToShow; i++) {
 calendarBodyHtml += "<td class=\"wc-day-column day-" + i + "\"><div class=\"wc-day-column-inner\"></div></td>"
 }

 calendarBodyHtml += "</tr></tbody></table></div>";

 //append all calendar parts to container
 $(calendarHeaderHtml + calendarBodyHtml).appendTo($calendarContainer);

 $weekDayColumns = $calendarContainer.find(".wc-day-column-inner");
 $weekDayColumns.each(function(i, val) {
 $(this).height(options.timeslotHeight * options.timeslotsPerDay);
 if (!options.readonly) {
 self._addDroppableToWeekDay($(this));
 self._setupEventCreationForWeekDay($(this));
 }
 });

 $calendarContainer.find(".wc-time-slot").height(options.timeslotHeight - 1); //account for border

 $calendarContainer.find(".wc-time-header-cell").css({
 height : (options.timeslotHeight * options.timeslotsPerHour) - 11,
 padding: 5
 });

 },

 /*
 * setup mouse events for capturing new events
 */
 _setupEventCreationForWeekDay : function($weekDay) {
 var self = this;
 var options = this.options;
 $weekDay.mousedown(function(event) {
 var $target = $(event.target);
 if ($target.hasClass("wc-day-column-inner")) {

 var $newEvent = $("<div class=\"wc-cal-event wc-new-cal-event wc-new-cal-event-creating\"></div>");

 $newEvent.css({lineHeight: (options.timeslotHeight - 2) + "px", fontSize: (options.timeslotHeight / 2) + "px"});
 $target.append($newEvent);

 var columnOffset = $target.offset().top;
 var clickY = event.pageY - columnOffset;
 var clickYRounded = (clickY - (clickY % options.timeslotHeight)) / options.timeslotHeight;
 var topPosition = clickYRounded * options.timeslotHeight;
 $newEvent.css({top: topPosition});

 $target.bind("mousemove.newevent", function(event) {
 $newEvent.show();
 $newEvent.addClass("ui-resizable-resizing");
 var height = Math.round(event.pageY - columnOffset - topPosition);
 var remainder = height % options.timeslotHeight;
 //snap to closest timeslot
 if (remainder < (height / 2)) {
 var useHeight = height - remainder;
 $newEvent.css("height", useHeight < options.timeslotHeight ? options.timeslotHeight : useHeight);
 } else {
 $newEvent.css("height", height + (options.timeslotHeight - remainder));
 }
 }).mouseup(function() {
 $target.unbind("mousemove.newevent");
 $newEvent.addClass("ui-corner-all");
 });
 }

 }).mouseup(function(event) {
 var $target = $(event.target);

 var $weekDay = $target.closest(".wc-day-column-inner");
 var $newEvent = $weekDay.find(".wc-new-cal-event-creating");

 if ($newEvent.length) {
 //if even created from a single click only, default height
 if (!$newEvent.hasClass("ui-resizable-resizing")) {
 $newEvent.css({height: options.timeslotHeight * options.defaultEventLength}).show();
 }
 var top = parseInt($newEvent.css("top"));
 var eventDuration = self._getEventDurationFromPositionedEventElement($weekDay, $newEvent, top);

 $newEvent.remove();
 var newCalEvent = {start: eventDuration.start, end: eventDuration.end, title: options.newEventText};
 var $renderedCalEvent = self._renderEvent(newCalEvent, $weekDay);

 if (!options.allowCalEventOverlap) {
 self._adjustForEventCollisions($weekDay, $renderedCalEvent, newCalEvent, newCalEvent);
 self._positionEvent($weekDay, $renderedCalEvent);
 } else {
 self._adjustOverlappingEvents($weekDay);
 }

 options.eventNew(eventDuration, $renderedCalEvent);
 }
 });
 },

 /*
 * load calendar events for the week based on the date provided
 */
 _loadCalEvents : function(dateWithinWeek) {

 var date, weekStartDate, endDate, $weekDayColumns;
 var self = this;
 var options = this.options;
 date = dateWithinWeek || options.date;
 weekStartDate = self._dateFirstDayOfWeek(date);
 weekEndDate = self._dateLastMilliOfWeek(date);

 options.calendarBeforeLoad(self.element);

 self.element.data("startDate", weekStartDate);
 self.element.data("endDate", weekEndDate);

 $weekDayColumns = self.element.find(".wc-day-column-inner");

 self._updateDayColumnHeader($weekDayColumns);

 //load events by chosen means
 if (typeof options.data == 'string') {
 if (options.loading) options.loading(true);
 var jsonOptions = {};
 jsonOptions[options.startParam || 'start'] = Math.round(weekStartDate.getTime() / 1000);
 jsonOptions[options.endParam || 'end'] = Math.round(weekEndDate.getTime() / 1000);
 $.getJSON(options.data, jsonOptions, function(data) {
 self._renderEvents(data, $weekDayColumns);
 if (options.loading) options.loading(false);
 });
 }
 else if ($.isFunction(options.data)) {
 options.data(weekStartDate, weekEndDate,
 function(data) {
 self._renderEvents(data, $weekDayColumns);
 });
 }
 else if (options.data) {
 self._renderEvents(options.data, $weekDayColumns);
 }

 self._disableTextSelect($weekDayColumns);

 },

 /*
 * update the display of each day column header based on the calendar week
 */
 _updateDayColumnHeader : function ($weekDayColumns) {
 var self = this;
 var options = this.options;
 var currentDay = self._cloneDate(self.element.data("startDate"));

 self.element.find(".wc-header td.wc-day-column-header").each(function(i, val) {

 var dayName = options.useShortDayNames ? options.shortDays[currentDay.getDay()] : options.longDays[currentDay.getDay()];

 $(this).html(dayName + "<br/>" + self._formatDate(currentDay, options.dateFormat));
 if (self._isToday(currentDay)) {
 $(this).addClass("wc-today");
 } else {
 $(this).removeClass("wc-today");
 }
 currentDay = self._addDays(currentDay, 1);

 });

 currentDay = self._dateFirstDayOfWeek(self._cloneDate(self.element.data("startDate")));

 $weekDayColumns.each(function(i, val) {

 $(this).data("startDate", self._cloneDate(currentDay));
 $(this).data("endDate", new Date(currentDay.getTime() + (MILLIS_IN_DAY)));
 if (self._isToday(currentDay)) {
 $(this).parent().addClass("wc-today");
 } else {
 $(this).parent().removeClass("wc-today");
 }

 currentDay = self._addDays(currentDay, 1);
 });

 },

 /*
 * Render the events into the calendar
 */
 _renderEvents : function (events, $weekDayColumns) {
 var self = this;
 var options = this.options;
 var eventsToRender;

 if ($.isArray(events)) {
 eventsToRender = self._cleanEvents(events);
 } else if (events.events) {
 eventsToRender = self._cleanEvents(events.events);
 }
 if (events.options) {

 var updateLayout = false;
 //update options
 $.each(events.options, function(key, value) {
 if (value !== options[key]) {
 options[key] = value;
 updateLayout = true;
 }
 });

 self._computeOptions();

 if (updateLayout) {
 self.element.empty();
 self._renderCalendar();
 $weekDayColumns = self.element.find(".wc-time-slots .wc-day-column-inner");
 self._updateDayColumnHeader($weekDayColumns);
 self._resizeCalendar();
 }

 }

 $.each(eventsToRender, function(i, calEvent) {

 var $weekDay = self._findWeekDayForEvent(calEvent, $weekDayColumns);

 if ($weekDay) {
 self._renderEvent(calEvent, $weekDay);
 }
 });

 $weekDayColumns.each(function() {
 self._adjustOverlappingEvents($(this));
 });

 options.calendarAfterLoad(self.element);

 if (!eventsToRender.length) {
 options.noEvents();
 }

 },

 /*
 * Render a specific event into the day provided. Assumes correct
 * day for calEvent date
 */
 _renderEvent: function (calEvent, $weekDay) {
 var self = this;
 var options = this.options;
 if (calEvent.start.getTime() > calEvent.end.getTime()) {
 return; // can't render a negative height
 }

 var eventClass, eventHtml, $calEvent, $modifiedEvent;

 eventClass = calEvent.id ? "wc-cal-event" : "wc-cal-event wc-new-cal-event";
 eventHtml = "<div class=\"" + eventClass + " ui-corner-all\">\
 <div class=\"wc-time ui-corner-all\"></div>\
 <div class=\"wc-title\"></div></div>";

 $calEvent = $(eventHtml);
 $modifiedEvent = options.eventRender(calEvent, $calEvent);
 $calEvent = $modifiedEvent ? $modifiedEvent.appendTo($weekDay) : $calEvent.appendTo($weekDay);
 $calEvent.css({lineHeight: (options.timeslotHeight - 2) + "px", fontSize: (options.timeslotHeight / 2) + "px"});

 self._refreshEventDetails(calEvent, $calEvent);
 self._positionEvent($weekDay, $calEvent);
 $calEvent.show();

 if (!options.readonly && options.resizable(calEvent, $calEvent)) {
 self._addResizableToCalEvent(calEvent, $calEvent, $weekDay)
 }
 if (!options.readonly && options.draggable(calEvent, $calEvent)) {
 self._addDraggableToCalEvent(calEvent, $calEvent);
 }

 options.eventAfterRender(calEvent, $calEvent);

 return $calEvent;

 },

 _adjustOverlappingEvents : function($weekDay) {
 var self = this;
 if (self.options.allowCalEventOverlap) {
 var groupsList = self._groupOverlappingEventElements($weekDay);
 $.each(groupsList, function() {
 var curGroups = this;
 $.each(curGroups, function(groupIndex) {
 var curGroup = this;

 // do we want events to be displayed as overlapping
 if (self.options.overlapEventsSeparate) {
 var newWidth = 100 / curGroups.length;
 var newLeft = groupIndex * newWidth;
 } else {
 // TODO what happens when the group has more than 10 elements
 var newWidth = 100 - ( (curGroups.length - 1) * 10 );
 var newLeft = groupIndex * 10;
 }
 $.each(curGroup, function() {
 // bring mouseovered event to the front
 if (!self.options.overlapEventsSeparate) {
 $(this).bind("mouseover.z-index", function() {
 var $elem = $(this);
 $.each(curGroup, function() {
 $(this).css({"z-index": "1"});
 });
 $elem.css({"z-index": "3"});
 });
 }
 $(this).css({width: newWidth + "%", left:newLeft + "%", right: 0});
 });
 });
 });
 }
 },

 /*
 * Find groups of overlapping events
 */
 _groupOverlappingEventElements : function($weekDay) {
 var $events = $weekDay.find(".wc-cal-event:visible");
 var sortedEvents = $events.sort(function(a, b) {
 return $(a).data("calEvent").start.getTime() - $(b).data("calEvent").start.getTime();
 });

 var lastEndTime = new Date(0, 0, 0);
 var groups = [];
 var curGroups = [];
 var $curEvent;
 $.each(sortedEvents, function() {
 $curEvent = $(this);
 //checks, if the current group list is not empty, if the overlapping is finished
 if (curGroups.length > 0) {
 if (lastEndTime.getTime() <= $curEvent.data("calEvent").start.getTime()) {
 //finishes the current group list by adding it to the resulting list of groups and cleans it

 groups.push(curGroups);
 curGroups = [];
 }
 }

 //finds the first group to fill with the event
 for (var groupIndex = 0; groupIndex < curGroups.length; groupIndex++) {
 if (curGroups[groupIndex].length > 0) {
 //checks if the event starts after the end of the last event of the group
 if (curGroups[groupIndex][curGroups [groupIndex].length - 1].data("calEvent").end.getTime() <= $curEvent.data("calEvent").start.getTime()) {
 curGroups[groupIndex].push($curEvent);
 if (lastEndTime.getTime() < $curEvent.data("calEvent").end.getTime()) {
 lastEndTime = $curEvent.data("calEvent").end;
 }
 return;
 }
 }
 }
 //if not found, creates a new group
 curGroups.push([$curEvent]);
 if (lastEndTime.getTime() < $curEvent.data("calEvent").end.getTime()) {
 lastEndTime = $curEvent.data("calEvent").end;
 }
 });
 //adds the last groups in result
 if (curGroups.length > 0) {
 groups.push(curGroups);
 }
 return groups;
 },

 /*
 * find the weekday in the current calendar that the calEvent falls within
 */
 _findWeekDayForEvent : function(calEvent, $weekDayColumns) {

 var $weekDay;
 $weekDayColumns.each(function() {
 if ($(this).data("startDate").getTime() <= calEvent.start.getTime() && $(this).data("endDate").getTime() >= calEvent.end.getTime()) {
 $weekDay = $(this);
 return false;
 }
 });
 return $weekDay;
 },

 /*
 * update the events rendering in the calendar. Add if does not yet exist.
 */
 _updateEventInCalendar : function (calEvent) {
 var self = this;
 var options = this.options;
 self._cleanEvent(calEvent);

 if (calEvent.id) {
 self.element.find(".wc-cal-event").each(function() {
 if ($(this).data("calEvent").id === calEvent.id || $(this).hasClass("wc-new-cal-event")) {
 $(this).remove();
 return false;
 }
 });
 }

 var $weekDay = self._findWeekDayForEvent(calEvent, self.element.find(".wc-time-slots .wc-day-column-inner"));
 if ($weekDay) {
 var $calEvent = self._renderEvent(calEvent, $weekDay);
 self._adjustForEventCollisions($weekDay, $calEvent, calEvent, calEvent);
 self._refreshEventDetails(calEvent, $calEvent);
 self._positionEvent($weekDay, $calEvent);
 self._adjustOverlappingEvents($weekDay);

 //
 //
 //
 // -------------------- AO CLICAR EM SALVAR DEPOIS DE DIGITAR O EVENTO ------------------------
 //
 //
 //
 //
 //var teste = self.element.find("wc-day-column-inner").html;
 //alert(teste);

 }
 },

 /*
 * Position the event element within the weekday based on it's start / end dates.
 */
 _positionEvent : function($weekDay, $calEvent) {
 var options = this.options;
 var calEvent = $calEvent.data("calEvent");
 var pxPerMillis = $weekDay.height() / options.millisToDisplay;
 var firstHourDisplayed = options.businessHours.limitDisplay ? options.businessHours.start : 0;
 var startMillis = calEvent.start.getTime() - new Date(calEvent.start.getFullYear(), calEvent.start.getMonth(), calEvent.start.getDate(), firstHourDisplayed).getTime();
 var eventMillis = calEvent.end.getTime() - calEvent.start.getTime();
 var pxTop = pxPerMillis * startMillis;
 var pxHeight = pxPerMillis * eventMillis;
 $calEvent.css({top: pxTop, height: pxHeight});
 },

 /*
 * Determine the actual start and end times of a calevent based on it's
 * relative position within the weekday column and the starting hour of the
 * displayed calendar.
 */
 _getEventDurationFromPositionedEventElement : function($weekDay, $calEvent, top) {
 var options = this.options;
 var startOffsetMillis = options.businessHours.limitDisplay ? options.businessHours.start * 60 * 60 * 1000 : 0;
 var start = new Date($weekDay.data("startDate").getTime() + startOffsetMillis + Math.round(top / options.timeslotHeight) * options.millisPerTimeslot);
 var end = new Date(start.getTime() + ($calEvent.height() / options.timeslotHeight) * options.millisPerTimeslot);
 return {start: start, end: end};
 },

 /*
 * If the calendar does not allow event overlap, adjust the start or end date if necessary to
 * avoid overlapping of events. Typically, shortens the resized / dropped event to it's max possible
 * duration based on the overlap. If no satisfactory adjustment can be made, the event is reverted to
 * it's original location.
 */
 _adjustForEventCollisions : function($weekDay, $calEvent, newCalEvent, oldCalEvent, maintainEventDuration) {
 var options = this.options;

 if (options.allowCalEventOverlap) {
 return;
 }
 var adjustedStart, adjustedEnd;
 var self = this;

 $weekDay.find(".wc-cal-event").not($calEvent).each(function() {
 var currentCalEvent = $(this).data("calEvent");

 //has been dropped onto existing event overlapping the end time
 if (newCalEvent.start.getTime() < currentCalEvent.end.getTime()
 && newCalEvent.end.getTime() >= currentCalEvent.end.getTime()) {

 adjustedStart = currentCalEvent.end;
 }

 //has been dropped onto existing event overlapping the start time
 if (newCalEvent.end.getTime() > currentCalEvent.start.getTime()
 && newCalEvent.start.getTime() <= currentCalEvent.start.getTime()) {

 adjustedEnd = currentCalEvent.start;
 }
 //has been dropped inside existing event with same or larger duration
 if (! oldCalEvent.resizable || (newCalEvent.end.getTime() <= currentCalEvent.end.getTime()
 && newCalEvent.start.getTime() >= currentCalEvent.start.getTime())) {

 adjustedStart = oldCalEvent.start;
 adjustedEnd = oldCalEvent.end;
 return false;
 }

 });

 //alert('Start: '+adjustedStart.start+' End: '+adjustedEnd.end);

 newCalEvent.start = adjustedStart || newCalEvent.start;

 if (adjustedStart && maintainEventDuration) {
 newCalEvent.end = new Date(adjustedStart.getTime() + (oldCalEvent.end.getTime() - oldCalEvent.start.getTime()));
 self._adjustForEventCollisions($weekDay, $calEvent, newCalEvent, oldCalEvent);
 } else {
 newCalEvent.end = adjustedEnd || newCalEvent.end;
 }

 //reset if new cal event has been forced to zero size
 if (newCalEvent.start.getTime() >= newCalEvent.end.getTime()) {
 newCalEvent.start = oldCalEvent.start;
 newCalEvent.end = oldCalEvent.end;
 }

 $calEvent.data("calEvent", newCalEvent);

 //alert('Start: '+adjustedStart.start+' End: '+adjustedEnd.end);

 },

 /*
 * Add draggable capabilities to an event
 */
 _addDraggableToCalEvent : function(calEvent, $calEvent) {
 var self = this;
 var options = this.options;
 var $weekDay = self._findWeekDayForEvent(calEvent, self.element.find(".wc-time-slots .wc-day-column-inner"));
 $calEvent.draggable({
 handle : ".wc-time",
 containment: ".wc-scrollable-grid",
 revert: 'valid',
 opacity: 0.5,
 grid : [$calEvent.outerWidth() + 1, options.timeslotHeight ],
 start : function(event, ui) {
 var $calEvent = ui.draggable;
 options.eventDrag(calEvent, $calEvent);
 }
 });

 },

 /*
 * Add droppable capabilites to weekdays to allow dropping of calEvents only
 */
 _addDroppableToWeekDay : function($weekDay) {
 var self = this;
 var options = this.options;
 $weekDay.droppable({
 accept: ".wc-cal-event",
 drop: function(event, ui) {
 var $calEvent = ui.draggable;
 var top = Math.round(parseInt(ui.position.top));
 var eventDuration = self._getEventDurationFromPositionedEventElement($weekDay, $calEvent, top);
 var calEvent = $calEvent.data("calEvent");
 var newCalEvent = $.extend(true, {start: eventDuration.start, end: eventDuration.end}, calEvent);
 self._adjustForEventCollisions($weekDay, $calEvent, newCalEvent, calEvent, true);
 var $weekDayColumns = self.element.find(".wc-day-column-inner");
 var $newEvent = self._renderEvent(newCalEvent, self._findWeekDayForEvent(newCalEvent, $weekDayColumns));
 $calEvent.hide();

 //alert('Start: '+eventDuration.start+' End: '+eventDuration.end);

 //trigger drop callback
 options.eventDrop(newCalEvent, calEvent, $newEvent);
 $calEvent.data("preventClick", true);

 var $weekDayOld = self._findWeekDayForEvent($calEvent.data("calEvent"), self.element.find(".wc-time-slots .wc-day-column-inner"));

 if ($weekDayOld.data("startDate") != $weekDay.data("startDate")) {
 self._adjustOverlappingEvents($weekDayOld);
 }
 self._adjustOverlappingEvents($weekDay);

 setTimeout(function() {
 $calEvent.remove();
 }, 1000);

 }
 });
 },

 /*
 * Add resizable capabilities to a calEvent
 */
 _addResizableToCalEvent : function(calEvent, $calEvent, $weekDay) {
 var self = this;
 var options = this.options;
 $calEvent.resizable({
 grid: options.timeslotHeight,
 containment : $weekDay,
 handles: "s",
 minHeight: options.timeslotHeight,
 stop :function(event, ui) {
 var $calEvent = ui.element;
 var newEnd = new Date($calEvent.data("calEvent").start.getTime() + ($calEvent.height() / options.timeslotHeight) * options.millisPerTimeslot);
 var newCalEvent = $.extend(true, {start: calEvent.start, end: newEnd}, calEvent);
 self._adjustForEventCollisions($weekDay, $calEvent, newCalEvent, calEvent);

 self._refreshEventDetails(newCalEvent, $calEvent);
 self._positionEvent($weekDay, $calEvent);
 self._adjustOverlappingEvents($weekDay);
 //trigger resize callback
 options.eventResize(newCalEvent, calEvent, $calEvent);
 $calEvent.data("preventClick", true);
 setTimeout(function() {
 $calEvent.removeData("preventClick");
 }, 500);
 }
 });
 },

 /*
 * Refresh the displayed details of a calEvent in the calendar
 */
 _refreshEventDetails : function(calEvent, $calEvent) {
 var self = this;
 var options = this.options;
 $calEvent.find(".wc-time").html(self._formatDate(calEvent.start, options.timeFormat) + options.timeSeparator + self._formatDate(calEvent.end, options.timeFormat));
 $calEvent.find(".wc-title").html(calEvent.title);
 $calEvent.data("calEvent", calEvent);
 },

 /*
 * Clear all cal events from the calendar
 */
 _clearCalendar : function() {
 this.element.find(".wc-day-column-inner div").remove();
 },

 /*
 * Scroll the calendar to a specific hour
 */
 _scrollToHour : function(hour) {
 var self = this;
 var options = this.options;
 var $scrollable = this.element.find(".wc-scrollable-grid");
 var slot = hour;
 if (self.options.businessHours.limitDisplay) {
 if (hour <= self.options.businessHours.start) {
 slot = 0;
 } else if (hour > self.options.businessHours.end) {
 slot = self.options.businessHours.end -
 self.options.businessHours.start - 1;
 } else {
 slot = hour - self.options.businessHours.start;
 }

 }

 var $target = this.element.find(".wc-grid-timeslot-header .wc-hour-header:eq(" + slot + ")");

 $scrollable.animate({scrollTop: 0}, 0, function() {
 var targetOffset = $target.offset().top;
 var scroll = targetOffset - $scrollable.offset().top - $target.outerHeight();
 $scrollable.animate({scrollTop: scroll}, options.scrollToHourMillis);
 });
 },

 /*
 * find the hour (12 hour day) for a given hour index
 */
 _hourForIndex : function(index) {
 if (index === 0) { //midnight
 return 12;
 } else if (index < 13) { //am
 return index;
 } else { //pm
 return index - 12;
 }
 },

 _24HourForIndex : function(index) {
 if (index === 0) { //midnight
 return "00:00";
 } else if (index < 10) {
 return "0" + index + ":00";
 } else {
 return index + ":00";
 }
 },

 _amOrPm : function (hourOfDay) {
 return hourOfDay < 12 ? "AM" : "PM";
 },

 _isToday : function(date) {
 var clonedDate = this._cloneDate(date);
 this._clearTime(clonedDate);
 var today = new Date();
 this._clearTime(today);
 return today.getTime() === clonedDate.getTime();
 },

 /*
 * Clean events to ensure correct format
 */
 _cleanEvents : function(events) {
 var self = this;
 $.each(events, function(i, event) {
 self._cleanEvent(event);
 });
 //alert(start + ' ' + end);
 return events;
 },

 /*
 * Clean specific event
 */
 _cleanEvent : function (event) {
 if (event.date) {
 event.start = event.date;
 }
 event.start = this._cleanDate(event.start);
 event.end = this._cleanDate(event.end);
 if (!event.end) {
 event.end = this._addDays(this._cloneDate(event.start), 1);
 }

 },

 /*
 * Disable text selection of the elements in different browsers
 */
 _disableTextSelect : function($elements) {
 $elements.each(function() {
 if ($.browser.mozilla) {//Firefox
 $(this).css('MozUserSelect', 'none');
 } else if ($.browser.msie) {//IE
 $(this).bind('selectstart', function() {
 return false;
 });
 } else {//Opera, etc.
 $(this).mousedown(function() {
 return false;
 });
 }
 });
 },

 /*
 * returns the date on the first millisecond of the week
 */
 _dateFirstDayOfWeek : function(date) {
 var self = this;
 var midnightCurrentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
 var millisToSubtract = self._getAdjustedDayIndex(midnightCurrentDate) * 86400000;
 return new Date(midnightCurrentDate.getTime() - millisToSubtract);

 },

 /*
 * returns the date on the first millisecond of the last day of the week
 */
 _dateLastDayOfWeek : function(date) {
 var self = this;
 var midnightCurrentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
 var millisToAdd = (6 - self._getAdjustedDayIndex(midnightCurrentDate)) * MILLIS_IN_DAY;
 return new Date(midnightCurrentDate.getTime() + millisToAdd);
 },

 /*
 * gets the index of the current day adjusted based on options
 */
 _getAdjustedDayIndex : function(date) {

 var midnightCurrentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
 var currentDayOfStandardWeek = midnightCurrentDate.getDay();
 var days = [0,1,2,3,4,5,6];
 this._rotate(days, this.options.firstDayOfWeek);
 return days[currentDayOfStandardWeek];
 },

 /*
 * returns the date on the last millisecond of the week
 */
 _dateLastMilliOfWeek : function(date) {
 var lastDayOfWeek = this._dateLastDayOfWeek(date);
 return new Date(lastDayOfWeek.getTime() + (MILLIS_IN_DAY));

 },

 /*
 * Clear the time components of a date leaving the date
 * of the first milli of day
 */
 _clearTime : function(d) {
 d.setHours(0);
 d.setMinutes(0);
 d.setSeconds(0);
 d.setMilliseconds(0);
 return d;
 },

 /*
 * add specific number of days to date
 */
 _addDays : function(d, n, keepTime) {
 d.setDate(d.getDate() + n);
 if (keepTime) {
 return d;
 }
 return this._clearTime(d);
 },

 /*
 * Rotate an array by specified number of places.
 */
 _rotate : function(a /*array*/, p /* integer, positive integer rotate to the right, negative to the left... */) {
 for (var l = a.length, p = (Math.abs(p) >= l && (p %= l),p < 0 && (p += l),p), i, x; p; p = (Math.ceil(l / p) - 1) * p - l + (l = p)) {
 for (i = l; i > p; x = a[--i],a[i] = a[i - p],a[i - p] = x);
 }
 return a;
 },

 _cloneDate : function(d) {
 return new Date(d.getTime());
 },

 /*
 * return a date for different representations
 */
 _cleanDate : function(d) {
 if (typeof d == 'string') {
 return $.weekCalendar.parseISO8601(d, true) || Date.parse(d) || new Date(parseInt(d));
 }
 if (typeof d == 'number') {
 return new Date(d);
 }
 return d;
 },

 /*
 * date formatting is adapted from
 * [http://jacwright.com/projects/javascript/date_format](http://jacwright.com/projects/javascript/date_format)
 */
 _formatDate : function(date, format) {
 var options = this.options;
 var returnStr = '';
 for (var i = 0; i < format.length; i++) {
 var curChar = format.charAt(i);
 if ($.isFunction(this._replaceChars[curChar])) {
 returnStr += this._replaceChars[curChar](date, options);
 } else {
 returnStr += curChar;
 }
 }
 return returnStr;
 },

 _replaceChars : {

 // Day
 d: function(date) {
 return (date.getDate() < 10 ? '0' : '') + date.getDate();
 },
 D: function(date, options) {
 return options.shortDays[date.getDay()];
 },
 j: function(date) {
 return date.getDate();
 },
 l: function(date, options) {
 return options.longDays[date.getDay()];
 },
 N: function(date) {
 return date.getDay() + 1;
 },
 S: function(date) {
 return (date.getDate() % 10 == 1 && date.getDate() != 11 ? 'st' : (date.getDate() % 10 == 2 && date.getDate() != 12 ? 'nd' : (date.getDate() % 10 == 3 && date.getDate() != 13 ? 'rd' : 'th')));
 },
 w: function(date) {
 return date.getDay();
 },
 z: function(date) {
 return "Not Yet Supported";
 },
 // Week
 W: function(date) {
 return "Not Yet Supported";
 },
 // Month
 F: function(date, options) {
 return options.longMonths[date.getMonth()];
 },
 m: function(date) {
 return (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1);
 },
 M: function(date, options) {
 return options.shortMonths[date.getMonth()];
 },
 n: function(date) {
 return date.getMonth() + 1;
 },
 t: function(date) {
 return "Not Yet Supported";
 },
 // Year
 L: function(date) {
 return "Not Yet Supported";
 },
 o: function(date) {
 return "Not Supported";
 },
 Y: function(date) {
 return date.getFullYear();
 },
 y: function(date) {
 return ('' + date.getFullYear()).substr(2);
 },
 // Time
 a: function(date) {
 return date.getHours() < 12 ? 'am' : 'pm';
 },
 A: function(date) {
 return date.getHours() < 12 ? 'AM' : 'PM';
 },
 B: function(date) {
 return "Not Yet Supported";
 },
 g: function(date) {
 return date.getHours() % 12 || 12;
 },
 G: function(date) {
 return date.getHours();
 },
 h: function(date) {
 return ((date.getHours() % 12 || 12) < 10 ? '0' : '') + (date.getHours() % 12 || 12);
 },
 H: function(date) {
 return (date.getHours() < 10 ? '0' : '') + date.getHours();
 },
 i: function(date) {
 return (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
 },
 s: function(date) {
 return (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
 },
 // Timezone
 e: function(date) {
 return "Not Yet Supported";
 },
 I: function(date) {
 return "Not Supported";
 },
 O: function(date) {
 return (date.getTimezoneOffset() < 0 ? '-' : '+') + (date.getTimezoneOffset() / 60 < 10 ? '0' : '') + (date.getTimezoneOffset() / 60) + '00';
 },
 T: function(date) {
 return "Not Yet Supported";
 },
 Z: function(date) {
 return date.getTimezoneOffset() * 60;
 },
 // Full Date/Time
 c: function(date) {
 return "Not Yet Supported";
 },
 r: function(date) {
 return date.toString();
 },
 U: function(date) {
 return date.getTime() / 1000;
 }
 }

 });

 $.extend($.ui.weekCalendar, {
 version: '1.2.2-pre',
 getter: ['getTimeslotTimes', 'getData', 'formatDate', 'formatTime'],
 defaults: {
 date: new Date(),
 timeFormat : "H:i",
 dateFormat : "d M, Y",
 use24Hour : true,
 daysToShow : 7,
 firstDayOfWeek : 0, // 0 = Sunday, 1 = Monday, 2 = Tuesday, ... , 6 = Saturday
 useShortDayNames: false, // Nome pequeno do dia
 timeSeparator : " até ",
 startParam : "Inicio",
 endParam : "Fim",
 businessHours : {start: 8, end: 24, limitDisplay : false},
 newEventText : "Novo Evento",
 timeslotHeight: 18,
 defaultEventLength : 2,
 timeslotsPerHour : 2,
 buttons : true,
 buttonText : {
 today : "Hoje",
 lastWeek : " < ",
 nextWeek : " > "
 },
 scrollToHourMillis : 500,
 allowCalEventOverlap : false,
 overlapEventsSeparate: false,
 readonly: false, // permite arrastar
 draggable : function(calEvent, element) {
 return true;
 },
 resizable : function(calEvent, element) {
 return true;
 },
 eventClick : function() {
 },
 eventRender : function(calEvent, element) {
 return element;
 },
 eventAfterRender : function(calEvent, element) {
 return element;
 },
 eventDrag : function(calEvent, element) {
 },
 eventDrop : function(calEvent, element) {
 },
 eventResize : function(calEvent, element) {
 },
 eventNew : function(calEvent, element) {
 },
 eventMouseover : function(calEvent, $event) {
 },
 eventMouseout : function(calEvent, $event) {
 },
 calendarBeforeLoad : function(calendar) {
 },
 calendarAfterLoad : function(calendar) {
 },
 noEvents : function() {
 },
 shortMonths : ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
 longMonths : ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
 shortDays : ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
 longDays : ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabado']
 }
 });

 var MILLIS_IN_DAY = 86400000;
 var MILLIS_IN_WEEK = MILLIS_IN_DAY * 7;

 $.weekCalendar = function() {
 return {
 parseISO8601 : function(s, ignoreTimezone) {

 // derived from [http://delete.me.uk/2005/03/iso8601.html](http://delete.me.uk/2005/03/iso8601.html)
 var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
 "(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
 "(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
 var d = s.match(new RegExp(regexp));
 if (!d) return null;
 var offset = 0;
 var date = new Date(d[1], 0, 1);
 if (d[3]) {
 date.setMonth(d[3] - 1);
 }
 if (d[5]) {
 date.setDate(d[5]);
 }
 if (d[7]) {
 date.setHours(d[7]);
 }
 if (d[8]) {
 date.setMinutes(d[8]);
 }
 if (d[10]) {
 date.setSeconds(d[10]);
 }
 if (d[12]) {
 date.setMilliseconds(Number("0." + d[12]) * 1000);
 }
 if (!ignoreTimezone) {
 if (d[14]) {
 offset = (Number(d[16]) * 60) + Number(d[17]);
 offset *= ((d[15] == '-') ? 1 : -1);
 }
 offset -= date.getTimezoneOffset();
 }
 return new Date(Number(date) + (offset * 60 * 1000));
 }
 };
 }();

})(jQuery);

calendar.js

	function ajaxInit() {
 var req;
 try {
 req = new ActiveXObject("Microsoft.XMLHTTP");
 } catch(e) {
 try {
 req = new ActiveXObject("Msxml2.XMLHTTP");
 } catch(ex) {
 try {
 req = new XMLHttpRequest();
 } catch(exc) {
 alert("Esse browser não suporta Ajax");
 req = null;
 }
 }
 }
 return req;
 }

$(document).ready(function() {

 var $calendar = $('#calendar');
 var id = 10;

 $calendar.weekCalendar({
 timeslotsPerHour : 2,
 allowCalEventOverlap : true,
 overlapEventsSeparate: true,
 firstDayOfWeek : 1,
 businessHours :{start: 8, end: 24, limitDisplay: true },
 daysToShow : 7,
 height : function($calendar) {
 return $(window).height() - $("h1").outerHeight() - 1;
 },
 eventRender : function(calEvent, $event) {
 if (calEvent.end.getTime() < new Date().getTime()) {
 $event.css("backgroundColor", "#aaa");
 $event.find(".wc-time").css({
 "backgroundColor" : "#999",
 "border" : "1px solid #888"
 });
 }
 },
 draggable : function(calEvent, $event) {
 return calEvent.readOnly != true;
 },
 resizable : function(calEvent, $event) {
 return calEvent.readOnly != true;
 },
 eventNew : function(calEvent, $event) {
 var $dialogContent = $("#event_edit_container");
 resetForm($dialogContent);
 var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
 var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
 var titleField = $dialogContent.find("input[name='title']");
 var chField = $dialogContent.find("input[name='ch']");
 var idcursoField = $dialogContent.find("input[name='idcurso']");
 var bodyField = $dialogContent.find("textarea[name='body']");

 //
 //
 //
 // -------------------- AO CLICAR NO CAMPO PARA DIGITAR NOVO EVENTO ------------------------
 //
 //
 //
 //

 $dialogContent.dialog({
 modal: true,
 title: "Cadastrar Novo Evento",
 close: function() {
 $dialogContent.dialog("destroy");
 $dialogContent.hide();
 $('#calendar').weekCalendar("removeUnsavedEvents");
 },
 buttons: {
 save : function() {
 calEvent.id = id;
 id++;

 // ------------------------------ PEGA OS DADOS DO EVENTO ---------------------------------
 DataInicioEvento	= new Date(startField.val());

 DiaEvento = DataInicioEvento.getDate();
 if (DiaEvento.toString().length == 1)
 DiaEvento = "0"+DiaEvento;
 MesEvento = DataInicioEvento.getMonth()+1;
 if (MesEvento.toString().length == 1)
 MesEvento = "0"+MesEvento;
 AnoEvento = DataInicioEvento.getFullYear();
 DataEventoAtual	= DiaEvento+"/"+MesEvento+"/"+AnoEvento;

 HoraEventoInicio = DataInicioEvento.getHours();
 if (HoraEventoInicio.toString().length == 1)
 HoraEventoInicio = "0"+HoraEventoInicio
 MinutoEventoInicio	= DataInicioEvento.getMinutes();
 if (MinutoEventoInicio.toString().length == 1)
 MinutoEventoInicio = MinutoEventoInicio+"0"
 HoraInicial	= HoraEventoInicio + ':' + MinutoEventoInicio

 DataFimEvento	= new Date(endField.val());

 HoraEventoFim = DataFimEvento.getHours();
 if (HoraEventoFim.toString().length == 1)
 HoraEventoFim = "0"+HoraEventoFim
 MinutoEventoFim	= DataFimEvento.getMinutes();
 if (MinutoEventoFim.toString().length == 1)
 MinutoEventoFim = MinutoEventoFim+"0"
 HoraFinal	= HoraEventoFim + ':' + MinutoEventoFim

 TituloEvento = titleField.val();
 ChEvento = chField.val();
 IdCurso = idcursoField.val();
 DescricaoEvento	= bodyField.val();

 //alert('Data Evento: ' + DataEventoAtual + ' Hora Inicial: ' + HoraInicial + ' Hora Final: ' + HoraFinal + '\n' + 'Titulo: ' + TituloEvento + '\n' + 'Descrição Evento: ' + DescricaoEvento);
 //IdCurso	= document.getElementById('IdCurso').value;
 //alert('IdCurso: ' + IdCurso);

 ajax = ajaxInit();
 ajax.open("GET", "cursos-lista-detalhes-aulas-cad.asp?IdCurso="+IdCurso+"&DataEvento="+DataEventoAtual+"&HoraInicial="+HoraInicial+"&HoraFinal="+HoraFinal+"&TituloEvento="+TituloEvento+"&DescricaoEvento="+DescricaoEvento+"&Ch="+ChEvento,true);
 ajax.onreadystatechange=function() {
 if (ajax.readyState==4){
 }
 }
 ajax.setRequestHeader("Pragma", "no-cache");
 ajax.send(null);

 // ------------------------------ PEGA OS DADOS DO EVENTO ---------------------------------

 calEvent.start = new Date(startField.val());
 calEvent.end = new Date(endField.val());
 calEvent.title = titleField.val();
 calEvent.ch = chField.val();
 calEvent.idcurso = idcursoField.val();
 calEvent.body = bodyField.val();

 $calendar.weekCalendar("removeUnsavedEvents"); // pega a função que cancela o evento que ainda não tem ID
 $calendar.weekCalendar("updateEvent", calEvent);
 $dialogContent.dialog("close");
 },
 cancel : function() {
 $dialogContent.dialog("close");
 }
 }
 }).show();

 $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
 setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));

 },
 eventDrop : function(calEvent, $event) {
 },
 eventResize : function(calEvent, $event) {
 },
 eventClick : function(calEvent, $event) {

 if (calEvent.readOnly) {
 return;
 }

 var $dialogContent = $("#event_edit_container");
 resetForm($dialogContent);
 var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
 var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
 var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
 var chField = $dialogContent.find("input[name='ch']").val(calEvent.ch);
 var idcursoField = $dialogContent.find("input[name='idcurso']").val(calEvent.idcurso);
 var bodyField = $dialogContent.find("textarea[name='body']");
 bodyField.val(calEvent.body);

 // ---- AO CLICAR NO CAMPO PARA EDITAR EVENTO ------

 $dialogContent.dialog({
 modal: true,
 title: "Editar - " + calEvent.title,
 close: function() {
 $dialogContent.dialog("destroy");
 $dialogContent.hide();
 $('#calendar').weekCalendar("removeUnsavedEvents");
 },
 buttons: {
 save : function() {

 // ------------------------------ PEGA OS DADOS DO EVENTO ---------------------------------
 DataInicioEvento	= new Date(startField.val());

 DiaEvento = DataInicioEvento.getDate();
 if (DiaEvento.toString().length == 1)
 DiaEvento = "0"+DiaEvento;
 MesEvento = DataInicioEvento.getMonth()+1;
 if (MesEvento.toString().length == 1)
 MesEvento = "0"+MesEvento;
 AnoEvento = DataInicioEvento.getFullYear();
 DataEventoAtual	= DiaEvento+"/"+MesEvento+"/"+AnoEvento;

 HoraEventoInicio = DataInicioEvento.getHours();
 if (HoraEventoInicio.toString().length == 1)
 HoraEventoInicio = "0"+HoraEventoInicio
 MinutoEventoInicio	= DataInicioEvento.getMinutes();
 if (MinutoEventoInicio.toString().length == 1)
 MinutoEventoInicio = MinutoEventoInicio+"0"
 HoraInicial	= HoraEventoInicio + ':' + MinutoEventoInicio

 DataFimEvento	= new Date(endField.val());

 HoraEventoFim = DataFimEvento.getHours();
 if (HoraEventoFim.toString().length == 1)
 HoraEventoFim = "0"+HoraEventoFim
 MinutoEventoFim	= DataFimEvento.getMinutes();
 if (MinutoEventoFim.toString().length == 1)
 MinutoEventoFim = MinutoEventoFim+"0"
 HoraFinal	= HoraEventoFim + ':' + MinutoEventoFim

 TituloEvento = titleField.val();
 ChEvento = chField.val();
 DescricaoEvento	= bodyField.val();
 IdCurso = idcursoField.val();

 //alert('Data Evento: ' + DataEventoAtual + ' Hora Inicial: ' + HoraInicial + ' Hora Final: ' + HoraFinal + '\n' + 'Titulo: ' + TituloEvento + '\n' + 'Descrição Evento: ' + DescricaoEvento);
 //IdCurso	= document.getElementById('IdCurso').value;

 ajax = ajaxInit();
 ajax.open("GET", "cursos-lista-detalhes-aulas-cad.asp?IdCurso="+IdCurso+"&DataEvento="+DataEventoAtual+"&HoraInicial="+HoraInicial+"&HoraFinal="+HoraFinal+"&TituloEvento="+TituloEvento+"&DescricaoEvento="+DescricaoEvento+"&Ch="+ChEvento,true);
 ajax.onreadystatechange=function() {
 if (ajax.readyState==4){
 }
 }
 ajax.setRequestHeader("Pragma", "no-cache");
 ajax.send(null);

 // ------------------------------ PEGA OS DADOS DO EVENTO ---------------------------------

 calEvent.start = new Date(startField.val());
 calEvent.end = new Date(endField.val());
 calEvent.title = titleField.val();
 calEvent.ch = chField.val();
 calEvent.idcurso = idcursoField.val();
 calEvent.body = bodyField.val();

 $calendar.weekCalendar("updateEvent", calEvent);
 $dialogContent.dialog("close");

 },
 "delete" : function() {
 $calendar.weekCalendar("removeEvent", calEvent.id);
 $dialogContent.dialog("close");
 },
 cancel : function() {
 $dialogContent.dialog("close");
 }
 }
 }).show();

 var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
 var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
 $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
 setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
 $(window).resize().resize(); //fixes a bug in modal overlay size ??

 //alert('teste '+startField);

 },
 eventMouseover : function(calEvent, $event) {
 },
 eventMouseout : function(calEvent, $event) {
 },
 noEvents : function() {

 },
 data : function(start, end, callback) {
 callback(getEventData());
 }
 });

 //alert('teste '+startField);

 function resetForm($dialogContent) {
 $dialogContent.find("input").val("");
 $dialogContent.find("textarea").val("");
 }

 /*
 * Sets up the start and end time fields in the calendar event
 * form for editing based on the calendar event being edited
 */
 function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {

 for (var i = 0; i < timeslotTimes.length; i++) {
 var startTime = timeslotTimes[i].start;
 var endTime = timeslotTimes[i].end;
 var startSelected = "";
 if (startTime.getTime() === calEvent.start.getTime()) {
 startSelected = "selected=\"selected\"";
 }
 var endSelected = "";
 if (endTime.getTime() === calEvent.end.getTime()) {
 endSelected = "selected=\"selected\"";
 }
 $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
 $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");

 }
 $endTimeOptions = $endTimeField.find("option");
 $startTimeField.trigger("change");
 }

 var $endTimeField = $("select[name='end']");
 var $endTimeOptions = $endTimeField.find("option");

 //reduces the end time options to be only after the start time options.
 $("select[name='start']").change(function() {
 var startTime = $(this).find(":selected").val();
 var currentEndTime = $endTimeField.find("option:selected").val();
 $endTimeField.html(
 $endTimeOptions.filter(function() {
 return startTime < $(this).val();
 })
 );

 var endTimeSelected = false;
 $endTimeField.find("option").each(function() {
 if ($(this).val() === currentEndTime) {
 $(this).attr("selected", "selected");
 endTimeSelected = true;
 return false;
 }
 });

 if (!endTimeSelected) {
 //automatically select an end date 2 slots away.
 $endTimeField.find("option:eq(1)").attr("selected", "selected");
 }

 });

 var $about = $("#about");

 $("#about_button").click(function() {
 $about.dialog({
 title: "About this calendar demo",
 width: 600,
 close: function() {
 $about.dialog("destroy");
 $about.hide();
 },
 buttons: {
 close : function() {
 $about.dialog("close");
 }
 }
 }).show();
 });

});

Abs,

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...