Power Apps Custom Calendar and Date Picker Component

what's up makers april dunham here in this video i'm going to show a brand new calendar component that i've created for powerapps if you've ever struggled with the date picker control and wish you could do things like disable the selection of weekends or change the start of the weekday then this video is for you this one control can not only be used for your traditional date picker type uses but it can also be used as a traditional calendar where you can see events for a given day i'll walk you through how it's done but first here's the intro [Music] to start i'm going to walk you through how you would add this component into one of your applications and all the settings and how it's used then we'll go into some of the details about how i actually created this to use this component you'll download the ms app file from my github which i have a link to in the video notes you'll go to the powerapp that you want to use it in click the components tab and select these three dots if you don't see the components tab you'll need to enable that feature to do that you can click on the file tab settings advanced settings scroll down find a section for components and make sure that feature is toggled to on once you do that you'll see a components tab here in your tree view if we select that we'll see this option for new component and next to it you'll see these three dots click those dots and select import components you can either import components from apps already on your site or you have this ability here to upload file so for using my component here you can upload file and point it to the msf file to import that component in you'll see the component is added here so now we can start using this in our app so let's go back to our screens tab and then we'll select insert custom and you should see that calendar component so that's going to add that onto the screen and i want to point out all the settings that we have to configure for this first as i said you can use this either as a date picker or a calendar to view events so if we click on the component we see on the right hand side we have all of these custom properties we can configure first property we'll see is the color this is going to control the color that the dates show up as the next option is for select range so if we play this right now we see this is toggle to off so this is acting as a traditional day picker where we can select a single date if we enable this select range option to on that allows us to say select the 10th through the 14th and it will fill in and have that whole range it's going to give you a start date and an end date so if you're using this in say a time off request type scenario you might want to enable the range feature border radius just controls if you want the fill to be square or circular so i can say put 50 there and you see when i do that the shading for the selected day is slightly rounded selected date color and selected date fill is the background color and the font color for when you have a date selected the important ones are below first thing you'll see is an option for show long weekday what that means is giving you a way to customize your headers for your calendar so right now we see we have the abbreviated version of the days of the week if we toggle this to off that'll go to your traditional just one letter symbol for the day of the week so we have that option to customize built in now the next one is start week on monday so this was a common request that i got from a lot of you all is how can we change this to say not start the week on sunday but to monday instead so we're able to do that with this toggle so the default is off so that it will start on sunday but if we toggle that to on that will switch the calendar around so it starts on monday then you see we have this option for allow selection of weekends so right now if we play this we can select any day of the week but if we toggle that to off you see sunday and monday just turn gray so if i play this now i'm unable to click those these buttons which is what they are in the background are disabled show close icon will show and hide this icon here so if you are wanting to use this in a pop-up type scenario i've included an icon to show and hide this control and you see we have a toggle for show calendar events so if you wanted to use this as a traditional calendar so that for example i can see dots on tuesday the 3rd and the 26th and the 27th that means that there are events on that date so if i click on the 26 for example it's going to show below what events fall on that date so i can use it as a traditional calendar so that functionality is enabled with this toggle so to turn it off you see those dots go away and the information below goes away so that now i'm just using it as a traditional date picker if i am wanting to use that as a full-fledged calendar with events that's where i would need to fill in this calendar items property which you see is a table so i have that pre-populated right now with some information with the calendar you see it's going to show the current month and year that you are on we have arrows where we can navigate through so if we click the forward it's going to take me to december and on it's going to update the date there and then i can go back and at any time i can select the today option to take me back to the current date the current day is always highlighted in red here so let's take a look first at how you might use this as a normal date picker so let's take a scenario where we have a simple input so let me put in a label and a text input so maybe we want to put a due date so i'll have a label for that and then we want to populate whatever selected date we have from the calendar control into this text box but we need a way to initiate the opening of this calendar control to do that we can leverage an icon so we can go to insert icons and if you scroll through this list you'll see a calendar icon so we can put that in there and we'll position this within the text box so that it seems like a clickable button like our normal date picker controls kind of do now if we click that icon and go to its on select property we can put in a function called reset and pass in the name of our component this will actually toggle the visibility of our component now the only thing we have to do is click on the component itself and go to its visible property and we have a property that we can use so we can type in calendar component which is the name of our component and if we do a dot after that you see we have a property called show calendar all right so now you see that that just went away we don't see the calendar anymore let's just play this app so we have a label we have a text box we click this icon and it's going to show our calendar control now to use this as a date picker though we need a way to get the date we've selected here and pass that into our text box so to do that we can go into our text box go to its default property and then in here we'll type in the name of our component again and do a dot after that if you go through all the properties you see there's one for start date so if you're just using this for a single date you can use the start date function of this and that will populate that with the current selected date now you'll see that these are actually formatted as date times but we can easily change that so we'll only get the date we can do that with a simple function called the text function so if we wrap that in a text function pull in the date and do a comma you see we have all these date time formats so if we only wanted the date we can choose this short date option and that will get rid of the time so let's just play this one more time so you see as we click on different dates in here it's updating what's in our control so that this acts just like a normal date picker and because we have that toggle on to not allow weekends we're unable to select saturday or sunday once i've selected the dates i can just click the close button that goes away and now i can continue filling out my form you'll see this works the same if i select the toggle for start week on monday i can have that turned on in combination with the disallow the selection of weekends so i still can't select saturday or sunday here and if we wanted to use it as a normal calendar and not a date picker we could say toggle back on this allow selection of weekends we'll switch it back to normal sunday and then just turn on the show calendar events and the only thing that you have to do from the configuration side of this is click on your components go to the drop down and click the calendar items property and replace that with your data now the only thing that you need is you need a title field a date field and a time field so obviously we could point this to our data source and pull that information down if your field names don't match this you will have to make some tweaks to the component itself so that the data shows up correctly so that leads us into looking at the component and how that was built so it's fairly straightforward we have three galleries that make up the bulk of this we have a gallery to show the weekdays we have a gallery that has the actual calendar items and we have a gallery that shows the details when you click on a date of any events for that given date we have a button that will enable you to go to the current date in the calendar and we have two icons for previous and next month that changes the calendar we have a label to show the current month and year and an icon to close another thing that you're not seeing that's behind the scenes is this timer this timer initializes the calendar when it's first loaded if we look at this gal call items this is where you might need to make some changes if you're pulling your items from a different data source and their field names are different so if we expand this gallery out you see we just have two labels so we have event name which in my case i'm pointing to the title in my data source and we have event time which i'm pointing to time so all you would need to do is come into either one of these and update them with your field names from your data source you'll also need to check this gallery's items property because this is doing a filter on the components calendar items which you'll fill in and it's saying where the date equals the selected date in the component so if your date field is not called dates you'll need to change that here now let's take a look at how we're disabling those weekends that's going to be done here within this gal calendar on this button day value this is just a bug control that we're allowed to select to select a date now if we click on that and go to the properties drop-down we want to go to the display mode property with that on our buttons we can enable or disable a button from being clickable that's what we're doing here first thing we're doing is again checking that custom property that we have for the component to see if that allow selection of weekend's toggle is set to true if it is then we just want to set the display mode to edit which means it's clickable if it's not though we need to do some checking to see if the date is a weekend and if so disable it if not enable it to check if a date is a weekend we can use the weekday function weekday allows you to pass it in a date and it will give you a numeric value back from one to seven the numeric value that's returned corresponds to the day of the week so sunday through saturday the number that was returned though is also dependent on what your start of the week is that's why before we do anything else we need to do a switch on that start week on monday property we have to see if it's true or false if it's false then we know that it starts on sunday so that we can do our check accordingly otherwise we need to change it a bit so if it's false and the week starts on sunday our formula will look like this we're going to do an if statement and we're going to use that weekday function and we'll pass it in the date that's selected then we're going to tell it that the start of week is sunday then we want to check so is the weekday that it finds from this date equal to one if so in this case that means this is a sunday then we want to do an or which are these two parallel lines that you see we're going to use that same weekday function we're going to say if the day of the week returned is 7 which means it's saturday then this button should be disabled if it's any other day however the display mode should be edit so it's clickable now if we have the start of the week set for monday we're going to do this same if condition the only thing that's changing is the date number we're checking off of for the weekday function if the week starts on monday then the weekday function will return to 6 for saturday and a seven for sunday so if it's either one of those we want the display mode to be disabled otherwise edit so it's really straightforward and that's how we're able with this custom component to restrict the selection of weekends this is something we can't currently do with the default date pickers so you would need to use a method like this to accommodate for that one more thing i do want to show as far as formatting these dates because this has came up in some of my other videos in the comments is how can we change how the date is displayed so coming back to this example here if i click on november 26 the date that's being populated in our text box is the month the date and the year now that's how we handle dates here in the united states but in other places you might have the date then the month then the year and that's the format that you need well that's something that we can do if we go back on to the text input in its default property where we are pulling in that start date selected date from our calendar control we can modify this text formula and instead of that short date time we can hard code an expression of how we want the date to be so for example in quotes i can have dd for dates and a forward slash and then month month for month forward slash four wise for year so when i do that you see that instantly changes the date to have the day first then the month then the year and now you can take that value and patch it to your data source all right so that's all i really wanted to show you today hopefully this is going to be helpful for you all to give you a more customizable calendar date picker component for your powerapps if you have any other ideas of feature enhancements or if you start using it and you spot any bugs let me know if this component helps you in any way i really appreciate you hitting that subscribe button and more importantly sharing this with your colleagues and your friends and i wish you all a very happy thanksgiving

Channel: April Dunnam

Views: 18,506

Rating: 4.9533076 out of 5

Keywords: power apps Calendar component, Powerapps calendar component, powerapps date picker, powerapps date picker control, date picker powerapps, powerapps calendar view, remove weekends from powerapps calendar, limit weekend selection in powerapps date picker, powerapps calendar events, april dunnam youtube, april dunnam github, april dunnam powerapps, april dunnam microsoft, powerapps components

Id: pl1YoItT1VM

Length: 14min 50sec (890 seconds)

Published: Tue Nov 24 2020

Reddit Comments

[u/oh_lympy]

doooope. Well done April!