PowerApps Calendar Control - Build your own using Galleries

in today's show we're talking about building a power apps calendar and so we're gonna do is we're gonna start with a blank screen we're gonna bolt a bunch of galleries together but we're gonna make the calendar completely dynamic to respond to the dates and we're gonna do a lot of calculations a lot of fun math stuff to make that all work but so then that way we can set ourselves up to start pulling in calendar data and working with that from sharepoint and such should be fun should be fast but first here's our intro hi my name is shane young with powerapps 911. those guys and today we're going to build a powerapps caller component we're going to do the whole thing by hand from scratch because i need a couple things right one is i want to teach a bunch of cool stuff about galleries we're going to reinforce some stuff we've learned about dates before but more importantly i need you to understand how it actually works so when you guys ask me questions like hey how do i adapt this to a week view or how do i have it start on mondays instead of sundays which we will cover but you know when you start asking those types of questions i want you to understand how the calendar is built so you can figure those pieces out for yourself instead of relying on me to teach you so so that's really the goal here is to build this thing from the ground up and then this will also set us up because this will be part one and in part two which i promise i will make next week seven days from today in part two what we will do is we will talk about like pulling data in from a sharepoint list and showing some data you know across or events on the calendar and not even events on the calendar their single days because that's pretty easy but talk about solving that multi-day challenge which i know a bunch of also have questions on so so that's our plan let's just switch over my desktop and take a look with that crazy concept had the end in mind from the beginning i thought i would show you kind of this is what i built after you know a day of playing with this and trying to make it pretty if you watch any other videos you know that i'm terrible at pretty so this took a lot of work and i can tell you that my ua people still think that uh we're not uia people ui ux i don't even know what that is whatever those people still think it's too busy but i don't care i like this one anyway what i wanted to kind of cover here on this calendar was you know i go in here so this was september 2021 i don't know why i'm there but i can flip around june so here's interesting i want you to notice that may is a month it requires six weeks to show right because it starts on a saturday and it goes through so the calendar does account for that i had to test that and you know make sure all those scenarios worked and and i think i found all them because i think there's a reason i was out here in september oh because august is the first month it started on a month started on sunday i want to make sure it worked for that it did so i felt pretty good about this was all working so if we jump back here to march you'll also see so today is 3 21 um so that day i made that white once again i was just trying to kind of play with ideas make sure i kind of understood how it worked and then just to show you kind of where we're ahead in the future if i click on this and so here you can see what we'll probably do not probably we'll definitely figure out next week which is how to put these events on here have multi-days that type of stuff so a lot of fun um yeah so remember if you just want this calendar like yes i'm sold i want to download that exact purple calendar right now cool you can go to training.powerapps911.com and sign up for the curated library and you can download this video and this app and all the other apps that i build so very powerful tool there for just a couple bucks a month so check that out also you know if you want to be notified when i make this other one hit the subscribe button people i need more subscribers please do that thank you all right anyway so now that we've kind of seen this i want to kind of build this thing but i don't want to start with magic for you guys so what i want to do is go over here and start with a nice blank screen and put this thing together and it's going to really be two things right one is going to be understanding galleries a little bit deeper than you might already so we're going to get into that and then two is we're going to try and understand more of the date logic of how we do these things and i'm going to show you some tricks i figured out okay learn something we're going to show you right now so first off let's do a gallery in here so i'm going to say up here in my little menu insert a gallery in vertical and so then i am going to change its view to just be title and so one of the things that we have never talked about on the channel before is with a gallery you are able to come in here and you can say hey gallery there is something called the a wrap count so this is how many uh columns it does before it starts wrapping to multiple rows so as you know there is seven days in a week if you change this to seven look at that it jumps and does a seven interesting so then now you're like all right well i probably need to do that whole sunday to you know saturday type of thing and so i typed that out the first time and then i remembered somewhere along the way i learned that you can do this whole calendar there's a calendar function so we i want calendar dot uh weekdays long if we do that now if we go into our gallery and say hey instead of trying to show me sample heading which is not there anymore you can do dot value we're going to delete the little arrow because we don't need that and so i'm going to grab these and pull these across and look at that we now have a gallery that is showing us the seven days of the week we're only going to ever have the one row so just kind of pull this up here and so then now that we've got that in place what i want to do let's see there's that i'm going to get rid of the bottom separator i don't want that i'm going to take these labels and do a couple quick things them one is i'm going to center them and two because i kept having problems with balance and things like that what i'm going to do with this title is we're going to stick with responsive comment concepts in here so i'm going to say title i want your width to just be gallery four gallery four and i want you to be template width right so remember that is how you just set the the width of um the little cards little they call them templates and galleries so gallery four template width that gets us what we need and so then now i should be able to pull this thing up a little more let's see i'm just going to pull this to the top i'm going to make this guy this high and so i should be able to pull this all the way up and look at that now we've got nice little um pieces and if you wanted to have some type of divider between the dates remember what you're going to do here is you're going to just throw in a rectangle oh but not there you can put your rectangle inside of this thing so icons rectangle and so then i just set its width over here where is width i can't find width width width width right here i want to set its width to be a and then i'm going to say hey i want your x right so your x is how far you are left to right so instead of being 40 what i want you to be is i want you to be all the way against the edge so i'm actually going to go up here so i can write a formula and say hey x you're going to be gallery 4 dot template with -1 and so then that puts it on the very edge and so now we've got that divider woohoo so that was you know the way that i did that um you know there's a bunch of those little mechanics that we're not going to get into but i want you to be thinking creatively as you start to figure out how do i want this to look how do i want to make sure that same rectangle is tall enough right what would i say i say hey your y is zero right start at the top but then your height your height is just going to be gallery four gallery four dot template height and so then now you know that it's taking up the whole row and so then i'll be okay gallery four you know what i want your height for the whole gallery to actually be gallery four dot template height boom so now we've got a nice tight little um you know set up there for our top bar easy enough so all right so that kind of gets us going so now we need to make the days so i struggled with how to show you guys this the easiest way possible so we're gonna try and make it easy so we're gonna throw another gallery on here another and i just use vertical doesn't matter it's gonna get changed in a second i'm just gonna make it stretch across take the whole board i'm gonna say only show me one field and we're gonna do the same type of thing right i need your wrap count to be seven and so then we're gonna get rid of the little arrow we're gonna get rid of the little separator and i guess we're going to rename this right so we call this gal so the top one we're going to call it gal list of days i just don't want to get you guys get confused about which show one is what so this is going to be gallery month view so it's called gal month view all right so now that we've got gal month view laid out we're going to set the items and so to start with what we're going to do is we're going to just set the items just to be one to 35 right so five weeks seven we're going to come back and revisit this but we're going to kind of get the the basics going before we get fancy so we're going to use the sequence function and i'm just going to say hey give me a sequence of the numbers 1 to 35 and then our gallery now we'll say edit in the formula bar and this item dot value and so you go we now have a list of 1 to 35 and this is important because having these items is what we're going to do because we're going to do everything else based off of date math and so we need to like way just to have an ordered list out like this so the first thing i need to do is i need to figure out basically you know what is the first day of the current month okay so we're gonna use labels at first just to kind of make our lives so we can see things and so the way that i did this is i just said all right give me the month of today oh but it's not this month month of today and so that would spin out of three right it's march third month perfect and now we're just going to build a string of the first day of that month i don't know why this is kind of the way it worked in my brain i can think of like seven other ways to do this but this is how i'm going to do it so i built a string just like this and then for the end here we're going to use the year function and then say the year of today also and so there you can see that that is 3 1 20 21. so that is the first day of the month that we're currently in right that's how i got it to it i said i can think of other ways to do it but that'll work and so as we figure these things out we have a bottle button over here that we're just going to save these into because in reality i need that as a variable so now that we know that works i'm going to say set var uh video month i should start with a blank app so i didn't use the same names again but you know what do you do like that and then we're just going to copy this formula now keep in mind that right now this is all just text i need this actually to be a date so we're just going to take all of that we're going to use the date value function that turns a text date into a date date and why are we doing that because i need the date to be a date date so then that way we have full access um you know to use do date math which is what we're going to do here in just a moment so there you go if we press the button then let's see so that goes right here we'll just say all right give me another text label and over here in this other label we're just going to say show me var video month that's not how you spell video but what do you do all right let's fix that it's going to drive me crazy now you guys probably saw it in real real time didn't you press the button and then we go here because that variable doesn't exist anymore that video does okay cool so that but we know that the first day of march when i put my calendar up the first day of march was actually a monday so we can't just jump right in so what we really need to do is figure out what is the sunday of the week of the first day of the month that's why we needed that first day of the month so what we're going to do is we're doing a little more math so we will just throw another label up here and so in this label what we want to do is we want to take remember there is this function called weekday and so weekday you provide it a day so var video month and so it says hey the day of the week of this thing is a 2. so we're like oh well that's good so then what does that tell me that the first day of the month would be backwards one right but what we're actually going to do is we're going to say i don't want this dates right here right this sunday should be 228. i don't want this to be 228 i want to store 227 because what we're going to do is we're going to take the 227 we're going to add 1 to it and so that would make this 228 add 2 to it which would make it 3 1 and my calendar should line up so what we're going to do is we're going to say all right i want to have so we know that gives us a 2. we're going to do date add and we're going to take var first day of the month and we are going to subtract so we just do like that just put a minus sign right there days from it oh days and so then what does that give me oh it gives me 227. whoa okay so what we're gonna do i'm gonna copy that we're gonna go over here we're gonna say set video or set var video my spell video correctly first uh right this time and we'll call this uh first day view we're gonna paste that formula right there we're gonna close our parentheses and do that and press this button and now of our first day video is 227. okay here we go now we can do magic so i'm gonna go over here i'm gonna leave this one on here okay i want us to see the values because the value is important as you guys start to do math and you try to figure out like what is this day and what is that day so you you want to see it you want to be very comfortable that's there so we're going to add a second label so i'm going to throw another label up here we'll just kind of stretch it across from now and we'll say hey you i want you to be a couple things i want you to be date ad var video first day of the view so 227 and i want you to add to that this item.value and we're going to add days what boom that's awesome right that that to me is really exciting because look at that all of a sudden now we have a way to get dynamically because as we gonna look at a second we're going to add and show and move dates around but that gets us exactly what we wanted the math works we like math that works right i'm going to double check my calendar 4 3 is the last day the show show up yes the 31st is on a wednesday yes what what what so in reality right we don't have to show this value we can delete this out of the view and you will as you build your calendar right we saw that in the bigger calendar but i wanted this on the screen i want you to leave it on the screen until you are completely comfortable with what's happening here because it helps you understand because what we did remember is we just figured out that the first day of the view is actually well it's actually the first day of the view minus one but the first day that we need is 227 so we got that dynamically by using the weekday function group and then once we got that dynamically we're just able to say add to 227 add 1 to it's 228 add 2 is 3 1 etc etc that gets us in the whole month like it i hope you like that okay so that's the first piece right so these are your initial values now typically instead of having these on a button like this where would you put this code right you'd copy all this and then go to app on start right you'd want to have that in your app on start because when the app first opens you want these set you don't want your user to have to click this you know you know button that says you know start here you don't want your users to use this but we need to build it out ourselves so now that it works we just copy this put this onto the app on start and it would all fire so speaking of buttons now what i want to do is how would we add a month fair question so i'm going to go up here i'm going to say give me another button i am going to i guess i should have duplicated this we're going to copy this but what we're going to do here is we're going to say all right so we know that we don't actually need right we know that var or video month is already been created right at this point right because it would have been created on start so when they press the plus button i just need to increment that so what we're going to do here instead of all of this shenanigans let's get rid of this is we're going to say i want you to be date add var video month var video month and i want you to add one and look when you're adding you can add one month sounds weird but you add one so then that would take our march first date which is already stored in this variable right it's currently march 1st we know it is and so we're going to take our march 1st and we're going to increment that to april 1st and then we're going to just back our way into it so i think that just simply by pressing this button what are you mad about you got a month let's see date ad var video month i think it's not really mad so we're gonna press button what are you mad about data var video month [Music] control x let's do that let's just put our formula right back powerapps now yeah so this is powerapps being doing its best to be dumb because we corrupted the variable so what i'm going to do is i'm going to put this back bar oh put our formula back it's mad i get it we're gonna click on start here so i'm holding down the alt key press start here and then now we'll press this button and everybody's happy so i have this problem a lot with this set of controls because all these dates are interconnected when you break one by typing a formula into it powerapps gets confused and so i just had to kind of trick it into being happy but right at the end of the day this is the correct code and so then now if we take this and now if we press let's see let's just make sure it's right so bar video month take the current month add a month and then var oh i used the wrong formula right here this should be var video first day of our video marketing ah you guys let me make a mistake how rude no there we go so now that we've got both of those in there now if we press the button so we'll start here all right 228 that all looks good we'll press this button and so does april first start on thursday let me double check april 3 starts on thursday last view should be 5 1 in that mood let's see april 5 1. success okay we're doing great ready for a little more complexity in our lives right so obviously and this is add so what would subtract be just so we're all right i don't want to jump to conclusions so let's just copy the add button i'll put the subtract here and so subtract would just be the same exact formula but you just make this a negative oh not like that you make this a negative one and so then now that should let us go backwards backwards backwards forward forward forward start back okay so we can move back and forth cool cool so now that we can move back and forth let's move into may so april oh you know what another thing we're not doing very good job of let's still label up here at the top little bonus on the side here this should just be the month of var uh video first day oh no var video of month and then we'll just say we'll wrap that in a text function and we'll say just show me mm oh all right change that text var video month there you go and so then we're just going to use the format of let's do the 4m one there you go so now it says april up at the top and nice big bold letters change that to like that and like that okay so now i know what month i'm in because what i want you to do is just make sure that works it does is when we go to may so now if we go to may remember i told you in the lead in that may you know needs six weeks so 5 1 5 29 we're missing 5 30 and 5 31. so what we've got to do there is we're going to have to now go talk about making this number instead of hard coded at 35 right like one of the ways you could do it is hard to code at 42 and then just hide the extra days boo we instead are going to do some a quick little math for that and so before we do that math let's go do it up in a label right easier so i did i wrote a really awesome amazing complex formula to do this i was like so proud it had like two widths nested inside of each other and a mod and it was awesome and i was like wait a minute i was trying too hard so i found an easier formula so i thought i'd just share that with you so what i'm going to do is i'm going to say let's do a date diff right that compares the difference between two dates between var video first day in the view and the uh oh it's date ad day dad and our var video month we want to take that and we want to add to it one month right so when we're in april we want to get may because what i really want to know is the difference between the march date and the may 1st how many days are between those two so we're going to add a month to that and so then that and we're going to say i want the difference in days just so powerapps doesn't guess and mess up and so you can see that that is 38 which makes sense in may right so what i'm saying is from 425 to 6'5 that is 38 days so that tells you it's more than 35 right seven times five which five weeks would be 35 so to show 38 days we're actually going to need six weeks on our calendar so to do that what i want you to do is you got the formula now so we're going to say hey if that is greater than 35 then i need this to be 42 and if not i need this to be 35 so right now right we get it out to 42 and that gives us the whole view that we need nice but the beauty of that formula is when we go backwards to april it doesn't work oh it says 35 up here so now that we've got that done so it works you got to go up here to your sequence and change your sequence to use that number so there we go so that's one two three four five weeks we go forward one six weeks back to five weeks right and then oh looks like i don't even know it's july is the six week does that make sense so july first is on thursday july 31st is on here oh so look i found a bug in my system because this is exactly 35 so we should have stopped here so look at that my formula is not perfect so if my date is greater than 36 there we go so july works this is why we test june is correct may is correct april boom boom and then the one i like to check was out here i think it's uh september no it's august that is exactly so august starts on the first there you go so we've confirmed one that starts in the first works we confirmed one that ends on the first works and we conver confirmed one that needed to go over like may all worked so there you go it's that crazy formula i'll leave that on there for you but so that and if you're thinking like shane why did you have to do 36 right because in my head i did 35 and i got messed up by that because what's the first thing we do right is we add one remember we're actually you know even though the first day in our view let's go back to the month that i know remember even though the first day in our view was 227 the first day we show is 228 because we're adding one so that's why we needed to see if the difference was 36 not 35. so glad i caught that because you guys would have caught in the comments and yelled at me so oh crisis averted all right i feel like we're doing pretty good here um so a couple other little things here one of them is you know i just want to remind you guys that if you wanted to do something special like remember i color coded my um today so what would you do there well these labels you know they have a fill and so you can set that to whatever you want that's how i got the purple on the other one but maybe i just want to highlight today in red so i would just do something like this and say hey if um if self dot text and then we're going to turn that into a date so we're going to say date value self.text and so that's just its value if that value is equal to today then make it red if not make white and so now 321 is in red remember self is a way to wrap for control to self reference itself so what is what is currently stored in my own text and we had to turn it into a date value because we want to compare it to today which would output a day but so then that gives you the ability to understand what day of the week or month or whatever you are one year i don't know what day you're on it gives you the ability to figure that out so that was pretty cool um another piece of this under the text function so i know that all my friends across the pond right you do not like our whole month day year remember you just throw a date function or you throw a text function around this thing i'm going to say turn that date into uh that crazy thing you guys like right ddmm yyyy and so there you go so now it is in a more european happy format which confuses my american friends but there you go so that would be uh how you guys could do that we're going to get rid of that because it confuses me also and then the other one that i wanted to cover real quick one of my friends from germany on twitter said we start on mondays how would you do that so all he would have to do is take this screen that we just built we're going to duplicate this so that way we don't mess up our main one and so all we're going to do now is we're going to change this formula so here where we did getting the date of the first day of the month that doesn't change but right here where we do the weekday function we're going to say hey instead of the weekday starting on sunday i want to start on monday so just go to the weekday functions do a comma and you type in monday and that will tell that function to start on a monday and so then now what we should see if this works is the first day of my calendar should become three one so we'll press start here and so there you go now my first day is three one now unfortunately um i could not find a quick way for you to flip these around so what i ended up doing earlier when i was practicing was i just went and typed them all in right i just copied all that and so i just had to type it out so i don't there maybe there's a trick to do that but i don't know it but so there you go so now that would be what a monday-based calendar would look like you would of course you know now that we fixed this button just remember to go fix this button as well because i did not do that in my first test oh uh not mine it's monday so i had to fix that button and then i had to fix this button right here and there you go so now that we've got that now we would have a monday-based calendar so it should start on 329 if we go for it a month so add boom what let's just make sure may work still boom yeah all right so i thought that was a fun one uh another request i got on twitter that i'm not going to do today but i can do in the future if more of you want to see it is a uh someone asked me to build a week view so instead of a you know five or a full month view account or just a week view um so i thought we could definitely do that the problem is i had to kind of change several pieces of the logic it wasn't one little quick tweak tweak like that one was so we'll make that in the future video um but yeah so now that you guys have got that right now you understand all this you could just oh let's get off of this one let's go back to our normal one you know we could get that out of there and so now we're cooking right now we have a proper view of all these um and so what we're going to do in next week's video is we're going to start inserting a gallery inside of here so we can start to browse and understand what's going in here also just keep in mind in this particular one right i did a lot of formatting um but really it's just a bunch of it's a bunch of different types of ifs so here you can see like remember we just talked about i did the whole um phil right and so there was how i did the fill that time i wrote the formula different than i wrote it this time because why wouldn't i it's just what i do um but so you know that was how i was able to do the different color coding and so here you can see that i had one color coding for if it was the 21st which was today i made that white and then i said if the month of self.tax is equal to the var first day month so if we're in march and we're showing march do purple and then if not do the faded purple so that was how i got that kind of complete color coding so there's the formula that i use for that um also you'll notice here like i had a so this is a rectangle for the right hand side to get the lines this way and then i had the rectangle at the bottom because i want this bottom row to show up down here i ended up putting a border around the whole thing so i could see it a little nicer i did that i also you don't see another little trick so the right border i don't want the right border on saturday right if you go look at the one that we just built together which is right here notice like up here remember we did the dates but we had the weird little border over here i ignored it the first time so what i ended up doing to get rid of that go back over here to my gallery gallery right is i set the visible property and i said hey if i divide you by zero right so or divide you by 7 so i use the mod function i love the mod function then if you're not equal to 0 show because saturday 7 divided by 7 will be 7 or will be 0 right so it doesn't show on saturday but it shows on all the other days of the week so that's how i didn't end up with a double border over here um so a lot of those little things remember you can download this whole working app you know with all the niceties of this one from training.powerapps911.com and the curated library so just go get go steal the thing there's like 400 more little tricks in here for that but yeah so this has went way too long so i apologize but hopefully you guys are feeling good about this right that you you feel like you can build this because once you can build this then next week we can talk about we're going to stick a gallery inside of here and we're going to have child galleries what yeah child galleries is going to be the key to us showing the data of you know going forward on the actual individual days so awesome awesome as always if you have any questions or comments leave them below i answer all them and i'm kind of caught up right now like not all the way caught up but pretty close kind of exciting so that is a lot of fun um if i can do anything you know reach out to us or powerapps911 we build this type of stuff for customers all the time so happy to do that for you as well and with that i'm going to say thanks and have a great day before you go be sure to click on the subscribe button over here so that way you'll be notified when new videos come out if you need any help or you want to work together whether your problem is big or small check us out at powerapps911 we do it all i rhymed or if you're looking for more formal training offerings we have those linked up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 18,299

Rating: 5 out of 5

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps calendar, powerapps calendar component, powerapps calendar view, powerapps calendar screen, building an event calendar app using powerapps, power apps calendar, powerapps gallery wrap count, powerapps gallery calendar, powerapps tutorial, power apps calendar events, build a powerapps calendar, shane young powerapps, powerapps sharepoint calendar view

Id: SlfnhQgMXrY

Length: 35min 2sec (2102 seconds)

Published: Mon Mar 22 2021