Calendar Manager example

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.

2.	var myCalendar = new window.launchbox.CalendarManager.Calendar();
myCalengar.name = "myCalendar";
myCalendar.color = "#F03CDA";
 
var myEvent = new window.launchbox.CalendarManager.CalendarEvent();
myEvent.title = "myEvent";
myEvent.location = "Galapagos";
myEvent.dateStart = new Date("2015-10-14 14:00”);
myEvent.dateEnd = new Date("2015-10-14 16: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>

Related topics

Public API reference
Contacts
Legal notice | Copyright © 2016 and Confidential to Pegasystems Inc. All rights reserved
PDN | Hybrid Container | Feedback
Advanced...