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

Schema Setup

We will need to create a new Schema called ‘appoinment_slots’ which we will use in the Dynamic Data manager node in the Experience Designer. This Schema will hold the data of the Dates that are available for the appointment and the Time slot within each available date.

Go to the Experience Manager Left Navigation> Develop> Schemas.
Click the ‘Create a Schema’ button.
In the dialog box, type in appointment_slots as the Schema name with Content-Type and provide the other details.

In the Schema fields section, paste the below standard Appointment Slot Schema properties.

{
    "fields": [
        {
            "type": "String",
            "fieldType": "text",
            "ref": "",
            "options": [],
            "multiple": false,
            "validation": [
                {
                    "required": true
                }
            ],
            "isDefault": false,
            "label": "slotId",
            "key": "slotId"
        },
        {
            "type": "Date",
            "fieldType": "datetime",
            "ref": "",
            "options": [],
            "multiple": false,
            "validation": [
                {
                    "required": true
                }
            ],
            "isDefault": true,
            "label": "startDateTime",
            "key": "startDateTime"
        },
        {
            "type": "Date",
            "fieldType": "datetime",
            "ref": "",
            "options": [],
            "multiple": false,
            "validation": [
                {
                    "required": true
                }
            ],
            "isDefault": true,
            "label": "endDateTime",
            "key": "endDateTime"
        },
        {
            "type": "Object",
            "fieldType": "json",
            "ref": "",
            "options": [],
            "multiple": false,
            "validation": [
                {
                    "required": true
                }
            ],
            "isDefault": false,
            "label": "preferableTimings",
            "key": "preferableTimings"
        }
    ]
}

Data Setup

Visit the Content screen on the Left Menu. Left Navigation Menu> Create> Component> Content.
Here, choose the appointment_slot that we created 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 DateTime object.

Sample:

[{"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 that is newly created, appointment_slots.
Connect the Scheduler Directive Function node with the Chatbot flow and we can trigger the scheduler directive from the chatbot.

Calendar - Scheduler Directive

Schema Setup

Data Setup

Experience Designer Flow Setup