Build a Calendar From Scratch in Javascript

hey everybody in this video we are going to be making a calendar in vanilla JavaScript we're going to be doing it without any front aim front-end framework without jQuery and without any other libraries or packages okay so we're gonna get started right away just because this is gonna take a little bit of time it's not gonna be very pretty but it should be pretty functional it should be fairly functional alright and then we'll kind of see what it looks like at the end of the video I haven't built this yet so I just kind of was thinking about how I wanted to do it last night so I'm gonna wing this and see how it goes alright so what we're gonna do is inside any editor or a visual studio code you're just gonna create a new folder and I'm just going to call it Cal you can name it whatever you'd like and inside this Cal folder I'm going to make make three files Khalid is Khalid CSS and lastly cow HTML okay and inside my HTML I'm just going to use the Emmett abbreviation the exclamation point set up a basic doctype so that I can you know type some HTML in here I'm gonna set up my script which is going to be Cal j s and I'm also going to set up my CSS file by using a link the style sheet will be Cal dots or excuse me that rel would be a stylesheet rail stands for a relationship and the href is just what you're linking in and we're going to be linking in our CSS file alright so real quick I want to put some HTML and CSS in this project it's not going to be very pretty but you know it'll be presentable sort of okay so inside of Koh tml we're gonna create div and I'm gonna give this an ID of we'll call it Cal container okay and inside of cow container we're gonna want another div I'm just like imagining how a calendar would be obviously you have like a container and then at the top over here and I'm just like you know over like to the left side we're gonna have the month and to the right side we're gonna have the year and then basically the days will display underneath so that's kind of what I'm building him head right now and I'm going to try to put this into HTML so we're gonna give this an ID of Cal header and inside of the div we're going to put a P tag and this is going to have an ID of month and below this will have another P tag and this is going to have an ID of year okay we're not gonna put any text in here we'll actually do that with JavaScript okay we're really not going to work in knock this is going to be a very bland HTML and CSS combination here okay so below these we're gonna have another div and we're gonna have ID of days container and let's see all right and then this is kind of how I was thinking about doing it last night this is gonna be a little bit hacky but I actually think this is a pretty good way to do it so I'm gonna copy this div and then I'm actually gonna create seven divs and these seven divs are going to be for all seven days in a week okay so that's six and one more that's seven okay now each one of these I'm just gonna give a class of day column and let's see well what else do we want to do I think that's actually good right now that pretty much actually is going to be all of our HTML I think I'm probably wrong about that like I said I'm kind of winging this so I have no idea how this is going to turn out but I just built like a scheduling app and when I was building the scheduling app I kind of like thought like oh I could build a calendar doing this so but I didn't okay anyway sorry didn't mean to get off-topic okay so in our CSS let's take a look we have cow container so cow contain or what do we want to do for that well we're gonna give it a width of 300 pixels a height 300 pixels then you give it a border of 1 pixel solid black let's see mm-hmm let's just give it a margin of 300 pixels just to kind of shoot it to the middle I know it's kind of ugly but I just want to keep our CSS and HTML to a minimum because this video is more about JavaScript and just kind of how you can create elements and you know kind of make changes with a DOM and JavaScript okay now let's see what are we want to do Cal header so for Cal header we're going to okay we're actually gonna have to edit this a little bit so I want to creative and I'm actually gonna wrap I div around both of these okay sorry no it's not what I want to do there we go and then come on and we're gonna select that bring it down and no there we go all right so the reason I did that is because we're gonna need something that we can put in next to the month and the year so like it's basically going to be like a minus or plus symbol or something like that or maybe we use a less-than or greater-than so I use like a less than sign and then over here I'll use a greater than sign and if you're like really confused right now don't worry you'll see in a second I promise so I and then and if you don't know what the eye is in HTML it's basically the same thing as a span or pretty much just like a little icon I use it for all my icons all right and then in each one of these we actually could just give our peas a display of in line and in our Cal header we're gonna give a display of flex so let's see that oh well I haven't even copy the path yet okay so let's copy the path paste what do we got there we go okay that's source of all it's not terrible but it's a little low so let's fix that margin so the margin will set it to 150 300 all right cool now these are basically we're going to click on them and they will give us the so for I I'm just gonna increase the font size a little bit just so it's a little bit bigger I'll say like 18 pixels if my keyboard wants to work there we go I guess the eight key on my keyboard struggle a little bit now what do we want to do okay that's good now for each of these divs we're gonna give this a class of you know I don't need to do anything because I did I did P is display of inline oh that's what I want to do sorry I want to do justify content space around and I believe this by default well good that's exactly we wanted and then even better we'll just give it a little bit of margin on the top margin top maybe 10 pixels is good let's see alright that's great okay so that's pretty much the basic set up for now so I'm going to cancel out of my CSS I'm going to bring my JavaScript file over to the right just a personal preference I just like to have my JavaScript file on the right I think it's because I read from left to right so I like to have I like to read on the left and then work on the right I don't know though all right so let's talk about our objective so our objectives are the first thing we want to do is I'll just write objective so the first thing we want to do is get the number of days in a month and that's actually a little bit tricky but we can use the date so the new date so a date is so date is a JavaScript constructor function right if you don't know what a constructor function is um it's basically whoo that's that's that's kind of veer off topic a little bit here basically we can use the new keyword on a JavaScript constructor function and it will give us access to properties inside of it'll basically create a new instance of this date and give us the access to the properties inside of it okay so I don't really want to talk about the new keyword in the JavaScript instructor function too much because that's a whole long video in itself and I have a feeling this calendar is gonna take a little bit of time so I want to keep moving on with the calendar so let's the for the first objective let's just try to get the number of days so let's create a function and let's call it get number of days oh we're gonna take in the month we'll do the year first let's how are we gonna do this okay we're gonna take in the year then the month do we need anything else no I don't think so okay now what I don't know I don't really want to look things up case but I'm almost sure that the way you get the days of the month is you do new date and then it's year month zero so zero if you so basically inside of this date constructor function here you can actually put in different parameters and then add a method to it and I think it's get date gets the day of the month yeah I think that's it okay I guess we'll see if it's not right and we're going to just say let days of month or we could say num days that's even better I'd like to try to make my variables the best names possible propose get thee okay now this year and month were obviously these are parameters so we're gonna get these from somewhere else okay and then we're going to do is we're just going to return num DS and that's going to be it for this get number of days now real quick let's just test to make sure this works so let's just above this let's say let year equals new date dot get full year which is going to return 2019 and a couple days it won't know to return 2020 but all right you guys can't see the bottom down here but I was oh yeah if I go like that you can see it's Monday December 30th okay so get full year is going to return 2019 and let's see for month we want to do new date dot get month like that okay pretty good so let's see what we get right now and we're going to come back to this in a second but basically what this did it gave us the year in a number so this is going to give us 2019 and this right here is going to be a little bit confusing but this is actually going to return on 11 okay and if you're wondering why that returns 11 it's because there are 12 months in the year but basically the way that JavaScript works is is that the months ago they started 0 and they go to 1 2 3 4 5 6 7 8 9 10 and 11 so there's actually 12 there all right and it's kind of annoying that it does it that way because you know you know January's one February's to Marge's 3 but for now we can edit this a little bit if we want and just add one to them but for now we're just going to try to keep in mind that 11 is actually December so I'll show you that if I console dot log month all right and I'll save that and let's just come back into the browser and you'll see it's 11 okay all right but now we want to do let's get rid of that now we want to do is we want to get the number of these and I'm actually going to cancel that log that's just so we can look at it because I'm not a hundred sure that's right console don't like the number of days and we're gonna type just a year and month all right now if you're confused where these because let's just change so basically this year is what's down here and this month is what's down here so let's actually change these variables to your chosen and month chosen just because if you're a beginner and you see this year and this month all right and you see this parameter and then these once again our parameters okay and you'll see if you hover over it they are parameters down here these are actually the variables that we made up here okay so let's see what we get we should get a number no I just clicked my mail that's incredibly embarrassing all right there we go and let's refresh and I get any and okay that means I made a mistake somewhere numb days let's see yep full-year your month what is wrong all right let's check everything console dot log year is that happening year month why is it giving me an ID Oh duh because I did your I did sorry that's not incredibly embarrassing I changed it up here there we go alright good so that's good we're getting okay so we're getting thirty and that's not what we want and that is because in here I guess they want twelve so if we put twelve in here we're gonna get thirty-one great okay and let me just make sure that if we put two in here we get 28 okay so unfortunately when we console dot log and this is really confusing but I'm gonna do my best to explain this all right now if i refresh okay we have two mini console dot log so let me comment them out but basically if I can't about log this month chosen and i refresh it it's going to give us 11 however in hee it wants the actual number it wants so December they want December to be 12 they don't want December to be they don't want December to be 11 anymore which is incredibly frustrating to me but basically what we have to do is just set month two plus one and that should be that should be fine for now okay now next what we're gonna do is well actually let's just check and make sure that works flawlessly and the best way to check and make sure it works is to just hard code the years and to use February because February you know has 28 and 29 days so let's say 4 here let's do 20 20 and then month plus 1 and then we'll actually change this to 2 oh no we don't need to do that sorry let's come down here and what we're gonna do get rid of that console dot log and we'll console dot log here and we'll do 20 20 and since next year is a leap year we should get 29 if that works and I know let me get 31 oh because now it's plus 1 of course so now if you go like this we get 29 that's what we want but since we're gonna be doing plus 1 basically it would be 1 now because 1 would be 1 plus 1 right it's gonna give us 29 okay so that's going to be a little bit confusing but I'll remind you guys of that that way we don't get tripped up there so that function works it took a little bit of getting yes you took a little bit of setting up but all right so what we're gonna do now we're gonna come down here and we're gonna create a new function we're just going to call it render Cal okay and this render Cal is gonna be pretty much the meat of our of everything that we're doing here and let's get started with it so basically what we're gonna do is and we're gonna have to you know keep adding stuff in this but the first thing I want to do is have a for loop and actually we'll skip that real quick so we'll do da no you know what sorry I'm kind of thinking about how I want to do this so we'll say let we'll say let year equals and now we're creating a year variable and or we'll even say year P tag because those are P tags and that actually won't be easiest to read so we'll do document dot get element by ID and we will do here and then we'll say year P tag that inner text is going to be equal to your chosen okay and then we're gonna do the same exact thing here we're gonna do let and [Music] that's fine I can leave this on the function the more variables that I created in this function the safer I am of affording collisions so we'll keep it there alright so if I need to change anything else so we're gonna say let month P tag equals document that get element by ID month now unfortunately we want the actual like spelling of the month we don't want just a number so we're gonna do up here we're gonna create a an array called months and in this array we're gonna have 12 items and you can probably guess what they're gonna be February Feb is a Feb you I think it's February that's embarrassing I have no idea March you guys are probably about to turn off this video like this this ding dong doesn't know how to spell February May June July August September October and we actually have to make sure we get all twelve because if we don't that'll actually create a massive issue for us so and it looks like we got all 12 so 1 2 3 4 5 6 7 8 9 10 11 told ya good alright so now what we're gonna do is we're going to say that month P tag is document document okay that's good and what we're gonna do is we're gonna say month key tag dot intertext equals just you know what let's do this out no we'll do it in here we'll do it in here we'll say we'll create one more variable and we'll create it on top of here so we'll say it let month to display okay that's fine that's not the greatest variable name but it's not bad month we'll call it month name that's good some month name is going to be equal to month chosen excuse me it's not it's going to be months and and then in here month chosen all right now what we're doing here is is we have months 0 through 11 you're right because January starts at 0 so this is actually gonna work because our month chosen for December it's going to return us 11 okay so if we set the month P tag to month name right away and if you don't know if we did down here basically we use document dot get element by ID which is a way to access items on the HTML Dom and which we have you know inside of our browser here and access to and we're accessing basically this year and this month and read that's why we gave this those IDs we left the text blank because I knew we were gonna insert it in here anyway alright summon refresh and we get nothing and of course we get nothing because render Cal is completely not even being called ok good so that's a good start alright that's a good start let's see all right so we're probably gonna have to fix that up a little bit and add some parameters maybe not we'll see we'll come back to that a minute I know the one parameter that we're going to need to add is this get number of days function okay so what we're gonna have to do is we're just gonna say get numb these okay and that's gonna be this function up here that we're gonna have to insert in there um this might not be you know your favorite way to do this I just thought it was a clean way to do it it's gonna be pretty we're gonna use just a couple functions and this function right here is basically going to be our main function okay and this function is going to return I have this function as a parameter and you'll kind of see where I'm going with this all right now for a month okay so here's we're gonna do we want to create a for loop we're going to say for let I equal to 0 I is less than it's actually going to be less than the number of days so it's going to be get num days because it's basically just going to be whatever this function returns so whatever nom de x' is which is equal to the new date so basically a matter however many days of the month we want to loop through these and basically we're gonna create a P tag in here and then we're going to do I plus plus alright now next we want to let's see what we're gonna do we're going to create a P tag so let's say let let day P tag you don't have to create those if you want it's kind of an ugly name but it's just I just want to be self I just wanted to make sure we know exactly what's going on there so document dot create element we're gonna create a P tag alright so we're gonna create a P tag depending on how many days are in here all right and then we're gonna say let's let's see but they oh no let's say let day text equals document that creates text note I believe it is yeah there we go and we're just gonna use I dot to string okay so basically the day inside of this P tag is going to be and you'll see we're gonna do that right now so this is something you create this text node by using document.createtextnode and you can insert the text in here and then you can actually append this text node right into an HTML element which is what we're gonna do so we're gonna say actually let's hold off on that just a second I just want to make sure this is going to be a good size so in AP tag that's style now you can access well because we can't give the P tags over here we can't give them any CSS IDs or classes because they don't exist right now in the HTML file if you look so there are the workarounds for that but we're gonna keep it really simple and we're gonna say day P tag dot style and basically this just lets you access these styles of this element and it lets you style it on your own or not I mean you're always down on your own but lets you style it inside of JavaScript so I'm gonna say dot style and then we're just gonna say font size and we'll set it equal to 16 pixels that might be a little big but now we'll set it to we'll set it to 20 if it's too big we'll go down okay and we'll append this day text this really doesn't matter where you put that okay so what we're gonna do is we're going to take day P tag dot append and we're basically you're just gonna have penned a child and we're going to append the day text okay that's good and alright that's good okay so now we have a P tag with each one of these alright so this is where it's gonna get a little tricky because we want the we want to have we have seven-day columns here Oh what we actually have to do is we have to give each one of these an ID so I'm going to give this one an idea of zero an ID of one and this is almost a little bit hacky what I'm doing but I think it should work I wanted two three four five ooh five and six so basically Oh what here we go there we go good all right so basically now each one of these has an ID all right so for all right so here's what we're gonna do this is gonna be a little funky and it's gonna look a little ugly but we're just using regular JavaScript right now we're not even really using any es6 actually the only es6 really we've used is the light key word that's just to have it sorry I don't think I could ever type a bar and I'm not one of those people who's like never use four but I just I can't remember the last time I actually took the bar okay so what we want to do is we want to say let date equals and by date what I'm trying to get here is I'm trying to actually get the full date like something like this so I'll just write in a comment so trying to get basically like December 30th or we don't need that comander december 30 2019 and if we do that we can actually insert this into the gets I think it's the get day I'm almost sure it's get day and let me just show you I'm almost sure a get day will give us the day of the week and then we can use that day because it's always going to be 0 1 2 3 4 5 or 6 and we can use that get day to append it to whichever one the day of the week is probably sounds really crazy but this is how I think is actually one of the simpler ways to make it really efficient hopefully let's see all right so what we're gonna do is we're gonna say add a equals and you know what I kind of wish I had my variables down here now because they're all the way up there that's a bummer all right so you're chosen and month oh no we actually want month name so we want month name so date equals month name plus a space plus what's let's see oh just plus I because I will do I to string not that you really needed to this would convert it on its own because you're doing an actual string of characters plus a number but just so just so nothing gets out of hand actually it's just probably safe to do this because we're gonna have another number at the end but we have to have a comma here anyway so it would we don't need it but we don't need to do this your string but I recommend it just in case we're gonna add a comma and then we're just gonna do what do we do here chose them so real quick let's just console dot log eight just to make sure we're getting what I want and if we return back we should see like we see nothing that's a bummer yeah no oh you know why because getting um DS we're not calling it down here so get numb DS is a parameter but we're not actually so what we need to do is actually call get number of days and then year and then month so your chosen month chosen our variable name so year chosen and month oh not to string computers got a mind of its own sometimes and there we go okay so hopefully that works and beautiful and yep ah what the heck oh you know what okay this isn't terrible news I thought if something was broken because it went to 30 but our for loop is actually just kind of trash we want that's hilarious then I put the equal sign on the other side of here that looks really funny all right there we go so we want less than or equal to because we want it to go up to 31 I don't want to stop at 30 and so you'll see that if we come back here it's actually stopping at 30 because the loops not gonna run when he gets the 31 because we said only if it's less than 31 so we want less than or equal to and the other problem we have is December of 0 is not a date so now we actually want to change this to 1 and let's refresh beautiful let's see we have 31 at the bottom and we have one at the top great alright so probably a little bit confusing why I change the for loop well maybe not so basically we don't want December 0 and this for loop basically we're getting the day just from the loop so I is less than equal to num days ok and yeah the I was starting at 0 so it was giving us December 0 and that is bad ok and less than or equal to was because I was it was cocking out at 30 and we wanted to go to 31 okay cool so if you want to take a break take a break if not I'll keep on going um it's actually a a little bit longer project than I thought it was gonna be or maybe I just blabber way too much okay so actually wait to take a break because this next part is going to be a little complicated and then take a break so we're gonna say you let let day of week equals we don't have that name right could go let they have week equals and this is going to be equal to new date yeah so it's gonna be going a new date I think and then I think you just put the day text in there so they and then we're gonna say that get day I have no idea so it's gonna work but get get UTC day no I'd someone get day there we go well you don't have to stop there buddy alright so let's check let's get rid of this right here and let's just see so ideally it would be like 0 1 2 3 4 5 6 0 1 2 3 4 5 6 and we have nothing why do we have nothing well because I didn't do anything and in Council like they of week and if I'm moving too fast I apologize and perfect that's what we wanted all right so far so good it's just because this videos going on for 33 minutes and that's at this point and that's kind of like the time I wanted to finish this in so I'm trying to rush all right so that's good and now that's why since I imagined that we were gonna get this 0 1 2 3 4 5 6 I was like okay let's just give these different columns an ID of 0 1 2 3 4 5 6 so basically if the day follows on a Sunday then it's just gonna add it it's we're just gonna append it as a child the PTAC the day P tag into that column and once we do that we should actually see a calendar that looks something like a calendar probably not really but something like it all right so what we're gonna do is we're gonna seal it no sorry document no oh no we just do need to do day of week dot append child no sorry I'm literally just got so like I got thrown off there okay that's really embarrassing all right let's get back to let's get back to the good stuff er document dot get element by ID and then what we're gonna get the ID by is the day of a week there we go and then what we're gonna do is is we're going to append the child of the because the day of the week is just a number and let's actually do the no sorry they have week dot two string sorry I'm wearing down a little bit here so I'm gonna feel like I'm getting nervous that I'm gonna start making some mistakes because I'm wearing down 35 minutes is a long time to talk let Dave we good good this is good appendchild and then we're just gonna append this no not your P tag the AP tag which is all the way up here which is a P tag that has our which has our text but basically it has the number appended to it all right so let's check if that worked it actually did now we don't have any days of the month which is incredibly embarrassing so let's get those so we need Sun P lon P - let's keep it like that P when this this is probably really really boring but it's nice for me to have a little break that I know we're good for a second I thought I only created so we're gonna do Friday I couldn't remember what they came next that's how you know I'm getting tired Saturday good alright so if we go back now oh no that's not what we want why is that like that so des column is not supposed to be flex so I guess it's for some reason so let's do oh because peas are display:inline oh that's gross I shouldn't have done that that's really bad alright so let's let's okay I was like what on earth is going on right now so you know that was a little bit of a mistake for me now let's just give these two peas that actually that's an okay mistake I'm not mad at myself for that one so let's give these two piece of class a class of months here and we're just going to make that class you can do that you can do this like a hundred different ways but I just want to keep it really simple class equals a month year alright so and we can just change month year to display:inline so that kind of shows you that really don't want to do this kind of stuff ever I mean you can it's up to you all right and that is better pretty good now it probably looks really nasty but that's actually kind of what we want next what we want to do is once again in our CSS I'm going to cancel out of my file explorer here I don't need that we want days container to have its play flex so these container display flex check we got perfect and then we're gonna do justify content space around boom alright looks good right I mean it looks pretty good I mean it's kind of Li it's like really basic and it doesn't work if we click anything it's just but it actually is structured pretty well ok good so next okay that's pretty much the ugly part of it now the next part of it is going to be when we click on these buttons we want to get the next month or the next year or like so we'd add a month on so basically this would become January and this would become 2020 alright so let's do that now so let's go back into our editor and what we're gonna do is we're going to create let's see alright so we're gonna create it to function so we're gonna kind of function and we're gonna call it change month and it's not gonna take anything and yeah it's gonna take something in because it's gonna be an onclick method over here so it's going to take in ad - so basically whatever that parameter is it'll change them on it'll do a minus or plus so let's just set that up now so inside of these eyes we're gonna have so inside of all of them we're gonna have an on click and it's going to be equal to change and we'll do the top ones are gonna be months and the bottom one oh no that's not gonna work no no no no no no no come on come on go back go back why why would you do that okay I'll try this again change month and then here we just want to change this to change year all right and we also want the little parentheses of course okay and then this one is going to be minus or you could say subtract but I'll just say add so let me click on the right one we're gonna add a month when we click on the left one we're gonna take a month away basically and then we'll say minus again and add now notice these are two different functions so change your and change month they're gonna look awfully similar though so create function not funky taun function change year and we'll do also do add - alright so we're gonna check if and - equals - so if equals - then we're gonna take what was it month chosen you know I'm gonna take month chosen and set equal to minus equal to one so basically we're gonna take one away from one chosen however we're only gonna do that if month chosen does not equal zero because we don't want it to equal negative one right that would be bad if so if we did this right here and month chosen was negative one that would be a disaster oh yeah so if it was 0 and then we - we subtracted one and we got negative one well that would definitely be an error because mom chose in November is gonna return one of these and negative one would not be what we're looking for there okay um you know actually could you know I'm not gonna go down that path I guess it actually in no you know not even gonna go down that path but I guess negative one sometimes in some programming languages wouldn't be the worst thing there because it negative one goes to the end but just ignore me that's let's keep it really simple here so what we're gonna do is is if month shows him it's not equal to zero then month shows in I've somebody actually just we just want this down here and we'll bring that up and then we'll say else mom chosen equals 11 so hopefully that makes sense so what we're doing there is is basically we are making it so that month chosen will take one away but if month chosen is January then we want to send it back to December and we'll just set it back to December by 11 okay now let's see that's good now we actually want to do is we're gonna call the render Cal function every time we hit this button so that basically we can remake our calendar okay so render cow we're gonna take in we need to take and get none of these so we'll say get number of days then we'll just take in I'm on the chosen your chosen good and then what we actually want to do in here inside render Cal is we're gonna take in a new year and a new month that way we'll say if there's a new month and a new year then we'll set those equal to the month in the year so it probably seems a little confusing I'll show you that in one second and we're actually going to call this everywhere and then if it doesn't equal minus else and what we're going to do is we're going to say if month Chozen does not equal 11 then month chosen plus equals one so basically each time if it's add so basically it's just not - so it's going to be add so when it's add we're just going to add to the month okay someone chosen plus equals one and then we're gonna want to call that function again and that's good for now but remember now we need to take in the new year and the new month okay so alright we're gonna get there in just a second because we don't have those all right you know what I'll put them in now so the new year the new months are just gonna be it's just gonna be your chosen and month chosen for all of them I want to move this HTML file over I don't even know not a break point I don't even know if we're gonna need this month chosen your chosen one chosen and the same thing down here yeah it gets a little redundant but I'm kind of keep it simple it probably doesn't seem simple but in terms of kind of isolating all of our functionality into kind of like a render function that basically is just gonna spit out the dates that we need that's kind of what I was hoping for all right so that's good now the last one or we need two more actually not just last one sorry so else so if it's so if it is equal to eleven then we want to do month chosen is equal to zero and then once again we'll call the render Cal and we'll just say your chosen month chosen okay cool cool cool cool cool cool and down here I'm actually gonna do the same thing I'm going to say year chosen and month chosen all right and then what we're gonna do is we're actually going to come up here and for new year and new month we're actually gonna do is we're just gonna say let's see so you're Pete at you we're just gonna change the inner text from your chosen to New Year and your chosen will change from down here will change the New Year now whenever we hit those buttons this will also update and that's exactly what we want and a new month so instead of month shows and it's gonna be new month so if you're confused on how this is still going to work it's because when we first render the calendar somebody first display the calendar and saying you're chosen here we go so we first display the calendar down here we're just going to be using the dates that we already set all right and you're chosen and munchausen are the starter variables that we use up here and these can be changed as the buttons get clicked so you'll see in a second should work in just a second we just need to do basically everything we just did right here so we're gonna copy this whole thing again and we honestly could have used the same function but we'll just had to do a ton of if statements and they were just gotten ugly so I'm okay with this and basically everywhere or it says month well not everywhere but for these for this oh no that's actually not going to work sorry I was trying to I was trying to really jump ahead but because month your works a little bit different so we don't actually need to do any of this so we can just say here chosen - equals one and then here we could just say your chosen + equals one and then we just need to get this function again and paste it in each one because we don't have the issue with a month that we do with the year the year we just want to add it alright does that make sense okay so I'd say there's a 50% chance this work so I'm going to save it let's click it and we're not getting anything okay it's disappointing under Cal render Cal oh you know what I might need to save my HTML file let's go back or fresh okay um not bad not exactly what we wanted but not bad pretty good actually okay so we can change the year and we're just adding the DS onto the bottom though so that's not good so here's what we want to do now we're gonna get a little hacky here but shoot so we need to remove all these children from the day's container oh you know what no I don't think let's see let's see so let's go back to our alright so okay so what we want to do is we're gonna say document dot get element by ID these container the inner HTML is equal to empty parentheses now this is really hacky but what this is gonna do is delete everything oh you know what so that won't work sorry I apologize just ignore everything I just said we're actually going to do document dot get elements by class name and that's that's fine all right so we'll do that just just to do something a little different will you just get elements by class name and we're gonna get day column because if I remove all the HTML inside of these container all these tips will be gone and we want these divs to stay so day column and then we'll say oh we want to set this to let date column equal to and then we're going to say four so we're gonna use a for loop to loop over the state column so for let I equals zero I is less than I know it's going to be I know it just needs to be less than seven so it's long as it's less than seven because I know there's so we could just do de columns not like the same thing I don't know why I was trying to cheat there that's that's how you know this videos going on too long I'm getting tired I plus plus and you know what we don't want two different eyes let's say other index on their index just just so we have no confusion no nothing bad going on there all right and then what we're gonna do is we're going to say de columns i dot inner HTML equals like that that should be good now let's see what we get hi you know what we don't have I we want other index I apologize I'm gonna make that mistake a hundred times so let's go back and check press refresh okay it looks good not bad alright so we have an issue here I notice that earlier that January is we have so we have two issues one it seems like every month has 30 days and the other issue is is that it seems like January you can't - months from January so let's go back here and check this out okay so the - month isn't working that's up here sorry so - month - it's only on January so it be if month is okay so here you go here's the issue right here so month chosen it should just be one equal sign that's embarrassing that's a terrible mistake alright so if I go back and refresh now that should work okay now the other thing is wire is everyone thirty days okay so let's check that out so that's an issue with get number of DS so let's check it number of days okay it's a really simple function so we just take in the year we take in the month yep and that seems to be the issue so what's happening here is I have mixed up month in year so what I'm gonna do is I'm gonna just basically get rid of that and then we'll come here and I'm just gonna control D all the way down oh I guess I didn't go down far enough fair enough oh I didn't controlled you down at all okay okay so I'm gonna delete all those and then I'm gonna come back here and then I'm just going to type in month chosen so I had the function works fine I just had the parameters in wrong I need the year first than the month and I did not have this so let's refresh all right so now we get 31 we should get 31 again then 29 what the heck 23 what's that all about April everyone's working we go to February and so I'm February for 2020 we get oh you know why because I know what it is I get 23 yeah because 24 25 26 and 28 over here okay that's good now um a couple things that I want to touch on real quick enter HTML it basically is all the HTML elements inside of and you know of an element right so when we set it equal to 0 basically we're just removing all the children elements in there alright so that was like kind of a quick hacky way to do it a couple other things right here we're actually getting the right number of days in the month we were getting the right number we weren't getting the right number of days before because I had the parameter switched and we also fixed the month so sorry for a couple errors but like I said project got a little bit more complicated than I thought it would okay so the last issue we have is that and that's really it looks like is that we have these like 6 & 7 are starting early so we need like blank spaces here so I have an idea on what to do here but this is actually one of the trickier so we're gonna make one more for loop and yeah we're gonna make it here so we're going to say 4 let we'll say another index I know you guys are probably like what and then what we want to do is we actually want to get the first day of the month and by doing that we're gonna do it exactly how we did it down here so we actually want to say let first day equals and then we'll say new months plus 1 comma because we know the first day the month is going to be a 1 okay hopefully that makes sense so first day 1 is gonna be new month we know it's going to be a 1 so we just need to get the month name just like we did here but we don't even have to use I we just are going to use one and and then we're just going to do plus new year all right and then what we're gonna do is is we're gonna say let first day of month equal new date first day dot get day so just basically the same exact thing we did here to get what dave them of the week it was once again we're getting what day of the week it is and what day of the week is on the first day of the month probably sounds crazy but I think it should work so we're going to do is we're going to do one last for loop and oh we actually already have it right so another index and another index is going to be less than first day of month and then another index plus plus okay so this should be pretty much it all we're gonna do is we're gonna do kind of what we did down here and create P tags and insert them just until we're gonna start zero and just until we get to the first day of the month so we're gonna insert those P tags so let's do that so let's say let's say let blank P tag equals document dot create element P let blank text equals document that create text node we'll just put something blank we'll put a blank space in there and then we'll say let or okay so then we want to do blank P tag dot appendchild the link text alright and we're gonna have to come back to then a second I think because I don't think it'll show up but it might and then the last thing we want to do is you want to say document dot get element by the another index string because this is only gonna work yeah this will never get over seven because the first day of the week should always be within seven so another index dot string dot and we'll just say let let they column whoa and that's good so they call them so that's getting into first so that's going to get out of the date column right here so it's going to get yeah and then we're gonna say date column not date columns do we have oh we have got to be careful we have some naming collisions there all right that's fine should be okay they column dot a pinch and we want to append on to this the blank P tag so we go alright let's let's check it see if that worked and it did not okay let's see why so let's console dot log another index so 0 1 2 3 4 so shouldn't run it all at first because December has oh you know the issue is is that when you are getting this so right here we want to do new month plus 1 because like I said they're looking for or not new month 1 new month oh ok so that's we want one that name yeah I think that's where I messed up yeah that's what that is where I messed up so let's refresh that now let's see if that works it's 31 all right so on December so January right so we get 0 1 that works so we're getting exactly 1 when we come back we get nothing that's good so that's good so I think the problem is is that these blank key tags they need to have like some margin or some padding actually some padding would work so style I'm hoping that'll be it and then that'll pretty much of your whole calendar it's all pixels come on yeah there we go nice so that was the issue there so it's a little bit it needs to be a little bit more changed in 14 good and it works perfectly now so basically we just inserted the number of empty P tags that we needed all the way up so month name three we got the month name fixed that was my bad I've had a lot of my Bad's this video this was tougher than I thought it was going to be you can tell I haven't built this before and another end ok so basically we just took another index we got the first day of the month and and then we just ran it up to there so we know that the first day of the month will always be less than well 6 or less than 6 so basically we just create these blank nodes and we just plant them in it's a little bit advanced honestly well not advanced but it's just like a little bit of a I don't know if you've never done it before it's probably a little bit to think about so that's good that's good now let's just check make sure yeah so yep and let's just kind of scroll around a little bit and it looks like that everything is working pretty much how you'd expect it to looks like the days are all in the right spot and when we change the month oh you know what that's that's definitely an issue right there so when you change the month they say year is supposed to change so let's go check what's going on here that's down here so we want it your plus equal to 1 that's right and then we want your minus equals 1 so that looks good oh because it's supposed to be your chosen Mike it's not supposed to be here sorry about that it's a stupid mistake so let's go back and refresh this and see if that works so now yep when we go from December to January it should change the year and we go from January to December should change it back to 2018 so let's go check that out real quick and it does cool so it looks like that we have a pretty good calendar here I don't really see anything else wrong oh well geez all right we lost our days we lost our days of the of them of the week so Sunday Monday Tuesday Wednesday they were here that I saw they're right here oh you know why because I removed them from the HTML when I did inner HTML equals blank and that's why he got to be really really careful when he used that inner HTML okay so that's actually this fix is gonna be kind of annoying but we're gonna have to delete all of these which I'm sure you're thrilled about and I'm actually gonna so I'm gonna create another div and I'm gonna paste them in so you can actually copy and paste things I don't know what my editors doing that paste right there it's kind of ugly but it's better than typing them all again so we're actually going to move them in a div outside of this date column div because we still have to set that date column give back to empty okay so I'm gonna save that and I'm gonna give this a display of flex and then justify no not like that and then oh sorry I'm style right style display flex and then justify content space around that should be decent let's check what we got oh that's not decent okay well the first thing we need to do is go back to our CSS file then so here we'll go to our CSS file and these container we can actually just get rid of all of that because we're not we're not editing that anymore okay so that good now we just need to fix these and for that we will just create another div that will wrap around the date columns and it'll also be display flex justified content space around and you could create a class for that if you want but I'm just I'm ready to be done so I'm just gonna copy and paste this and I'm gonna put this down where'd you go buddy oh you're right here all right so let's see if that works now all right that's good that's good okay so that looks good and everything seems to be working fairly well the dates fit in it's if they're not fitting in because this is kind of low all you have to do is just take your cow container and just increase the height on it a little bit all right and the last thing I want to do is I want to create a date picker so this should actually only take like two seconds so this isn't going to be that long if you're happy with that you can move on but we're gonna create a date picker real quick so I'm just going to create this function at the bottom I'm just gonna say get actual will say function get date from calendar it's a terrible name but this is a long video and after a long videos you make terrible names we're going to take a date in here what's wrong let's what do you mean oh whoops okay now what we're gonna do is we're just going to say document dot get element by D then we'll say like we'll say date display and we haven't created this yet we're about to create it we're going to set the inner text to the date from up here and let's go this in our HTML real quick so over down here we're gonna create a P tag and create ever you want doesn't have to be peppy tech now we'll create an h1 so it's real big so we can see it occurring h1 we're gonna give it a style of position:absolute just so because the that this container has such a big margin around it that this is an absolute we'll ignore the margin so that's kind of why I'm gonna use fish and absolute there and top mice at the top to shoot well set it to 50 pixels and we'll set the left to 47% and that should be good alright so now we just need to give this function this date so what we're gonna do is we're going to come back up here to our date pete our day p tag and right below this actually so below date we're gonna say day P tag dot add event listener now if you've never seen add event listener before it's just it's just basically another way to do something like an on click like we have up here but instead of doing on click you can do pretty much any event but we're gonna use click and you specify that in quotes you can do single or double quotes and then you're just going to add an anonymous function and we're just going to return the function from down below which is get date from calendar get date from calendar and we are just going to give this D here because we just want to display this date okay so if i go back and i refresh if i click on it i should see it it says document document ID oh you know what i applied any man keep that 90 down there i then i still worried about the styling so the ID is I think I chose it they display yep they display let me save that and refresh all right now let's see so there it is cool so when we click on a date all right it should be yeah pretty good so January 2nd 2020 let's go like really far in the future and make sure it works and we'll go to like March or something April so should say April 4th 2035 ok so I feel pretty good about this um I definitely made some mistakes along the way and it was a little bit tougher than I thought but I'm pretty happy with it if you have any recommendations or you know had any problem with the video just let me know hopefully you guys enjoyed it I had a lot of fun even though it was long I did have a lot of fun doing and it was a good challenge for me alright so hopefully you guys enjoyed I'll see in the next one

Channel: MikePerrone

Views: 4,649

Keywords:

Id: HdTjunh2s2s

Length: 71min 36sec (4296 seconds)

Published: Mon Dec 30 2019