Want to learn how to make your own selectable calendar component you can style and modify for your SAP Build Apps application? Look no further! In this blog I will go over the basic principles of creating a calendar component for your SAP Build Apps application.
Screen recording of the calendar functionality
Please note that this blog assumes the reader to have familiarity with SAP Build Apps and how to work with variables, logic, and at least some formulas. I won’t explain every detail of creating this calendar, but rather the most crucial and complex parts. Please don’t hesitate to ask if you can’t figure some other part out!
To get started quickly, you can copy the component to paste onto your view canvas from below. You still need to do step 1 to set up the variables for the calendar to work. Reading the other steps will deepen your understanding on why and how the calendar works, and how to do any adjustments or modifications you might want to make.
{"component":{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"c1cd03fb-4533-4616-967b-fc1e2e51f4a7","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"16px","padding-right":"16px","padding-bottom":"16px","padding-left":"16px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","background-color":"#ffffff","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-radius":"16px 16px 16px 16px","border-width":"1px 1px 1px 1px","border-color":"#d9d9d9 #d9d9d9 #d9d9d9 #d9d9d9","box-shadow":"0px 2px 5px rgba(0,0,0,0.25)","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_XXL","source":"theme"},"gapEnabled":true,"borderRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"dimensionsBehavior":"expandWidth","borderTopLeftRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"borderTopRightRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"borderBottomLeftRadius":{"value":"$cornerRadius_largeRounding","source":"theme"},"borderBottomRightRadius":{"value":"$cornerRadius_largeRounding","source":"theme"}},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Calendar","children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"58ae6934-9332-46cc-b912-0113ad95fe14","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"16px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"9","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"center","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"zIndex":9,"gapAfter":{"value":"$spacing_component_L","source":"theme"},"overflow":"visible","alignItems":"center","gapEnabled":true,"flexDirection":"row","justifyContent":"center"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Header","children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"2988875b-39db-41ec-af69-0bd6084bd5e9","css":{"height":"unset !important","margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"8px","padding-bottom":"0px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"center","align-items":"flex-end","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"alignItems":"flex-end","gapEnabled":true,"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"widthBehavior":"fitToContent","heightBehavior":"expandToFill","justifyContent":"center","dimensionsBehavior":"custom"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Last month button","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fiori","source":"str"},"name":{"key":"navigation-left-arrow","source":"str"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"636c0484-d43c-48ea-94b8-3df76680b9ca","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"16px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#0070f2","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":"SAP_primary_2","source":"smart-content-color"},"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Icon 1","children":[],"layout_args":{},"style_class":"primary"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"882ec131-a66f-4798-a22e-e2e74cebf7cf","css":{"margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"8px","padding-right":"8px","padding-bottom":"8px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"auto","justify-content":"flex-start","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"overflow":"visible","alignItems":"center","gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"row","paddingBottom":{"value":"$spacing_component_S","source":"theme"},"dimensionsBehavior":"fitToContent"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Month selector","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fontAwesome","source":"str"},"name":{"key":{"script":"IF(COUNT(MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")})))<=COUNT(LOOKUP(pageVars,\"selectedDates\")),\"check-square\",\"square-o\")","formula":"IF(COUNT(MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))<=COUNT(pageVars.selectedDates), \"check-square\", \"square-o\")","functions":["IF","COUNT","MAP","GENERATE_RANGE","GET_DATETIME_COMPONENT","SUBTRACT_DURATION","ADD_DURATION","LOOKUP","SUBTRACT"],"dependencies":[["pageVars","firstDayOfMonth"],["pageVars","selectedDates"]]},"source":"expression","preview":"check-square"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"341e352a-3551-4c61-8581-c6e0690c56bc","css":{"margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"18px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#475E75","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(IS_EQUAL(COUNT(MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")}))),COUNT(LOOKUP(pageVars,\"selectedDates\"))),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"SAP_primary_2\"),\"#475E75\")","formula":"IF(COUNT(MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))==COUNT(pageVars.selectedDates), theme.$smartColorPalette_level1.SAP_primary_2,\"#475E75\")","functions":["IF","IS_EQUAL","COUNT","MAP","GENERATE_RANGE","GET_DATETIME_COMPONENT","SUBTRACT_DURATION","ADD_DURATION","LOOKUP","SUBTRACT"],"dependencies":[["pageVars","firstDayOfMonth"],["pageVars","selectedDates"],["theme","$smartColorPalette_level1","SAP_primary_2"]]},"source":"expression"},"fontSize":{"value":"$textSize_header_4.fontSize","source":"theme"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Icon 5","children":[],"layout_args":{},"style_class":"primary"},{"args":{"content":{"key":{"script":"IF(IS_EMPTY(LOOKUP(pageVars,\"firstDayOfMonth\")),FORMAT_DATETIME_WITH_TIMEZONE(NOW(),\"MMMM YYYY\"),FORMAT_DATETIME_WITH_TIMEZONE(LOOKUP(pageVars,\"firstDayOfMonth\"),\"MMMM YYYY\"))","formula":"IF(IS_EMPTY(pageVars.firstDayOfMonth), FORMAT_DATETIME_WITH_TIMEZONE(NOW(), \"MMMM YYYY\"), FORMAT_DATETIME_WITH_TIMEZONE(pageVars.firstDayOfMonth, \"MMMM YYYY\"))","functions":["IF","IS_EMPTY","LOOKUP","FORMAT_DATETIME_WITH_TIMEZONE","NOW"],"dependencies":[["pageVars","firstDayOfMonth"]]},"source":"expression","preview":"January 2023"},"visible":true},"args_definition":[{"enum":null,"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Headline","tooltip":"Text content for the title element.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the title element."},{"enum":null,"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."}],"description_version":17,"composite_instance_changed":false,"description_name":"Title","name":"custom-7331eb73-e479-4418-b86a-d18e746d0b09","id":"7aa49b64-94d2-48e6-b051-bfb2adc44fda","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"18px","line-height":"25px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"700","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"fontWeight":"700","gapEnabled":true,"dimensionsBehavior":"fitToContent"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Title 1","children":[],"layout_args":{},"style_class":"contentPrimary"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"b93ccb62-047f-4650-829c-fc343b4704b5","css":{"height":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"8px","padding-bottom":"0px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"center","align-items":"flex-start","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"alignItems":"flex-start","gapEnabled":true,"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"widthBehavior":"fitToContent","heightBehavior":"expandToFill","justifyContent":"center","dimensionsBehavior":"custom"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Next month button","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fiori","source":"str"},"name":{"key":"navigation-right-arrow","source":"str"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"77a858ef-fe3c-46eb-bda6-fef43dac61c1","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"16px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#0070f2","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":"SAP_primary_2","source":"smart-content-color"},"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Icon 1","children":[],"layout_args":{},"style_class":"primary"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"14b4621e-d362-4658-84e5-c493e8b01856","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"16px","margin-left":"0px","padding-top":"8px","padding-right":"0px","padding-bottom":"16px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"row","paddingBottom":{"value":"$spacing_component_L","source":"theme"}},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Weekdays","children":[{"args":{"content":"Week","visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"1c9ef524-2aa6-4d82-8b7f-309eff65d55d","css":{"width":"9%","margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"1","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"width":"9%","flexGrow":1,"gapAfter":{"value":"$spacing_component_S","source":"theme"},"flexShrink":1,"gapEnabled":true,"dimensionsBehavior":"advanced"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Week","children":[],"layout_args":{},"style_class":"primaryParagraph"},{"args":{"content":{"key":"current.id","source":"repeated","preview":"Mon"},"visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"625159a0-a7bb-463d-88b5-f11ac4d2b117","css":{"width":"12%","margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"2","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"width":"12%","flexGrow":2,"gapAfter":{"value":"$spacing_component_L","source":"theme"},"flexShrink":1,"gapEnabled":true,"dimensionsBehavior":"advanced"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Weekday text","repeat":{"key":{"script":"[{id:\"Mon\"},{id:\"Tue\"},{id:\"Wed\"},{id:\"Thu\"},{id:\"Fri\"},{id:\"Sat\"},{id:\"Sun\"}]","formula":"[{id: \"Mon\"}, {id: \"Tue\"}, {id: \"Wed\"}, {id: \"Thu\"}, {id: \"Fri\"}, {id: \"Sat\"}, {id: \"Sun\"}]","functions":[],"isConstant":true,"dependencies":[]},"source":"expression"},"children":[],"layout_args":{},"style_class":"primaryParagraph"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":{"key":{"script":"SOME(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),item=>(IS_EQUAL(NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(LOOKUP(item,\"date\"),\"M\")),NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(LOOKUP(pageVars,\"firstDayOfMonth\"),\"M\")))))","formula":"SOME(repeated.week.days, NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(item.date, \"M\")) == NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(pageVars.firstDayOfMonth, \"M\")))","functions":["SOME","LOOKUP","IS_EQUAL","NUMBER","FORMAT_DATETIME_WITH_TIMEZONE"],"dependencies":[["repeated","week","days"],["pageVars","firstDayOfMonth"]]},"source":"expression","preview":true},"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"b6865e3b-c07c-459b-b589-1e4b96452344","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"16px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true,"flexDirection":"row"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Weeks","repeat":{"as":"repeated_week","key":{"script":"MAP(GENERATE_RANGE(0,5),week=>({weekNumber:NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),week,\"weeks\"),\"W\")),days:MAP(GENERATE_RANGE(1,7),day=>({date:SET_DATETIME_COMPONENT(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),week,\"weeks\"),day,\"weekday\")}))}))","formula":"MAP<week>(GENERATE_RANGE(0,5), { weekNumber: NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(ADD_DURATION(pageVars.firstDayOfMonth, week, \"weeks\"), \"W\")), days: MAP<day>(GENERATE_RANGE(1, 7), { date: SET_DATETIME_COMPONENT(ADD_DURATION(pageVars.firstDayOfMonth, week, \"weeks\"), day, \"weekday\") }) })","functions":["MAP","GENERATE_RANGE","NUMBER","FORMAT_DATETIME_WITH_TIMEZONE","ADD_DURATION","LOOKUP","SET_DATETIME_COMPONENT"],"dependencies":[["pageVars","firstDayOfMonth"]]},"alias":"week","source":"expression"},"children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"24668f14-0cd6-4493-9d9d-52504af8632c","css":{"width":"8%","margin-top":"0px","margin-right":"16px","margin-bottom":"0px","margin-left":"0px","padding-top":"8px","padding-right":"8px","padding-bottom":"0px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"auto","justify-content":"flex-start","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"width":"8%","gapAfter":{"value":"$spacing_component_L","source":"theme"},"alignItems":"center","flexShrink":{"value":null,"source":"num"},"gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"row","dimensionsBehavior":"advanced"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Week number","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fontAwesome","source":"str"},"name":{"key":{"script":"IF(EVERY(SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\"))),workingDay=>(SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDay=>(DATETIME_IS_SAME(LOOKUP(selectedDay,\"date\"),LOOKUP(workingDay,\"date\"),\"day\"))))),\"check-square\",\"square-o\")","formula":"IF(EVERY<workingDay>(SELECT<day>(repeated.week.days, day.isWorkingDay), SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, \"day\"))), \"check-square\", \"square-o\")","functions":["IF","EVERY","SELECT","LOOKUP","SOME","DATETIME_IS_SAME"],"dependencies":[["repeated","week","days"],["pageVars","selectedDates"]]},"source":"expression","preview":"check-square"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"d4a6cc09-c74d-4bb4-9083-c299bffe18b2","css":{"margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"18px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#0070f2","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(EVERY(SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\"))),workingDay=>(SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDay=>(DATETIME_IS_SAME(LOOKUP(selectedDay,\"date\"),LOOKUP(workingDay,\"date\"),\"day\"))))),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"SAP_primary_2\"),\"#475E75\")","formula":"IF(EVERY<workingDay>(SELECT<day>(repeated.week.days, day.isWorkingDay), SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, \"day\"))), theme.$smartColorPalette_level1.SAP_primary_2, \"#475E75\")","functions":["IF","EVERY","SELECT","LOOKUP","SOME","DATETIME_IS_SAME"],"dependencies":[["repeated","week","days"],["pageVars","selectedDates"],["theme","$smartColorPalette_level1","SAP_primary_2"]]},"source":"expression"},"fontSize":{"value":"$textSize_header_4.fontSize","source":"theme"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Checkbox icon","children":[],"layout_args":{},"style_class":"primary"},{"args":{"content":{"key":"week.weekNumber","source":"repeated","preview":1},"visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"1a173046-4b85-49b4-90d5-76512e8f0392","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#32363a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"1","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true,"dimensionsBehavior":"expandWidth"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Week number text","children":[],"layout_args":{},"style_class":"primaryParagraph"}],"layout_args":{},"style_class":"layout"},{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"a1093113-493f-4091-b4b0-6eaaca6faaec","css":{"width":"12%","height":"unset !important","margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"8px","padding-right":"8px","padding-bottom":"8px","padding-left":"8px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","background-color":"#EAECEE","border-style":"solid","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"flex-start","background-size":"cover","border-radius":"6px 6px 6px 6px","border-width":"1px 1px 1px 1px","border-color":"#EAECEE #EAECEE #EAECEE #EAECEE","transform":""},"css_classes":{},"style":{"width":"12%","opacity":{"value":{"script":"1","formula":"1","functions":[],"isConstant":true,"dependencies":[]},"source":"expression"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true,"paddingTop":{"value":"$spacing_component_S","source":"theme"},"borderColor":"#EAECEE","borderStyle":"solid","borderWidth":1,"paddingLeft":{"value":"$spacing_component_S","source":"theme"},"borderRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"paddingRight":{"value":"$spacing_component_S","source":"theme"},"flexDirection":"column","paddingBottom":{"value":"$spacing_component_S","source":"theme"},"widthBehavior":"setValue","borderTopWidth":1,"heightBehavior":"expandToFill","backgroundColor":{"value":{"script":"IF(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\"),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"background\"),\"#EAECEE\")","formula":"IF(DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\"), theme.$smartColorPalette_level1.background, \"#EAECEE\")","functions":["IF","DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"],["theme","$smartColorPalette_level1","background"]]},"source":"expression"},"borderLeftWidth":1,"borderRightWidth":1,"borderBottomWidth":1,"dimensionsBehavior":"custom","borderTopLeftRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"borderTopRightRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"borderBottomLeftRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"},"borderBottomRightRadius":{"value":"$cornerRadius_mediumRounding","source":"theme"}},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Days","repeat":{"as":"repeated_day","key":{"script":"LOOKUP(LOOKUP(repeated,\"week\"),\"days\")","formula":"repeated.week.days","inverse":"LOOKUP.inv(LOOKUP.inv([\"r\",repeated,\"repeated\"],[\"c\",\"week\"]),[\"c\",\"days\"])","functions":["LOOKUP"],"isPointer":true,"dependencies":[["repeated","week","days"]]},"alias":"day","source":"expression"},"children":[{"args":{"visible":true,"backgroundImage":""},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"backgroundImage","type":"image","title":"Background Image","uiType":"image-picker","default":null,"tooltip":"Background image for the container. You can configure additional display options on the Style tab.","metadata":{},"references":[],"bindingType":"inbound","description":"Background image for the container. You can configure additional display options on the Style tab."}],"description_version":42,"composite_instance_changed":false,"intro":"Basic layout component","description_name":"Container","name":"vertical_box_layout","id":"45f93b89-bab8-4dcc-954e-8c2b84b2aef0","css":{"width":"unset !important","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"0","flex-basis":"auto","flex-direction":"row","flex-wrap":"nowrap","align-content":"flex-start","align-self":"stretch","justify-content":"flex-start","align-items":"center","background-size":"cover","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"gapAfter":{"value":"$spacing_component_S","source":"theme"},"overflow":"visible","alignItems":"center","gapEnabled":true,"flexDirection":"row"},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Content","children":[{"args":{"visible":true,"iconName":{"key":{"set":{"key":"fontAwesome","source":"str"},"name":{"key":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),\"check-square\",\"square-o\")","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), \"check-square\", \"square-o\")","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"]]},"source":"expression","preview":"check-square"}},"source":"object"}},"args_definition":[{"name":"visible","type":"boolean","title":"Visible","default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","metadata":{},"references":[],"bindingType":"inbound","description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"iconName","type":"object","title":"Icon","uiType":"icon","tooltip":"Name of the icon to use, e.g. `star`.","properties":{"set":{"enum":["fontAwesome","fiori","fioriBusiness"],"type":"string","default":"fontAwesome"},"name":{"type":"string","default":"star"}},"references":[],"bindingType":"inbound","description":"Name of the icon to use, e.g. `star`."}],"description_version":34,"composite_instance_changed":false,"intro":"","description_name":"Icon","name":"custom-77e3ebf8-aacf-451f-a927-925e390b47a7","id":"58582ae9-6f41-4981-9d64-28b6c1455299","css":{"margin-top":"0px","margin-right":"8px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","font-size":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-transform":"none","font-variant":"normal","font-weight":"normal","color":"#475E75","border-style":"none","display":"flex","position":"relative","opacity":"0","overflow":"visible","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"0","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"SAP_primary_2\"),\"#475E75\")","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), theme.$smartColorPalette_level1.SAP_primary_2, \"#475E75\")","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"],["theme","$smartColorPalette_level1","SAP_primary_2"]]},"source":"expression"},"opacity":{"value":{"script":"IF(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\"),1,0)","formula":"IF(DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\"), 1, 0)","functions":["IF","DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"]]},"source":"expression"},"fontSize":{"value":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),18,20)","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), 18, 20)","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"]]},"source":"expression"},"gapAfter":{"value":"$spacing_component_S","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Checkbox icon","children":[],"layout_args":{},"style_class":"primary"},{"args":{"content":{"key":{"script":"FORMAT_DATETIME_LOCAL(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),\"DD\")","formula":"FORMAT_DATETIME_LOCAL(repeated.day.date, \"DD\")","functions":["FORMAT_DATETIME_LOCAL","LOOKUP"],"dependencies":[["repeated","day","date"]]},"source":"expression","preview":"10"},"visible":true,"selectable":false,"numberOfLines":0},"args_definition":[{"name":"content","type":null,"anyOf":[{"type":"string"},{"type":"number"}],"items":{},"title":"Content","format":null,"default":"Lorem ipsum dolor sit amet","tooltip":"Text content for the Text. To format your text inline, use the **Rich text** component.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"bindingType":"inbound","description":"Text content for the Text. To format your text inline, use the **Rich text** component."},{"name":"visible","type":"boolean","items":{},"title":"Visible","format":null,"default":true,"tooltip":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space.","examples":[],"metadata":{},"required":false,"properties":{},"references":[],"description":"True/false value to set component visibility. If `false`, the component is not rendered at all and will not take up any space."},{"name":"numberOfLines","type":"number","title":"Number of lines","default":0,"tooltip":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied.","examples":[123],"references":[],"description":"Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to 0 will result in unsetting this value, which means that no lines restriction will be applied."},{"name":"selectable","type":"boolean","title":"Selectable","default":false,"tooltip":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event.","references":[],"description":"Specifies whether the text is selectable or not. If `true`, may interfere with the **tap** event."}],"description_version":19,"composite_instance_changed":false,"description_name":"Text","name":"custom-ad1c810a-2db9-45a8-af24-6fbd192fd753","id":"dc583cdc-3882-4df5-ab6b-f1a16d84c2f5","css":{"margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","letter-spacing":"0px","font-size":"14px","line-height":"20px","text-align":"left","font-style":"normal","text-decoration-line":"none","text-decoration-style":"solid","text-decoration-color":"#32363a","text-transform":"none","font-family":"\"72\"","font-variant":"normal","font-weight":"400","color":"#74777a","border-style":"none","display":"flex","position":"relative","opacity":"1","overflow":"hidden","z-index":"auto","backface-visibility":"visible","flex":"0 1 auto","flex-grow":"1","flex-shrink":"1","flex-basis":"auto","flex-direction":"column","flex-wrap":"nowrap","align-content":"stretch","align-self":"auto","justify-content":"flex-start","align-items":"stretch","border-width":"0px 0px 0px 0px","transform":""},"css_classes":{},"style":{"color":{"value":{"script":"IF(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\"),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"neutralHighContrast\"),LOOKUP(LOOKUP(theme,\"$smartColorPalette_level1\"),\"neutral\"))","formula":"IF(DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\"), theme.$smartColorPalette_level1.neutralHighContrast, theme.$smartColorPalette_level1.neutral)","functions":["IF","DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"],["theme","$smartColorPalette_level1","neutralHighContrast"],["theme","$smartColorPalette_level1","neutral"]]},"source":"expression"},"gapAfter":{"value":"$spacing_component_L","source":"theme"},"gapEnabled":true},"style_classes":{},"events":["tap"],"created_by":"user","editable_by_user":true,"display_name":"Date text","children":[],"layout_args":{},"style_class":"primaryParagraph"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"layout"}],"layout_args":{},"style_class":"primaryCard"},"flows":[{"x":100,"y":30,"z":"page:4:component:45f93b89-bab8-4dcc-954e-8c2b84b2aef0","id":"0c6a45c20af2.260ac","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:45f93b89-bab8-4dcc-954e-8c2b84b2aef0:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:c1cd03fb-4533-4616-967b-fc1e2e51f4a7","id":"1d8de4b10f9f9.af65","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:c1cd03fb-4533-4616-967b-fc1e2e51f4a7:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc","id":"07fed93e0d7f.3f95f8","type":"event","wires":[["5b59279bec6a1.ae2e38"]],"idType":"event","eventSource":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:58ae6934-9332-46cc-b912-0113ad95fe14","id":"324d20378f4a1.473e6","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:58ae6934-9332-46cc-b912-0113ad95fe14:tap","fallbackName":"Component tap","isConfigurable":true},{"x":682,"y":129,"z":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","id":"3d30fa269fab3.206dc","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set selectedDates to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"IF(SOME(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),REMOVE_ITEM(LOOKUP(pageVars,\"selectedDates\"),item=>(DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(item,\"date\"),\"day\"))),WITH_ITEM(LOOKUP(pageVars,\"selectedDates\"),LOOKUP(repeated,\"day\")))","formula":"IF(SOME(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), REMOVE_ITEM(pageVars.selectedDates, DATETIME_IS_SAME(repeated.day.date, item.date, \"day\")), WITH_ITEM(pageVars.selectedDates, repeated.day))","functions":["IF","SOME","LOOKUP","DATETIME_IS_SAME","REMOVE_ITEM","WITH_ITEM"],"dependencies":[["pageVars","selectedDates"],["repeated","day","date"],["repeated","day"]]},"reference":"selectedDates"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":389,"y":134,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"4cf4ef2182e93.37309","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set firstDayOfMonth to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"SUBTRACT_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\")","formula":"SUBTRACT_DURATION(pageVars.firstDayOfMonth, 1, \"months\")","functions":["SUBTRACT_DURATION","LOOKUP"],"dependencies":[["pageVars","firstDayOfMonth"]]},"reference":"firstDayOfMonth"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":100,"y":30,"z":"page:4:component:7aa49b64-94d2-48e6-b051-bfb2adc44fda","id":"5772cd00ba446.5e121","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:7aa49b64-94d2-48e6-b051-bfb2adc44fda:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c","id":"66b7442d7d282.b90e8","type":"event","wires":[["f6a971158e968.98f308"]],"idType":"event","eventSource":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:882ec131-a66f-4798-a22e-e2e74cebf7cf","id":"7ef85cee80a26.f1874","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:882ec131-a66f-4798-a22e-e2e74cebf7cf:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:1c9ef524-2aa6-4d82-8b7f-309eff65d55d","id":"843aab1e13cc4.0ec64","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:1c9ef524-2aa6-4d82-8b7f-309eff65d55d:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:dc583cdc-3882-4df5-ab6b-f1a16d84c2f5","id":"d05fb061a9d77.86cd9","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:dc583cdc-3882-4df5-ab6b-f1a16d84c2f5:tap","fallbackName":"Component tap","isConfigurable":true},{"x":680,"y":101,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"ddbbd1b5cf2e1.60b56","type":"subflow:own_bd0c25ba.5aaf3","wires":[[]],"extraLabel":"You have unsaved changes","subflow_input_arguments":{"title":{"key":"You have unsaved changes","source":"str"},"message":{"key":"Please save or discard changes before going to the next month","source":"str"},"dismissLabel":{"key":"OK","source":"str"}}},{"x":363,"y":57,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"de8de09f53e44.42555","type":"subflow:own_225eb957.12fbd","wires":[["ddbbd1b5cf2e1.60b56"],["a9d7d8550f68d.261e58"]],"extraLabel":"unsavedChanges","subflow_input_arguments":{"condition":{"key":"unsavedChanges","source":"page-variable"}}},{"x":723,"y":94,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"f498ac2c2a64f.06afa","type":"subflow:own_bd0c25ba.5aaf3","wires":[[]],"extraLabel":"You have unsaved changes","subflow_input_arguments":{"title":{"key":"You have unsaved changes","source":"str"},"message":{"key":"Please save or discard changes before going to the previous month","source":"str"},"dismissLabel":{"key":"OK","source":"str"}}},{"x":100,"y":30,"z":"page:4:component:636c0484-d43c-48ea-94b8-3df76680b9ca","id":"22b5778c7c211.2f0afe","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:636c0484-d43c-48ea-94b8-3df76680b9ca:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"5a460871051c1.b3d7ee","type":"event","wires":[["3c174b0cca54c.effde08"]],"idType":"event","eventSource":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9:tap","fallbackName":"Component tap","isConfigurable":true},{"x":395,"y":72,"z":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc","id":"5b59279bec6a1.ae2e38","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set selectedDates to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"IF(IS_EQUAL(COUNT(MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")}))),COUNT(LOOKUP(pageVars,\"selectedDates\"))),[],MAP(GENERATE_RANGE(1,GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\"),1,\"days\"),\"date\")),item=>({date:ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),item-1,\"days\")})))","formula":"IF(COUNT(MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))==COUNT(pageVars.selectedDates), [], MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\"), 1, \"days\"), \"date\")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, \"days\")}))","functions":["IF","IS_EQUAL","COUNT","MAP","GENERATE_RANGE","GET_DATETIME_COMPONENT","SUBTRACT_DURATION","ADD_DURATION","LOOKUP","SUBTRACT"],"dependencies":[["pageVars","firstDayOfMonth"],["pageVars","selectedDates"]]},"reference":"selectedDates"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":100,"y":30,"z":"page:4:component:14b4621e-d362-4658-84e5-c493e8b01856","id":"63523e4cb3e45.570824","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:14b4621e-d362-4658-84e5-c493e8b01856:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:1a173046-4b85-49b4-90d5-76512e8f0392","id":"7cd93e99b6aad.da3848","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:1a173046-4b85-49b4-90d5-76512e8f0392:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:625159a0-a7bb-463d-88b5-f11ac4d2b117","id":"7ebc49fc16872.3cfe43","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:625159a0-a7bb-463d-88b5-f11ac4d2b117:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:d4a6cc09-c74d-4bb4-9083-c299bffe18b2","id":"907b719b871c1.3f95f8","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:d4a6cc09-c74d-4bb4-9083-c299bffe18b2:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:58582ae9-6f41-4981-9d64-28b6c1455299","id":"a06fd17e8ed25.3f95f8","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:58582ae9-6f41-4981-9d64-28b6c1455299:tap","fallbackName":"Component tap","isConfigurable":true},{"x":586,"y":194,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"a9d7d8550f68d.261e58","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set firstDayOfMonth to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"ADD_DURATION(LOOKUP(pageVars,\"firstDayOfMonth\"),1,\"months\")","formula":"ADD_DURATION(pageVars.firstDayOfMonth, 1, \"months\")","functions":["ADD_DURATION","LOOKUP"],"dependencies":[["pageVars","firstDayOfMonth"]]},"reference":"firstDayOfMonth"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":100,"y":30,"z":"page:4:component:b6865e3b-c07c-459b-b589-1e4b96452344","id":"aa508ee3e14c5.570824","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:b6865e3b-c07c-459b-b589-1e4b96452344:tap","fallbackName":"Component tap","isConfigurable":true},{"x":395,"y":96,"z":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","id":"c13dae6d069ad.356768","type":"subflow:own_225eb957.12fbd","wires":[["3d30fa269fab3.206dc"],[]],"extraLabel":"DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\")","subflow_input_arguments":{"condition":{"key":{"script":"DATETIME_IS_SAME(LOOKUP(LOOKUP(repeated,\"day\"),\"date\"),LOOKUP(pageVars,\"firstDayOfMonth\"),\"month\")","formula":"DATETIME_IS_SAME(repeated.day.date, pageVars.firstDayOfMonth, \"month\")","functions":["DATETIME_IS_SAME","LOOKUP"],"dependencies":[["repeated","day","date"],["pageVars","firstDayOfMonth"]]},"source":"expression"}}},{"x":107,"y":39,"z":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","id":"c2be22a113bc5.b3d7ee","type":"event","wires":[["de8de09f53e44.42555"]],"idType":"event","eventSource":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5:tap","fallbackName":"Component tap","isConfigurable":true},{"x":100,"y":30,"z":"page:4:component:77a858ef-fe3c-46eb-bda6-fef43dac61c1","id":"c605fda712d5f.2f0afe","type":"event","wires":[[]],"idType":"event","eventSource":"page:4:component:77a858ef-fe3c-46eb-bda6-fef43dac61c1:tap","fallbackName":"Component tap","isConfigurable":true},{"x":390,"y":156,"z":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c","id":"f6a971158e968.98f308","type":"subflow:own_23268044.e1e2b","wires":[[]],"extraLabel":"Set selectedDates to {{variable.value}}","subflow_input_arguments":{"variable":{"key":{"value":{"script":"IF(EVERY(SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\"))),workingDay=>(SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDay=>(DATETIME_IS_SAME(LOOKUP(selectedDay,\"date\"),LOOKUP(workingDay,\"date\"),\"day\"))))),SELECT(LOOKUP(pageVars,\"selectedDates\"),date=>(!SOME(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),item=>(DATETIME_IS_SAME(LOOKUP(item,\"date\"),LOOKUP(date,\"date\"),\"day\"))))),UNION(LOOKUP(pageVars,\"selectedDates\"),SELECT(LOOKUP(LOOKUP(repeated,\"week\"),\"days\"),day=>(LOOKUP(day,\"isWorkingDay\")&&!SOME(LOOKUP(pageVars,\"selectedDates\"),selectedDate=>(DATETIME_IS_SAME(LOOKUP(day,\"date\"),LOOKUP(selectedDate,\"date\"),\"day\")))))))","formula":"IF(EVERY<workingDay>(SELECT<day>(repeated.week.days, day.isWorkingDay), SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, \"day\"))), SELECT<date>(pageVars.selectedDates, !SOME(repeated.week.days, DATETIME_IS_SAME(item.date, date.date, \"day\"))), UNION(pageVars.selectedDates, SELECT<day>(repeated.week.days, day.isWorkingDay && !SOME<selectedDate>(pageVars.selectedDates, DATETIME_IS_SAME(day.date, selectedDate.date, \"day\")))))","functions":["IF","EVERY","SELECT","LOOKUP","SOME","DATETIME_IS_SAME","NOT","UNION"],"dependencies":[["repeated","week","days"],["pageVars","selectedDates"]]},"reference":"selectedDates"},"source":{"value":"expression","reference":"page-variable-ref"}}}},{"x":138,"y":36,"z":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","id":"fa78c1b5fc655.a2a54a","type":"event","wires":[["c13dae6d069ad.356768"]],"idType":"event","eventSource":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec:tap","fallbackName":"Component tap","isConfigurable":true},{"x":406,"y":50,"z":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","id":"3c174b0cca54c.effde08","type":"subflow:own_225eb957.12fbd","wires":[["f498ac2c2a64f.06afa"],["4cf4ef2182e93.37309"]],"extraLabel":"unsavedChanges","subflow_input_arguments":{"condition":{"key":"unsavedChanges","source":"page-variable"}}},{"id":"page:4:component:14b4621e-d362-4658-84e5-c493e8b01856","type":"tab","label":"Component: Weekdays"},{"id":"page:4:component:1a173046-4b85-49b4-90d5-76512e8f0392","type":"tab","label":"Component: Week number text"},{"id":"page:4:component:1c9ef524-2aa6-4d82-8b7f-309eff65d55d","type":"tab","label":"Component: Week"},{"id":"page:4:component:24668f14-0cd6-4493-9d9d-52504af8632c","type":"tab","label":"Component: Week number"},{"id":"page:4:component:2988875b-39db-41ec-af69-0bd6084bd5e9","type":"tab","label":"Component: Last month button"},{"id":"page:4:component:341e352a-3551-4c61-8581-c6e0690c56bc","type":"tab","label":"Component: Icon 5"},{"id":"page:4:component:45f93b89-bab8-4dcc-954e-8c2b84b2aef0","type":"tab","label":"Component: Content"},{"id":"page:4:component:58582ae9-6f41-4981-9d64-28b6c1455299","type":"tab","label":"Component: Checkbox icon"},{"id":"page:4:component:58ae6934-9332-46cc-b912-0113ad95fe14","type":"tab","label":"Component: Header"},{"id":"page:4:component:625159a0-a7bb-463d-88b5-f11ac4d2b117","type":"tab","label":"Component: Weekday text"},{"id":"page:4:component:636c0484-d43c-48ea-94b8-3df76680b9ca","type":"tab","label":"Component: Icon 1"},{"id":"page:4:component:77a858ef-fe3c-46eb-bda6-fef43dac61c1","type":"tab","label":"Component: Icon 1"},{"id":"page:4:component:7aa49b64-94d2-48e6-b051-bfb2adc44fda","type":"tab","label":"Component: Title 1"},{"id":"page:4:component:882ec131-a66f-4798-a22e-e2e74cebf7cf","type":"tab","label":"Component: Month selector"},{"id":"page:4:component:a1093113-493f-4091-b4b0-6eaaca6faaec","type":"tab","label":"Component: Days"},{"id":"page:4:component:b6865e3b-c07c-459b-b589-1e4b96452344","type":"tab","label":"Component: Weeks"},{"id":"page:4:component:b93ccb62-047f-4650-829c-fc343b4704b5","type":"tab","label":"Component: Next month button"},{"id":"page:4:component:c1cd03fb-4533-4616-967b-fc1e2e51f4a7","type":"tab","label":"Component: Calendar"},{"id":"page:4:component:d4a6cc09-c74d-4bb4-9083-c299bffe18b2","type":"tab","label":"Component: Checkbox icon"},{"id":"page:4:component:dc583cdc-3882-4df5-ab6b-f1a16d84c2f5","type":"tab","label":"Component: Date text"}]}—
Step 1: Setting up variables
This calendar requires only two page variables: firstDayOfTheMonth and selectedDates.
They are exactly what it says on the tin – in one you store the datetime of the first day of the month currently visible in the calendar, and the other stores the information of the currently selected dates.
Screenshot of variables in the app
On the page’s main logic canvas, set these variables. firstDayOfMonth will be set to default to the first day of the current month. Whenever firstDayOfMonth variable changes, such as after page mounted, but also as user switches between months, selectedDates is changed to default to all dates being selected. You can modify the logic you want for this, if you want to exclude some days for example or not have any pre-selected dates at all.
Screenshot from the logic canvas
The logic for this initial setting of the firstDayOfMonth is simple enough. However, a known issue here is that if the user is from a timezone far away from UTC and it is the first or last day of the month, they may get the wrong month as the default month that opens. I have not figured out an easy way to fix this as of yet, and don’t think it is as serious as the user can easily change months, but if you come up with a solution, please comment below.
SET_DATETIME_COMPONENT(NOW(), 1, "date")For the selectedDates, there is a little more complex calculating. The most reliable way I’ve found to determine how many days a month has is to add one month to the first day of the month and then subtract one day. This way you get the date of the last day of the month, and I use that in doing the selection.
MAP(GENERATE_RANGE(1, GET_DATETIME_COMPONENT(SUBTRACT_DURATION(ADD_DURATION(pageVars.firstDayOfMonth, 1, "months"), 1, "days"), "date")), {date: ADD_DURATION(pageVars.firstDayOfMonth, item-1, "days")})—
Step 2: Generating the calendar
Next we get into the most important and complex part: generating the calendar itself.
Using the firstDayOfMonth primed in the previous part, my implementation creates the following structure:
[
{
weekNumber: (Number),
days: [
{
date: (Datetime)
}
]
},
...
]If you need to store additional information to a day, you can add more properties to the Object – in my implementation of a time logging app I had the information of whether or not a day was a day off or not stored here as well for ease of use in determining styling and functionality.
This list of weeks with a nested list of days is generated via formula in the Repeat with property of a Container I have made to hold the data of one week. Here is what the formula does, in rough reading order:
- Generate a range from 0 to 5 to loop with my trusty MAP formula. This generates six weeks for a month, as it is the maximum amount of weeks a month can have (the extra week(s) are hidden using the Visibility property)
- Set the week number after modifying the firstDayOfMonth by adding 0-5 weeks to it
- For the days in the week, start another MAP formula, for which I generate a range from 1 to 7 this time (I use 1-7 instead of 0-6 since in the formulas where weekday is determined, 1 is Monday and 7 is Sunday)
- Set the date of the day by adding the 0-5 weeks to the firstDayOfMonth and then modifying that date to be the one for the correct weekday
Note here that the formula editor will not recognize “weekday” as a valid component for the SET_DATETIME_COMPONENT formula, but it works as expected.
MAP<week>(GENERATE_RANGE(0,5), { weekNumber: NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(ADD_DURATION(pageVars.firstDayOfMonth, week, "weeks"), "W")), days: MAP<day>(GENERATE_RANGE(1, 7), { date: SET_DATETIME_COMPONENT(ADD_DURATION(pageVars.firstDayOfMonth, week, "weeks"), day, "weekday") }) })After you have set the repeat formula, since you will be doing a nested repeat by repeating the days horizontally, give it a name in the Repeat as property, or you will run into trouble later on.
Screenshot from the component properties
For hiding the extra week(s) of the month, I use a simple formula to determine whether that week has any days that are in the month to be displayed.
SOME(repeated.week.days, NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(item.date, "M")) == NUMBER(FORMAT_DATETIME_WITH_TIMEZONE(pageVars.firstDayOfMonth, "M")))A much similar formula is used for determining how the days should be styled (days of the previous or next month are styled differently for better UX).
—
Step 3: Selecting and deselecting days per week
The last crucial bit of this calendar is the ability to select or deselect a whole week’s worth of dates at once. This is done in the app by clicking the week number section of a specific week. The functionality triggered sets the selectedDates page variable with the following formula that does the following:
- Check if every day of the week is selected or not
- If yes, remove the days of the week from the selectedDates (by selecting only dates that are not in this week’s dates, could also be done by checking week number)
- If no, add to selectedDates the dates of this week that were not already there
The reason this is this complicated is that date types are not easily compared for uniqueness, and as such I have to use DATETIME_IS_SAME at every step to check whether two dates are the same on the level of accuracy I need to use.
IF(EVERY<workingDay>(repeated.week.days, SOME<selectedDay>(pageVars.selectedDates, DATETIME_IS_SAME(selectedDay.date, workingDay.date, "day"))), SELECT<date>(pageVars.selectedDates, !SOME(repeated.week.days, DATETIME_IS_SAME(item.date, date.date, "day"))), UNION(pageVars.selectedDates, SELECT<day>(repeated.week.days, !SOME<selectedDate>(pageVars.selectedDates, DATETIME_IS_SAME(day.date, selectedDate.date, "day")))))—
Done!
…At least, kind of. Since this does not cover every step, I recommend using the copypasteable component I included before Step 1, unless you want to do some intense reverse engineering 
This, however, concludes my brief explanation into the most crucial and complex parts of the logic to generate a calendar component. If you have any specific questions, feel free to ask in the comments below. For more blogs on the topic, check out the SAP Builders group.
You can modify the provided component to suit your needs and use it in any app you like, but if you do and the app goes live, I’d love to have you comment below with a screenshot or information on how you utilized the calendar!
Original Article:
https://blogs.sap.com/2023/03/09/diy-selectable-calendar-component-on-sap-build-apps/