Combining Calendar into Request Embedding a Deployment Times Calendar into a Request

3 Agenda  Combining Calendar & Request  Creating Calendar Data  Creating the Calendars  Embedding Calendar in Request  Questions

4 Who Am I?  Anne Ramey    Consultant  Community.kineticdata.com

5 Combining Calendar and Request?

Creating Calendar Data

7 Creating the Calendar Data  Two Data Sets, One Data Source  Available Time Slots  Reserved Time Slots  Supporting/Managing this Data  Creating this Data

8 Available Time Slots

9 Reserved Time Slot

10 Automated Time Slot Creation

Creating the Calendars

12 Creating the Calendars  Example Booked Time Calendar { "name": "Desktop Reserved Times", "id": "ScheduleDesktop", "description": "Reserved Times for Desktop Appointments", "status": "Active", "defaultView": "Week", "displayPage": "/themes/default/calendar.jsp", "visibleInListing": true, "clickHandler": {}, "eventTypeOrder": [] }

13 Creating the Calendars  Example Booked Time Event { "name": "Completed", "status": "Active", "defaultFilter": "", "detailsPage": "/themes/default/event.jsp", "color": null, "source": { "connectionName": "ITSM ARS", "configuration": { "Form": "CUSTOM:KS_TimeSlots", "Qualification": "'Status' = \"Reserved\" AND 'CalendarName' = \"My Deployment Calendar\"" }, "coreMappings": { "Id": "{{1}}", "Name": "{{ }}", "Description": "{{ }}", "Start": "{{ }}", "End": "{{ }}" }, "detailMappings": { "SlotName": "{{ }}", "SlotStartTime": "{{ }}", "SlotEndTime": "{{ }}", "Service Item Details": "{{ }}" }, "filterMappings": [ { "name": "Duration", "value": "{{ }}", "values": {} } ] }

14 Creating the Calendars  Example Available Time Calendar { "name": "Desktop Available Times", "id": " ScheduleDesktopAvailable", "description": "Available Times for Desktop Appointments", "status": "Active", "defaultView": "Day", "displayPage": "/themes/default/calendar.jsp", "visibleInListing": false, "clickHandler": {}, "eventTypeOrder": [] }

15 Creating the Calendars  Example Available Time Event { "name": "Available", "status": "Active", "defaultFilter": "", "detailsPage": "/themes/default/event.jsp", "color": null, "source": { "connectionName": "ITSM ARS", "configuration": { "Form": "CUSTOM:KS_TimeSlots", "Qualification": "'Status' = \"Available\" AND 'CalendarName' = \"My Deployment Calendar\"" }, "coreMappings": { "Id": "{{1}}", "Name": "{{ }}", "Description": "{{ }}", "Start": "{{ }}", "End": "{{ }}" }, "detailMappings": { "SlotName": "{{ }}", "SlotStartTime": "{{ }}", "SlotEndTime": "{{ }}" }, "filterMappings": [ { "name": "Available", "value": "{{ }}", "values": {} } ] }, "clickHandler": { "type":"js", "callback":"window.parent.setEventDetails", "parameters": {} }

Embedding Calendar in Request

17 Service Item – User View

18 Service Item – Developer View  Calendar Frame <iframe id="calFrame" height="700px" width="97%" data-src="/kineticCalendar/calendar?id=ScheduleDesktopAvailable&embedded=true"> Your browser does not support iframes.

19 Showing the Calendar  Clicking the button to select a time calls the showCalendar() function that sets a default time and a change on the Select a Date field, which actually displays the calendar.

20 Calendar Click Event  A function must exist in the service item to handle the click in the embedded calendar (as configured in the calendar)

21 timeSlots.js  Part of a package to manage the time slots as described in this example  Provides:  setCalendarURL(isoDate, calFrameElementId)  setCalendarEventDetails(calendarEvent, dateQuestionName, eventIdQuestionName)  reserveSlot(slotID, status, name, details, itemID, itemNo, workOrderID)  & more

22 Tree Set-Up  The Timeslot needs to be released on Denial, Expiration, or Cancellation. This can be done by using the KS Timeslot Record Update handler.

23 What did we just cover?  Combining Calendar & Request  Creating Calendar Data  Creating the Calendars  Embedding Calendar in Request

24 Questions?