Calendar - Scheduler Directive

Owned by Bharathi Manohar (Unlicensed)
Last updated: Oct 20, 2022
3 min read

This document will help implement the Calendar Scheduler directive with the Date and Time picker.

Date picker
Time Slot picker

 

 

Appointment Slot Schema

We may take advantage of the system's built-in "Appointment Slot" Dynamic Schema. This Schema will store the information on the appointment's possible dates and the time slot within each of those dates.

We won't be able to see this schema's properties directly. We may utilise them to add content.

Data Setup

  • Visit the Content screen on the Left Menu. Left Navigation Menu> Create> Component> Content.

  • Here, choose Appointment_Slot Schema in the dropdown and click the + icon to add data manually.

  • Feed in the data for the available date for appointments and the corresponding preferable time slots.

  • Provide the preferable timeslots in an Array of a DateTime object.

    Sample for Preferable Timings:

    [{"time": "2022-10-31T15:25:00.000Z"}, {"time": "2022-10-31T16:25:00.000Z"}]



     

  • Alternatively, we can also inject the data into the environment by using the Dynamic Data manager node in the Experience designer with the help from Orbita Support.

Experience Designer Flow Setup

Open the Experience Designer and follow the below steps.

  • Copy the below snippet. This is a sample code to configure the Calendar Scheduler directive in the Experience Designer.

    [{"id":"305d6c10.d8f194","type":"http in","z":"df52c7e0.7307c8","name":"get disabled dates","url":"/62e383eaa2b71800890b50ee/changemonth","method":"get","upload":false,"swaggerDoc":"","x":130,"y":400,"wires":[["d8fa8650.b04508"]]},{"id":"c0e30de2.2f197","type":"orbita-dynamic-data-manager","z":"df52c7e0.7307c8","action":"Get","payload":"{\n \"startDateTime\": { \"$gte\" : \"{{msg.startDate}}\"},\n \"endDateTime\": { \"$lte\" : \"{{msg.endDate}}\"}\n}","query":"{}","model":"appointmentslots","schemaType":"content","x":570,"y":400,"wires":[["399bcfe0.8f516"]]},{"id":"d8fa8650.b04508","type":"function","z":"df52c7e0.7307c8","name":"month range convertion","func":"var moment = global.get('moment');\nvar _ = global.get('lodash');\nvar date = msg.req.query.date;\nvar dateRequest = moment(date);\nvar startDate = moment(date).startOf(\"month\").utc().toISOString();\nmsg.startDate = startDate;\nmsg.endDate = moment(startDate).add(1, \"months\").startOf(\"month\").utc().toISOString();\nreturn msg;\n","outputs":1,"noerr":0,"x":350,"y":400,"wires":[["c0e30de2.2f197"]]},{"id":"e85542e.2b21ec","type":"http response","z":"df52c7e0.7307c8","name":"","statusCode":"","headers":{},"x":950,"y":400,"wires":[]},{"id":"399bcfe0.8f516","type":"function","z":"df52c7e0.7307c8","name":"find disabled dates","func":"const _ = global.get('lodash');\nvar moment = global.get('moment');\nconst results = _.get(msg, 'data.dynamicData.result', []);\nvar availableDates = []\nvar lastDate = 'nothing'\nfor (var i=0; i < results.length; i++) {\n var d = moment(results[i].startDateTime).format('MM-DD-YYYY')\n if (d !== lastDate) {\n availableDates.push(d); \n }\n lastDate = d;\n}\nvar dayPointer = moment(msg.startDate).startOf(\"month\").format('MM-DD-YYYY');\nvar nextMonthfirstDay = moment(msg.startDate).add(1, \"months\").startOf(\"month\").format('MM-DD-YYYY');\ndisableDates = [];\nfor (var i=0; i<32; i++) {\n if(availableDates.indexOf(dayPointer) === -1) {\n disableDates.push(dayPointer);\n }\n dayPointer = moment(dayPointer).add(1, \"days\").format('MM-DD-YYYY');\n if (dayPointer === nextMonthfirstDay) {\n break;\n }\n}\nmsg.payload = disableDates;\nreturn msg;","outputs":1,"noerr":0,"x":770,"y":400,"wires":[["e85542e.2b21ec"]]},{"id":"15aa0046.53566","type":"function","z":"df52c7e0.7307c8","name":"date range convertion","func":"var moment = global.get('moment');\nvar _ = global.get('lodash');\nvar date = msg.req.query.date;\nvar dateRequest = moment(date);\nmsg.startOfDay = dateRequest.startOf(\"day\").utc().toISOString();\nmsg.endOfDay = moment(msg.startOfDay).endOf(\"day\").utc().toISOString();\nreturn msg;\n","outputs":1,"noerr":0,"x":340,"y":460,"wires":[["2ead56c1.88d0aa"]]},{"id":"5b5cceef.7ed2","type":"http in","z":"df52c7e0.7307c8","name":"get available slots","url":"/62e383eaa2b71800890b50ee/getslots","method":"get","upload":false,"swaggerDoc":"","x":130,"y":460,"wires":[["15aa0046.53566"]]},{"id":"2ead56c1.88d0aa","type":"orbita-dynamic-data-manager","z":"df52c7e0.7307c8","action":"Get","payload":"{\n \"startDateTime\": { \"$gte\" : \"{{msg.startOfDay}}\"},\n \"endDateTime\": { \"$lte\" : \"{{msg.endOfDay}}\"}\n}","query":"{}","model":"appointmentslots","schemaType":"content","x":570,"y":460,"wires":[["e231172f.9f3ac8"]]},{"id":"e231172f.9f3ac8","type":"function","z":"df52c7e0.7307c8","name":"find available slots","func":"const _ = global.get('lodash');\nvar moment = global.get('moment');\nconst results = _.get(msg, 'data.dynamicData.result', []);\nconst availableSlots = [];\nif (results.length > 0 && results[0].preferableTimings&& results[0].preferableTimings.length > 0) {\n results[0].preferableTimings.map(obj => {\n const newObj = {\n displayName: moment(obj.time).format('hh:mm A'),\n dateTime: obj.time\n };\n availableSlots.push(newObj);\n })\n}\nmsg.payload = availableSlots;\nreturn msg;","outputs":1,"noerr":0,"x":770,"y":460,"wires":[["3d9ba9e2.d18146"]]},{"id":"3d9ba9e2.d18146","type":"http response","z":"df52c7e0.7307c8","name":"","statusCode":"","headers":{},"x":950,"y":460,"wires":[]},{"id":"9901739c.126df","type":"function","z":"df52c7e0.7307c8","name":"Scheduler Directive","func":"if (!msg.payload.orbita) {\n msg.payload.orbita = {};\n}\nif (!msg.payload.orbita.directive) {\n msg.payload.orbita.directive = [];\n}\nmsg.payload.orbita.directive = [\n {\n type: \"calendar\",\n }\n];\nreturn msg;\n","outputs":1,"noerr":0,"x":630,"y":340,"wires":[["5f11cfa1.29fdc"]]},{"id":"5f11cfa1.29fdc","type":"alexa-http response","z":"df52c7e0.7307c8","name":"","x":820,"y":340,"wires":[]},{"id":"89145928.f756c8","type":"alexa-http launch","z":"df52c7e0.7307c8","name":"","skillConfig":"2f250a4e.4ea936","disableLogging":false,"skillstate":"fromsession","x":150,"y":340,"wires":[["9901739c.126df"]]},{"id":"2f250a4e.4ea936","type":"alexa-skill-config","skillname":"Kirlesh project","projectId":"62e383eaa2b71800890b50ee","intents":"[]","skillstate":"fromsession"},{"id":"slots","type":"slots","z":"","slots":[]}]

  • In the Experience Designer, go to the top-right hamburger menu> Import> Clipboard. Paste the code and click Import. You will be able to render the Flows on the Designer.

     

  • In the Dynamic Data manager nodes, choose the Schema Appointment_Slots.

  • Connect the Scheduler Directive Function node with the Chatbot flow and we can trigger the scheduler directive from the chatbot.