{"id":36689,"date":"2022-02-12T01:10:57","date_gmt":"2022-02-11T19:40:57","guid":{"rendered":"https:\/\/techmasala.addastudents.com\/dev\/?p=36689"},"modified":"2022-02-12T01:10:59","modified_gmt":"2022-02-11T19:40:59","slug":"how-to-create-a-custom-calendar-picker-in-the-power-apps-portals","status":"publish","type":"post","link":"https:\/\/techmasala.addastudents.com\/dev\/how-to-create-a-custom-calendar-picker-in-the-power-apps-portals\/","title":{"rendered":"How to create a custom calendar picker in the Power Apps portals?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Use Power Apps portals to create external-facing websites that allow users outside their organizations to sign in with a wide variety of identities, create and view data in Dataverse, or even browse content anonymously.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to add a custom calendar picker in the power apps portal then you have to follow the below steps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Create a webpage<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Add a form on that page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Write custom JS or jQuery for the calendar<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Add Validations (JS) as per your requirements<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1.<\/strong> For creating the webpage, first you have to create a Web Template then a Page Template, and Web Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/kSfzRkUXlknjiF2nDSPL3gzEtiP6mmNfCNGvoIVHDxWEmHqjpIp4pS51V63SpixAOYq6ztWrpup71BLlTufCTL7A5dUn5mCalEzLG2Ir24Q29wcwzyDjhuYXA8a4mvwrvW1z9qmQ\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/PUq-uH-ECHXm-Vgiplila47V_zgMdk5xOzjd4iBvJsv15Hu6MmCnOScVwiYVcEQ4p4Ol8WBfgGq1ljfYcZVs7k1XwtOe6VviIOItFMo8Pys-zMnPkG1L5EMRevrEnzPH9sFCYe2H\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-LgzNC1kcBmmCx25LArnWqnfiaveJqHD5RL5jaVoqRxQxsO3mdW_E9JZXvAM0_Ox0JrqBLS5B_CRhFw-OiDBbbtfxfVnnHoKTsgAc5LsOUvt6L5yIRtpqMmb6PxjynxMunpReQXX\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2.<\/strong> After creating the webpage, add a form or field for calendar picker.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. <\/strong>When you have the field on the page then you can start to write custom js code for creating the calendar picker.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below is some code reference for the custom calendar picker.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/yKADwqeaTFOkZNCijZcvno2g4TD2OgTPiBeMrQz-e7zC5lj9LR1Gaulor9ojHMAjL18g6s2gUt-0-rTYM3dLAvfwFBCg4x79Pe-8CH1BhuCJAebPRdLUqI_ovxY8mST4zSrfZ8_s\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/-6zDbI45uny_PbSbzqWbxK08vggLnjkdkhSByOojOyP7IQenx7wdF3FX-9m0BVZIlpIAw2vd4IvMfBa172Ovhu_xnCEsFoPpW8_xFeqEH2Xb6G6c1pwe4SSyKredvsy8LtoXhqU6\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/7zjmKgSO7WGclvOVcOeptFUBqZ04CQpBkVDZGMM92WRXuTXtYcn5RYlFxT_be1bbid4gWGdfZcIM6qFBUdZwx6enSCEm9dB-coKDcRno-WHp8F7A1NiHgQAYuSCCDY-PL0h3ma7l\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/fpufWOHGqHbzSpdc-IZKj4QAalFegVgkQgU7FXRZX4UWU9b2JlI2swbpGSi9MAIKbDZ073TA8dbwiJJKzSxP1TPcw5_xdKNkWwCCgux5dcCWOarw-MdDdgf_kL1_BE7gaNkCQO0X\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4.<\/strong> As your custom calendar is created now, then you can add the calendar validations as per your requirement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Desired Output:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/gXbTpqCEAOXpT-gCP6Jk9m42uMKsuKBLGPUVD_N2ITtLRogvxLk91XwF0OJWk4Xob6XYnTvvjKu1WqX42f7tmJtWw85dTImA1YRDFUEKcos4IpjgoXMUe3IKG8nAXGVA7ZtJeexX\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>References:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/portals\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/portals\/overview<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/portals\/configure\/add-custom-javascript\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/portals\/configure\/add-custom-javascript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Power Apps portals to create external-facing websites that allow users outside their organizations to sign in with a wide variety of identities, create and view data in Dataverse, or even browse content anonymously. If you want to add a custom calendar picker in the power apps portal then you have to follow the below [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":36678,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,18],"tags":[20,60,93,41,47,45,112,777,94],"class_list":["post-36689","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-technology-free","category-learn-microsoft-powerapps","tag-app","tag-apps","tag-coding","tag-explore-learn","tag-javascript","tag-js","tag-learning","tag-power-apps-portals","tag-programming"],"_links":{"self":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/comments?post=36689"}],"version-history":[{"count":1,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36689\/revisions"}],"predecessor-version":[{"id":36691,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36689\/revisions\/36691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media\/36678"}],"wp:attachment":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media?parent=36689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/categories?post=36689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/tags?post=36689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}