The following JavaScript code makes use of the Calendar Manager API to add a new calendar, then a new event within this calendar, as well as a reminder and an attendee.
var myCalendar = new window.launchbox.CalendarManager.Calendar();
myCalendar.name = "myCalendar";
myCalendar.color = "#F03CDA";
var myEvent = new window.launchbox.CalendarManager.CalendarEvent();
myEvent.title = "myEvent";
myEvent.location = "Galapagos";
myEvent.dateStart = new Date("2015-10-14T14:00");
myEvent.dateEnd = new Date("2015-10-14T16:00");
var eventAttendee = new window.launchbox.CalendarManager.Attendee();
eventAttendee.name = "John";
eventAttendee.attendeeStatus = window.launchbox.CalendarManager.ACCEPTED;
eventAttendee.attendeeType = window.launchbox.CalendarManager.OPTIONAL;
myEvent.attendees.push(eventAttendee);
var eventReminder = new window.launchbox.CalendarManager.Reminder();
eventReminder.minutes = 45;
myEvent.reminders.push(eventReminder);
myCalendar.save()
.then(function(){
myEvent.calendar = myCalendar;
return myEvent.save();
})
.then(function(){
console.log("All is done !");
})
.catch(function(error){
console.log("Error! " + error.message);
});
The following JavaScript code makes use of the Calendar Manager API to edit reminders and attendees of an event.
window.launchbox.CalendarManager.getCalendars()
.then(function(calendars){
return calendars[0].getCalendarEvents();
})
.then(function(events)){
var event = events[0];
var existingReminder = event.reminders[0];
existingReminder.minutes = 50;
var myAttendee = new window.launchbox.CalendarManager.Attendee();
myAttendee.name = "John";
myAttendee.attendeeStatus = window.launchbox.CalendarManager.AttendeeStatus.INVITED;
myAttendee.attendeeType = window.launchbox.CalendarManage.AttendeeType.REQUIRED;
event.reminders.push(myAttendee);
return event.save()
})
.then(function(){
console.log("Changes saved");
})
.catch(function(error){
console.log("Error! " + error.message);
});The index.html file containing JavaScript that makes use of the
Calendar Manager API functionality is listed below.
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>CalendarManager API sample</title>
<link rel="stylesheet" href="assets/style.css" type="text/css" media="all"/>
<link rel="stylesheet" href="assets/menu_style.css" type="text/css" media="all"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script>
var calendarsList = [];
var currentCalendar = null;
var eventsList = [];
var currentEvent = null;
function onCalendarListClick() {
var d = $('#calendarsSection');
window.launchbox.CalendarManager.getCalendars()
.then(function (calendars) {
var html = "";
calendarsList = calendars;
for (var i = 0; i < calendarsList.length; i++) {
html += "<li onclick='setCurrentCalendar(calendarsList[" + i + "]);'><a>" + calendarsList[i].name + "</a></li>";
}
d.html(html);
})
.catch(function (error) {
alert(error);
});
}
function onAddCalendarClick() {
var newCalendar = new window.launchbox.CalendarManager.Calendar();
newCalendar.name=document.getElementById('newCalendarName').value;
newCalendar.color= "#" + document.getElementById('newCalendarColor').value;
newCalendar.save()
.then(function () {
alert("Calendar added successfully");
$('.menu > li > ul').hide();
})
.catch(function (error) {
alert(error);
});
}
function onRemoveCalendarClick() {
var ask = confirm("Do you want to remove calendar: " + currentCalendar.name + "?");
if (ask) {
window.launchbox.CalendarManager.removeCalendar(currentCalendar)
.then(function () {
alert("Calendar: " + currentCalendar.name + " removed successfully");
document.getElementById("eventWrapper").style.display = 'none';
document.getElementById("calendarWrapper").style.display = 'none';
})
.catch(function (error) {
alert(error);
});
}
}
function onShowCalendarEventsClick() {
var d = $('#eventsSection');
currentCalendar.getCalendarEvents()
.then(function (events) {
var html = "";
eventsList = events;
for (var i = 0; i < eventsList.length; i++) {
html += "<li onclick='setCurrentEvent(eventsList[" + i + "])'><a>" + eventsList[i].title + "</a></li>";
}
d.html(html);
})
.catch(function (error) {
alert(error);
});
}
function onAddNewEventClick() {
var dts= new Date(document.getElementById("datepickerS").value);
dts.setHours(Number(document.getElementById("hourS").value));
dts.setMinutes(Number(document.getElementById("minutesS").value));
var dte = new Date(document.getElementById("datepickerE").value);
dte.setHours(Number(document.getElementById("hourE").value));
dte.setMinutes(Number(document.getElementById("minutesE").value));
var newEvent = new window.launchbox.CalendarManager.CalendarEvent();
newEvent.title=document.getElementById("newEventTitle").value;
newEvent.location=document.getElementById("newEventLocation").value;
newEvent.dateStart = dts;
newEvent.dateEnd = dte;
newEvent.calendar = currentCalendar;
newEvent.save()
.then(function () {
alert("Event added successfully");
$('.menu > li > ul').hide();
onShowCalendarEventsClick();
})
.catch(function (error) {
alert(error);
});
}
function onRemoveEventClick() {
var ask = confirm("Do you want to remove event: " + currentEvent.title + " from calendar: " + currentCalendar.name + " ?");
if (ask) {
currentCalendar.removeCalendarEvent(currentEvent)
.then(function () {
alert("Event removed successfully.");
document.getElementById("eventWrapper").style.display = 'none';
onShowCalendarEventsClick();
})
.catch(function (error) {
printText(error);
});
}
}
function onAddAttendeeClick() {
var attendee= new window.launchbox.CalendarManager.Attendee();
attendee.name = document.getElementById("attName").value;
attendee.attendeeStatus = Number(document.getElementById("attStatus").value);
attendee.attendeeType = Number(document.getElementById("attType").value);
currentEvent.attendees.push(attendee);
setCurrentEvent(currentEvent);
}
function onAddReminderClick() {
var reminder = new window.launchbox.CalendarManager.Reminder();
reminder.minutes = Number(document.getElementById("remMin").value);
currentEvent.reminders.push(reminder);
setCurrentEvent(currentEvent);
}
function createButtonNewAttendee() {
var d = $('#editAttendees');
d.append("<li><a>Name: <input type='text' id='attName'/> Status: <select id='attStatus'><option value='0'>Unknown</option><option value='1'>Invited</option><option value='2'>Accepted</option><option value='3'>Declined</option><option value='4'>Tentative</option></select> Type:<select id='attType'><option value='0'>Unknown</option><option value='1'>Required</option><option value='2'>Optional</option></select></a></li>");
d.append("<li><a><input type='choice' onclick='onAddAttendeeClick();' value='Add new Attendee'/> </a></li>");
}
function createButtonNewReminder() {
var d = $('#editReminders');
d.append("<li><a>Minutes: <input type='number' id='remMin'/> <input type='choice' onclick='onAddReminderClick();' value='Add new Reminder'/> </a></li>");
}
function updateDate(object, property ,value) {
var d = new Date(value);
d.setHours(object[property].getHours());
d.setMinutes(object[property].getMinutes());
object[property] = d;
}
function updateValue(object, property, value){
object[property]=value;
}
function saveEvent(){
currentEvent.save()
.then(function(){
alert('Changes saved succesfully.');
setCurrentEvent(currentEvent);
})
.catch(function (error) {
alert(error);
});
}
function setCurrentCalendar(calendar) {
currentCalendar = calendar;
currentEvent = null;
$('#currentCalendarSection').html("Calendar: " + currentCalendar.name);
eventsList = [];
var html = "";
html += "<li><a>ID: " + currentCalendar.id + "</a></li><li><a>Name: " + currentCalendar.name + "</a></li><li><a>Color: " + currentCalendar.color + "</a></li>";
$('#calendarDetails').html(html);
document.getElementById("eventWrapper").style.display = 'none';
document.getElementById("calendarWrapper").style.display = 'block';
}
function setCurrentEvent(event) {
currentEvent = event;
var d = $('#editDetails');
var html = "<li><a>Title: <input type='text' id='editedTitle' value='" + currentEvent.title + "'/></a></li>";
html += "<li><a>Location: <input type='text' id='editedLocation' value='" + currentEvent.location + "'/></a></a></li>";
html += "<li><a>Date Start: <input type='text' id='editedDateStart' value='" + currentEvent.dateStart.getFullYear() + "-" + (currentEvent.dateStart.getMonth() + 1) + "-" + currentEvent.dateStart.getDate() + "'/></a></li>";
html += "<li><a>Date End: <input type='text' id='editedDateEnd' value='" + currentEvent.dateEnd.getFullYear() + "-" + (currentEvent.dateEnd.getMonth() + 1) + "-" + currentEvent.dateEnd.getDate() + "'/></a></li>";
d.html(html);
$("#editedDateStart").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#editedDateEnd").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#editedTitle").change(function(){updateValue(currentEvent,"title", $('#editedTitle').val());});
$("#editedLocation").change(function(){updateValue(currentEvent,"location", $('#editedLocation'+ i).val());});
$("#editedDateStart").change(function(){updateDate(currentEvent,"dateStart" ,$('#editedDateStart').val());});
$("#editedDateEnd").change(function(){updateDate(currentEvent,"dateEnd", $('#editedDateEnd').val());});
$('#editAttendees').html("");
for (var i = 0; i < currentEvent.attendees.length; i++) {
(function(i) {
$('#editAttendees').append(" <li><a>ID:" + currentEvent.attendees[i].id + " Name: <input type='text' id='att" + i + "' value='" + currentEvent.attendees[i].name + "'/> Status: <select id='attStatus" + i + "'><option value='0'>Unknown</option><option value='1'>Invited</option><option value='2'>Accepted</option><option value='3'>Declined</option><option value='4'>Tentative</option></select> Type:<select id='attType" + i + "'><option value='0'>Unknown</option><option value='1'>Required</option><option value='2'>Optional</option></select></a></li>");
$("#attStatus" + i).val(currentEvent.attendees[i].attendeeStatus);
$("#attType" + i).val(currentEvent.attendees[i].attendeeType);
$("#att" + i).change(function () {
updateValue(currentEvent.attendees[i], "name", $('#att' + i).val());
});
$("#attStatus" + i).change(function () {
updateValue(currentEvent.attendees[i], "attendeeStatus", Number($('#attStatus' + i).val()));
});
$("#attType" + i).change(function () {
updateValue(currentEvent.attendees[i], "attendeeType", Number($('#attType' + i).val()));
});
})(i);
}
createButtonNewAttendee();
$('#editReminders').html("");
for (var j = 0; j < currentEvent.reminders.length; j++) {
(function (j) {
$('#editReminders').append("<li><a>ID: " + currentEvent.reminders[j].id + " Minutes: <input type='number' id='rem" + j + "' value='" + currentEvent.reminders[j].minutes + "'/></a></li>");
$("#rem" + j).change(function () {
updateValue(currentEvent.reminders[j], "minutes", Number($('#rem' + j).val()));
});
})(j);
}
createButtonNewReminder();
var status = document.getElementById("eventWrapper").style.display;
if (status === 'none') {
document.getElementById("eventWrapper").style.display = 'block';
}
}
</script>
</head>
<body>
<header>
<h3>AMP Hybrid Client
<span>Calendar API test</span>
</h3>
</header>
<div class="title">Calendar Manager API
<a href="http://10.20.92.42"> appLinkTest </a>
</div>
<div id="mainWrapper">
<ul class="menu">
<li><a onclick="onCalendarListClick();">Select calendar</a>
<ul id="calendarsSection"></ul>
</li>
<li><a>Add calendar</a>
<ul>
<li>
<a>Name:
<input id="newCalendarName" type="text" name="name" value=""/>
Color:
<input id="newCalendarColor" class="color" value="66ff00"/>
</a>
</li>
<li>
<a> <input type="choice" onclick="onAddCalendarClick()" value="Create new calendar"/></a>
</li>
</ul>
</li>
<li onclick="onRemoveCalendarClick();"><a>Remove current calendar</a></li>
</ul>
</div>
<div id="calendarWrapper" style="display: none">
<br/>
<div class="title" id="currentCalendarSection">Calendar:</div>
<ul class="menu">
<li><a>Details</a>
<ul id="calendarDetails"></ul>
</li>
<li onclick="onShowCalendarEventsClick();"><a>Get events</a>
<ul id="eventsSection"></ul>
</li>
<li><a>Add event </a>
<ul>
<li style="text-align: left"><a>Title: <input type="text" id="newEventTitle"/> Location: <input type="text" id="newEventLocation"/></a></li>
<li><a>Start Date: <input type="text" id="datepickerS"/> H: <input type="number" id="hourS" size="2" min="0" max="23"/> M: <input type="number" id="minutesS" size="2" min="0" max="59"/></a></li>
<li><a>End Date: <input type="text" id="datepickerE"/> H: <input type="number" id="hourE" size="2" min="0" max="23"/> M: <input type="number" id="minutesE" size="2" min="0" max="59"/></a></li>
<li><a><input type="choice" onclick="onAddNewEventClick()" value="Add new Event"/> </a></li>
</ul>
</li>
<li onclick="onRemoveEventClick();"><a>Remove currently selected event</a></li>
</ul>
</div>
<div id="eventWrapper" style="display: none">
<br/>
<div class="title" id="currentEventSection">Event:</div>
<ul class="menu">
<li><a>Details of event</a>
<ul id="editDetails"></ul>
</li>
<li><a>Attendees</a>
<ul id="editAttendees"></ul>
</li>
<li><a>Reminders</a>
<ul id="editReminders"></ul>
</li>
<li onclick="saveEvent();"><a>Save</a></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true, true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true, true).slideUp('normal');
}
});
$("#datepickerS").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#datepickerE").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#editedDateStart").datepicker({
dateFormat: 'yy-mm-dd'
});
$("#editedDateEnd").datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
</body>
</html>The contents of the cache manifest file called manifest.appcache for
this application are listed below:
CACHE MANIFEST CACHE: index.html NETWORK: *
The webapp-descriptor.xml file for this application is defined in the
following way:
<?xml version="1.0" encoding="UTF-8"?> <webapp-descriptor xmlns="http://www.pega.com/application-hosting/ web-app-descriptor/2.0"> <id>com.pega.sample.CalendarManager</id> <version>1.0.0</version> <name>Calendar Manager API usage example</name> </webapp-descriptor>