Last active
March 20, 2022 23:14
-
-
Save migcosta/79705749e0414dfd9ce222336f582eab to your computer and use it in GitHub Desktop.
APL Calendar Template - Alexa Presentation Language Calendar Display
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "type": "APL", | |
| "version": "1.3", | |
| "theme": "light", | |
| "import": [ | |
| { | |
| "name": "alexa-layouts", | |
| "version": "1.1.0" | |
| } | |
| ], | |
| "settings": {}, | |
| "resources": [ | |
| { | |
| "description": "Day of the week colors", | |
| "colors": { | |
| "weekDaysRedThemeColor": "#E9342C", | |
| "weekDaysBlueThemeColor": "#478CBA", | |
| "weekDaysGreenThemeColor": "#8BC058" | |
| } | |
| }, | |
| { | |
| "description": "Light theme color", | |
| "colors": { | |
| "backgroundThemeColor": "#F8F9FA", | |
| "mainTitleThemeColor": "#7F8187", | |
| "weekDaysHeaderThemeColor": "#7F8187", | |
| "weekDaysThemeColor": "#4E4F53" | |
| }, | |
| "dimensions": { | |
| "weekDaysMarkerThemePositionTop": "35", | |
| "weekDaysMarkerThemePositionLeft": "30", | |
| "weekDaysContainerThemeWidth": "70", | |
| "weekDaysContainerThemeHeight": "50" | |
| }, | |
| "strings": { | |
| "mainImageThemeUrl": "https://openworld.tech/mc_file/hotel_light.png" | |
| } | |
| }, | |
| { | |
| "description": "Dark theme color", | |
| "when": "${viewport.theme == 'dark'}", | |
| "colors": { | |
| "backgroundThemeColor": "#202125", | |
| "mainTitleThemeColor": "#FFF", | |
| "weekDaysHeaderThemeColor": "#FFF", | |
| "weekDaysThemeColor": "#FFF" | |
| }, | |
| "strings": { | |
| "mainImageThemeUrl": "https://openworld.tech/mc_file/glass.png" | |
| } | |
| }, | |
| { | |
| "description": "Small Hub Round", | |
| "when": "${viewport.width < 490}", | |
| "dimensions": { | |
| "weekDaysMarkerThemePositionTop": "22", | |
| "weekDaysMarkerThemePositionLeft": "22", | |
| "weekDaysContainerThemeWidth": "54", | |
| "weekDaysContainerThemeHeight": "32" | |
| } | |
| }, | |
| { | |
| "description": "Small Hub ", | |
| "when": "${ (viewport.width > 490) && (viewport.width < 1024) }", | |
| "dimensions": { | |
| "weekDaysMarkerThemePositionTop": "33", | |
| "weekDaysMarkerThemePositionLeft": "24", | |
| "weekDaysContainerThemeWidth": "60", | |
| "weekDaysContainerThemeHeight": "45" | |
| } | |
| }, | |
| { | |
| "description": "Large Hub ", | |
| "when": "${ (viewport.width > 1024) && (viewport.width < 1920) }", | |
| "dimensions": { | |
| "weekDaysMarkerThemePositionTop": "40", | |
| "weekDaysMarkerThemePositionLeft": "39", | |
| "weekDaysContainerThemeWidth": "90", | |
| "weekDaysContainerThemeHeight": "60" | |
| } | |
| } | |
| ], | |
| "styles": { | |
| "headerStyle": { | |
| "values": { | |
| "fontSize": "10", | |
| "fontWeight": "100" | |
| } | |
| }, | |
| "dayStyle": { | |
| "values": { | |
| "fontSize": "11", | |
| "fontWeight": "100" | |
| } | |
| } | |
| }, | |
| "onMount": [], | |
| "graphics": { | |
| "dayMarker": { | |
| "type": "AVG", | |
| "version": "1.0", | |
| "height": 24, | |
| "width": 24, | |
| "parameters": [ | |
| "color" | |
| ], | |
| "items": [ | |
| { | |
| "type": "path", | |
| "pathData": "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3595452 2.81720757,16.5282213 4.18402996,18.2384356 C6.01644767,20.5312185 8.83669769,22 12,22 Z", | |
| "stroke": "#ECC30A", | |
| "strokeWidth": 0, | |
| "fill": "${color}" | |
| } | |
| ] | |
| } | |
| }, | |
| "commands": {}, | |
| "layouts": { | |
| "MC_calendarWeeksSequence": { | |
| "parameters": [ | |
| "weekDays" | |
| ], | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "type": "Sequence", | |
| "width": "100%", | |
| "height": "100%", | |
| "data": "${weekDays}", | |
| "scrollDirection": "vertical", | |
| "items": [ | |
| { | |
| "listData": "${data}", | |
| "type": "MC_calendarDaysSequence" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "MC_calendarDaysSequence": { | |
| "parameters": [ | |
| "listData" | |
| ], | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "items": [ | |
| { | |
| "type": "Sequence", | |
| "width": "100%", | |
| "data": "${listData}", | |
| "scrollDirection": "horizontal", | |
| "items": [ | |
| { | |
| "type": "MC_caLendarDay" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "MC_caLendarDay": { | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "width": "@weekDaysContainerThemeWidth", | |
| "height": "@weekDaysContainerThemeHeight", | |
| "items": [ | |
| { | |
| "type": "Text", | |
| "style": "dayStyle", | |
| "height": "100%", | |
| "alignSelf": "auto", | |
| "position": "relative", | |
| "textAlign": "center", | |
| "textAlignVertical": "center", | |
| "color": "@weekDaysThemeColor", | |
| "text": "${data.text}", | |
| "left": "0", | |
| "top": "0" | |
| }, | |
| { | |
| "type": "VectorGraphic", | |
| "width": 11, | |
| "height": 11, | |
| "position": "absolute", | |
| "color": "${data.marker_color}", | |
| "left": "@weekDaysMarkerThemePositionLeft", | |
| "top": "@weekDaysMarkerThemePositionTop", | |
| "source": "dayMarker", | |
| "scale": "fill" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "MC_calendarHeaderSequence": { | |
| "parameters": [ | |
| "listData" | |
| ], | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "items": [ | |
| { | |
| "type": "Sequence", | |
| "width": "100%", | |
| "data": "${listData}", | |
| "scrollDirection": "horizontal", | |
| "items": [ | |
| { | |
| "type": "MC_calendarHeader" | |
| } | |
| ], | |
| "alignSelf": "auto" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| "MC_calendarHeader": { | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "width": "@weekDaysContainerThemeWidth", | |
| "items": [ | |
| { | |
| "type": "Text", | |
| "style": "headerStyle", | |
| "textAlign": "center", | |
| "textAlignVertical": "center", | |
| "color": "@weekDaysHeaderThemeColor", | |
| "text": "${data}" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| }, | |
| "mainTemplate": { | |
| "parameters": [ | |
| "payload" | |
| ], | |
| "items": [ | |
| { | |
| "type": "Container", | |
| "when": "${viewport.width < 490}", | |
| "width": "100%", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "backgroundColor": "@backgroundThemeColor", | |
| "type": "AlexaBackground" | |
| }, | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "headerAttributionImage": "https://openworld.tech/mc_file/logo.png", | |
| "type": "AlexaHeader" | |
| }, | |
| { | |
| "type": "Text", | |
| "width": "100%", | |
| "position": "absolute", | |
| "textAlign": "center", | |
| "textAlignVertical": "center", | |
| "color": "@mainTitleThemeColor", | |
| "text": "${payload.month}, <b>${payload.year}</b>", | |
| "left": "0", | |
| "top": "20%" | |
| }, | |
| { | |
| "type": "Container", | |
| "width": "80%", | |
| "height": "100%", | |
| "alignItems": "center", | |
| "items": [ | |
| { | |
| "listData": "${payload.header}", | |
| "type": "MC_calendarHeaderSequence" | |
| }, | |
| { | |
| "weekDays": "${payload.days}", | |
| "type": "MC_calendarWeeksSequence" | |
| } | |
| ], | |
| "left": "10%", | |
| "top": "5%", | |
| "right": "10%" | |
| } | |
| ], | |
| "left": "0", | |
| "top": "0", | |
| "right": "0", | |
| "bottom": "0" | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "Container", | |
| "width": "100%", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "backgroundColor": "@backgroundThemeColor", | |
| "type": "AlexaBackground" | |
| }, | |
| { | |
| "type": "Container", | |
| "width": "${(viewport.width/12)*8}", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "headerAttributionImage": "https://openworld.tech/mc_file/logo.png", | |
| "type": "AlexaHeader" | |
| }, | |
| { | |
| "type": "Text", | |
| "position": "absolute", | |
| "color": "@mainTitleThemeColor", | |
| "text": "${payload.month}, <b>${payload.year}</b>", | |
| "left": "10%", | |
| "top": "6%" | |
| }, | |
| { | |
| "type": "Container", | |
| "width": "80%", | |
| "height": "100%", | |
| "items": [ | |
| { | |
| "listData": "${payload.header}", | |
| "type": "MC_calendarHeaderSequence" | |
| }, | |
| { | |
| "weekDays": "${payload.days}", | |
| "type": "MC_calendarWeeksSequence" | |
| } | |
| ], | |
| "left": "10%", | |
| "top": "10%", | |
| "right": "10%" | |
| } | |
| ], | |
| "left": "${(viewport.width/12)*4}", | |
| "top": "0", | |
| "right": "0", | |
| "bottom": "0" | |
| }, | |
| { | |
| "type": "Image", | |
| "width": "100%", | |
| "maxWidth": "${(viewport.width/12)*4}", | |
| "height": "100%", | |
| "source": "@mainImageThemeUrl", | |
| "scale": "best-fill", | |
| "align": "left", | |
| "borderRadius": "0", | |
| "position": "absolute", | |
| "left": "0", | |
| "top": "0", | |
| "bottom": "0" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "year": 2020, | |
| "month": "november", | |
| "days": [ | |
| [ | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "1", | |
| "marker_color": "@weekDaysBlueThemeColor" | |
| } | |
| ], | |
| [ | |
| { | |
| "text": "2", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "3", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "4", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "5", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "6", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "7", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "8", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| } | |
| ], | |
| [ | |
| { | |
| "text": "9", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "10", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "11", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "12", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "13", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "14", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "15", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| } | |
| ], | |
| [ | |
| { | |
| "text": "16", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "17", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "18", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "19", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "20", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "21", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "22", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| } | |
| ], | |
| [ | |
| { | |
| "text": "23", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "24", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "25", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "26", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "27", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "28", | |
| "marker_color": "@weekDaysRedThemeColor" | |
| }, | |
| { | |
| "text": "29", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| } | |
| ], | |
| [ | |
| { | |
| "text": "30", | |
| "marker_color": "@weekDaysGreenThemeColor" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| }, | |
| { | |
| "text": "", | |
| "marker_color": "" | |
| } | |
| ] | |
| ], | |
| "header": [ | |
| "MO", | |
| "TU", | |
| "WE", | |
| "TH", | |
| "FR", | |
| "SA", | |
| "SU" | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment