Hi All,
I am new to jQuery and been having a problem integrating recurring events to jQuery FullCalendar.
Events are currently being stored in a SQL Server database. I will like to display recurring events based on days of the week.
Here is what I have so far;
//Data on calendarDetails
id title description startdate enddate starttime endtime repeating repeatDays
21 Repeated Event 1 <p>Description for repeated event 1</p>
2014-07-25 00:00:00 2014-08-25 00:00:00 11:00am 12:00pm 1 Friday
22 Single Event 1 <p>Single Event Description</p>
2014-07-28 00:00:00 2014-07-28 00:00:00 1:00pm 2:00pm 0 NULL
//Data on CalendarRepeatEvents
id eventid eventdate
80 21 2014-07-25 00:00:00
81 21 2014-08-01 00:00:00
82 21 2014-08-08 00:00:00
83 21 2014-08-15 00:00:00
84 21 2014-08-22 00:00:00
//Script on Calendar Page
<script>
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var lastView;
$('#calendar').fullCalendar({
eventClick: function (calEvent) {
var eventDesc = calEvent.description;
var start = $.fullCalendar.formatDate(calEvent._start, 'h:mm tt');
var end = $.fullCalendar.formatDate(calEvent._end, 'h:mm tt');
var eDate = $.fullCalendar.formatDate(calEvent._start, 'MM/dd/yyyy');
var fancyContent = ('<h2>Event Details</h2><hr /><div id="prac" class="pracform"><label><b>Event:</b></label>' +
calEvent.title + '<br>' +
'<label><b>Date:</b></label>' + eDate + '<br>' +
'<label><b>Start Time:</b></label>' + start + '<br>' +
'<label><b>End Time:</b></label>' + end + '<br>' +
'<label><b>Description:</b></label>' +
'<div class="event_desc">' + eventDesc + '</div></div>');
$.fancybox({
'content': fancyContent,
'width': '750',
'height': 'auto',
'autoDimensions': false,
'type': 'iframe',
'autoSize': false
});
return false;
},
header: {
left: 'prev,next today',
center: 'title'
//right: 'month,agendaWeek,agendaDay'
//right: 'month'
},
viewDisplay: function (view) {
if (lastView == undefined) { lastView = 'firstRun'; }
//alert("viewname: "+ view.name + "lastView: " + lastView);
if (view.name != lastView) {
if (view.name == 'month') {
// alert("Month!");
}
lastView = view.name;
}
},
events: 'ws/getEventsCalendar.ashx',
timeFormat: 'h(:mm)tt ', // uppercase H for 24-hour clock
weekMode: 'liquid',
eventRender: function (event, element) {
}
});
});
// Credit: http://www.isummation.com/blog/decode-html-code-with-jquery1/
function HTMLDecode(s) {
return jQuery('<div></div>').html(s).text();
}
</script>
//Handler File getEventsCalendar
public void ProcessRequest(HttpContext context) {
DateTime today = DateTime.Now;
SqlConnection myConn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnString"].ToString());
context.Response.ContentType = "application/json";
int i = 0;
String result = String.Empty;
result += "[";
string sqlGet = @"Select id, title, description, startdate, enddate, starttime, endtime, repeating, repeatDays
from CalendarDetails where startDate > '" + today.AddDays(-60) + "' and Active = 'True'";
SqlCommand cmd = new SqlCommand(sqlGet, myConn);
cmd.Connection.Open();
System.Data.SqlClient.SqlDataReader DR = cmd.ExecuteReader();
while (DR.Read()) {
if (i == 0) {
DateTime startDate = Convert.ToDateTime(DR["startdate"]);
DateTime endDate = Convert.ToDateTime(DR["enddate"]);
TimeSpan startTime;
DateTime startDateTime;
TimeSpan endTime;
DateTime endDateTime;
if (TimeSpan.TryParse((string)DR["starttime"], out startTime)) {
startDateTime = startDate.Add(startTime);
} else {
startDateTime = startDate;
}
if (TimeSpan.TryParse((string)DR["endtime"], out endTime)) {
endDateTime = endDate.Add(endTime);
} else {
endDateTime = endDate;
}
string descrip = DR["description"].ToString();
descrip = descrip.Replace("<p>", "");
descrip = descrip.Replace("</p>", "");
bool repeating = (bool)DR["repeating"];
if (repeating == true) {
result += "{\\"id\\":\\"" + DR["id"] + "\\",\\"title\\":\\"" + DR["title"] + "\\",\\"description\\":\\"" + descrip + "\\",\\"start\\":\\"" + startDate.ToString(@"yyyy-MM-dd") + "T" + startDate.ToString(@"H\\:mm\\:ss") + "\\",\\"end\\":\\"" + endDate.ToString(@"yyyy-MM-dd") + "T" + endDate.ToString(@"H\\:mm\\:ss") + "\\",\\"allDay\\":false},";
} else {
result += "{\\"id\\":\\"" + DR["id"] + "\\",\\"title\\":\\"" + DR["title"] + "\\",\\"description\\":\\"" + descrip + "\\",\\"start\\":\\"" + startDate.ToString(@"yyyy-MM-dd") + "T" + startDate.ToString(@"H\\:mm\\:ss") + "\\",\\"end\\":\\"" + endDate.ToString(@"yyyy-MM-dd") + "T" + endDate.ToString(@"H\\:mm\\:ss") + "\\",\\"allDay\\":false},";
}
}
}
cmd.Connection.Close();
result = result.TrimEnd(',');
result += "]";
context.Response.Write(result);
}