/*
Spark Events Calendar XML Example:
This is a simple example on how to use XML to populate the calendar
with an XML data file.
The XML file could be generated via PHP or CF (or similar) from
a database or written by hand.
*/
var daysOfWeek_array = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
var monthsOfYear_array = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"]
// dateTimeFormat is used to output dates in more readable style
// by passing in a mask such as:
// "dddd, d mmmm yyyy" which would return "Tuesday, 4 February 2003"
Date.prototype.dateTimeFormat = function (mask) {
var out = "";
var i = 0;
while (i < mask.length) {
// escaped characters
if (mask.substr(i,1) == "*") {
out += mask.substr(i+1,1);
i=i+2;
// year
} else if (mask.substr(i,4) == "yyyy") {
out += this.getFullYear().toString();
i=i+4;
} else if (mask.substr(i,2) == "yy") {
out += this.getFullYear().toString().substr(2,2);
i=i+2;
// month
} else if (mask.substr(i,4) == "mmmm") {
out += monthsOfYear_array[this.getMonth()];
i=i+4;
} else if (mask.substr(i,3) == "mmm") {
out += monthsOfYear_array[this.getMonth()].substr(0,3);
i=i+3;
} else if (mask.substr(i,2) == "mm") {
if (this.getMonth() < 10) out += "0";
out += (this.getMonth() + 1);
i=i+2;
} else if (mask.substr(i,1) == "m") {
out += (this.getMonth() + 1);
i++;
// date
} else if (mask.substr(i,4) == "dddd") {
out += daysOfWeek_array[this.getDay()];
i=i+4;
} else if (mask.substr(i,3) == "ddd") {
out += daysOfWeek_array[this.getDay()].substr(0,3);
i=i+3;
} else if (mask.substr(i,2) == "dd") {
if (this.getDate() < 10) out += "0";
out += this.getDate();
i=i+2;
} else if (mask.substr(i,1) == "d") {
out += this.getDate();
i++;
// hours
} else if (mask.substr(i,2) == "HH") {
if (this.getHours() < 10) out += "0";
out += this.getHours();
i=i+2;
} else if (mask.substr(i,2) == "hh") {
if ((this.getHours() < 10 and this.getHours() > 0) or (this.getHours() < 22 and this.getHours() > 12)) {
out = out + "0";
}
if (this.getHours() > 12) {
out += (this.getHours() - 12);
} else if (this.getHours() == 0) {
out += "12";
} else {
out += this.getHours();
}
i=i+2;
} else if (mask.substr(i,1) == "H") {
out = out + this.getHours();
i++;
} else if (mask.substr(i,1) == "h") {
if (this.getHours() > 12) {
out += (this.getHours() - 12);
} else if (this.getHours() == 0) {
out += "12";
} else {
out += this.getHours();
}
i++;
// minutes
} else if (mask.substr(i,2) == "nn") {
if (this.getMinutes() < 10) {
out += "0";
}
out += this.getMinutes();
i=i+2;
} else if (mask.substr(i,1) == "n") {
out += this.getMinutes();
i++;
// seconds
} else if (mask.substr(i,2) == "ss") {
if (this.getSeconds() < 10) {
out += "0";
}
out += this.getSeconds();
i=i+2;
} else if (mask.substr(i,1) == "s") {
out += this.getSeconds();
i++;
// am - pm
} else if (mask.substr(i,2) == "tt") {
if (this.getHours() < 12) {
out += "am";
} else {
out += "pm";
}
i=i+2;
} else if (mask.substr(i,1) == "t") {
if (this.getHours() < 12) {
out += "a";
} else {
out += "p";
}
i++;
} else if (mask.substr(i,2) == "TT") {
if (this.getHours() < 12) {
out += "AM";
} else {
out += "PM";
}
i=i+2;
} else if (mask.substr(i,1) == "T") {
if (this.getHours() < 12) {
out += "A";
} else {
out += "P";
}
i++;
// anything else
} else {
out += mask.substr(i,1);
i++
}
}
return out;
}
// show the event information when a date with events is clicked
calendar_ec.onDisplayEvent = function (eventsData, dateObj) {
var event_str = "<font color='#C10B0B'><b>" + dateObj.dateTimeFormat("dddd, d mmmm yyyy") + "</b></font><br><br>";
function orderByTime(a, b) {
var time1 = a.startDate.dateTimeFormat("HHmmss");
var time2 = b.startDate.dateTimeFormat("HHmmss");
if (time1 < time2) {
return -1;
} else if (time1 > time2) {
return 1;
} else {
return 0;
}
}
eventsData.sort(orderByTime);
for (var i=0; i<eventsData.length; i++) {
// create a pointer to the eventdata to save typing!
var d = eventsData[i];
// output the title of the event
event_str += "<font color='#283569'><b>" + d.title + "</b></font><br>";
// if the start and end date are different dates display the range
if (d.startDate.getDate() <> d.endDate.getDate()) {
event_str += "<font color='#283569'>" + d.startDate.dateTimeFormat("d/m/yyyy") + " - " + d.endDate.dateTimeFormat("d/m/yyyy") + "</font><br>";
}
// output the start and end time of the events (contained within startDate and endDate)
if (!d.allDay) event_str += "<font color='#283569'>" + d.startDate.dateTimeFormat("h:nntt") + " - " + d.endDate.dateTimeFormat("h:nntt") + "</font><br>";
// for weekly events
if (d.eventType == "weekly") {
// the following outputs the pattern information for the recurring event
var output_str = "Every " + ((d.pattern.attributes.recur > 1) ? d.pattern.attributes.recur + " " : "") + "week" + ((d.pattern.attributes.recur > 1) ? "s" : "") + " on ";
var days_array = new Array();
for (var q=0; q<daysOfWeek_array.length; q++) {
if (d.pattern.attributes[daysOfWeek_array[q].substr(0,3).toLowerCase()] == 1) days_array.push(daysOfWeek_array[q]);
}
if (days_array.length == 7) {
output_str += "every day";
} else if (days_array[0] == "Monday" && days_array[1] == "Tuesday" && days_array[2] == "Wednesday" && days_array[3] == "Thursday" && days_array[4] == "Friday") {
output_str += "weekdays";
} else if (days_array[0] == "Sunday" && days_array[1] == "Saturday") {
output_str += "weekends";
} else {
for (var q=0; q<days_array.length; q++) {
if (days_array.length > 1 && q == days_array.length - 1) {
output_str += " and ";
} else if (q > 0) {
output_str += ", ";
}
output_str += days_array[q];
}
}
event_str += "<font color='#283569'>" + output_str + "</font><br>";
// the event type is monthly
} else if (d.eventType == "monthly") {
// the following outputs the pattern information for the recurring event
var numString_array = ["First","Second","Third","Fourth","Last"];
if (d.pattern.attributes.date) {
output_str = "Day " + d.pattern.attributes.date + " of every " + ((d.pattern.attributes.recur > 1) ? d.pattern.attributes.recur + " " : "") + "month" + ((d.pattern.attributes.recur > 1) ? "s" : "");
} else {
if ("sun,mon,tue,wed,thu,fri,sat".indexOf(d.pattern.attributes.day) > 0) {
var days_obj = {sun:"Sunday",mon:"Monday",tue:"Tuesday",wed:"Wednesday",thu:"Thursday",fri:"Friday",sat:"Saturday"};
var patternDay = days_obj[d.pattern.attributes.day];
} else if (d.pattern.attributes.day == "day") {
var patternDay = "day";
} else if (d.pattern.attributes.day == "weekday") {
var patternDay = "weekday";
} else if (d.pattern.attributes.day == "weekendday") {
var patternDay = "weekend day";
}
output_str = numString_array[d.pattern.attributes.week - 1] + " " + patternDay + " " + ((d.pattern.attributes.recur > 1) ? "every " + d.pattern.attributes.recur + " " : "of every ") + "month" + ((d.pattern.attributes.recur > 1) ? "s" : "")
}
event_str += "<font color='#283569'>" + output_str + "</font><br>";
}
// output the description
if (d.description.length) event_str += d.description + "<br>";
// if there are more events output a line break
if (i < eventData_array.length - 1) event_str += "<br>";
}
// output the generated string to the text box
events_txt.htmlText = event_str;
}
// onSelectDate is called when a day with no events is clicked
calendar_ec.onSelectDate = function (dateObj) {
events_txt.htmlText = "<font color='#283569'><b>" + dateObj.dateTimeFormat("dddd, d mmmm yyyy") + "</b></font><br><br>";
events_txt.htmlText += "Hari ini tidak ada kegiatan.";
}
// onHideEvent removes any events information
calendar_ec.onHideEvent = function () {
events_txt.htmlText = "";
}
// parse date prototype
// takes a string formatted as: "yyyy-mm-dd HH:mm:ss" and converts it to a date object
String.prototype.parseDate = function () {
var d = this.split(" ")[0].split("-");
var t = this.split(" ")[1].split(":");
return new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
}
// hide the calendar while we populate it
calendar_mc._visible = false;
getEvents = new XML();
getEvents.ignoreWhite = true;
// when the data has been loaded
getEvents.onLoad = function () {
// calendar_array will hold the calendar data that has been loaded
var calendar_array = new Array();
var minStartDate = this.firstChild.attributes.startDate.parseDate();
var maxEndDate = this.firstChild.attributes.endDate.parseDate();
// minStartDate and maxEndDate are used to set the displayRange
calendar_ec.setDisplayRange({begin:minStartDate,end:maxEndDate});
// loop over the event nodes in the xml
// and stores the record as an object inside calendar_array
var qNodes = this.firstChild.childNodes;
for (var q=0; q<qNodes.length; q++) {
var d = qNodes[q].attributes;
calendar_array.push({title:d.title,description:d.description,startDate:d.startDate.parseDate(),endDate:d.endDate.parseDate(),allDay:Boolean(d.allDay),eventType:d.eventType,pattern:qNodes[q].firstChild});
}
// pass the data array to the calendar
calendar_ec.setDataProvider(calendar_array);
// show the calendar now it is ready
calendar_ec._visible = true;
// simulate a click on today's date to show any events that happen today
calendar_ec.getDayByDate(new Date().getDate()).onRelease();
}
// load the SparkEventsCalendar_example2.txt into the XML object
getEvents.load("jadwal.xml");
Download aja disini
Download jaa ke 2
