Calendar with HTML, CSS, and JavaScript - How to build calendar using HTML, CSS, and JavaScript

hi and welcome to our new YouTube tutorial in this video we are going to be creating the calendar with HTML CSS and JavaScript from scratch it's going to be a kind of little project compared to our previous projects but I hope it will be interesting and we will enjoy it so as I said the project is going to be created based on HTML CSS and JavaScript so I expect that you already have some basic understanding of those three core technologies ok let's go ahead and describe the project so we have here a full-screen dark background and in the center of the page we see the calendar it shows us the current month with the current date down below we have the weekdays followed by the entire month you can see that the current day of the month is highlighted also we have here two arrows if we click down then we will navigate to the next and previous month so you can check out any of the dates in the future or in the past all right so that's what we are going to create I have created a new folder on the desktop called calendar let's go ahead and open it in this code I'm going to create the starter files for HTML CSS and JavaScript let's call them index.html then style dot CSS and script ojs then open index.html file and create the basic HTML document I'm going to use Amit let's place here the exclamation mark and hit enter or tab so here we go okay let's go ahead and change the title I'm going to interview calendar then I'm going to link the CSS and JavaScript files to the HTML let's open link tag and specify the part of the file for the JavaScript I'm going to open script tag right above the closing body tag and then we need to indicate part of the file in source attribute okay finally I'm going to launch the project to the browser for that I'm going to use one of the CSS packages called a live server it allows us to run the project to the browser life and make the changes and updates without refreshing the page each time so I recommend to download and install this package alright lastly I'm going to place the editor and the browser side by side like so and get started at first I'm going to create the HTML markup we will use some static data but finally we will create that data from JavaScript dynamically let's open div tag which is going to be the container then we need another div for the calendar itself so the calendar will consist of three main parts we have a current month with that green background then we will have the weekdays and finally the days of the mock so let's open div tag I'm going to assign to it class month at first I'm going to insert here the left arrow it should be represented by the phone awesome icon so we need to bring in the phone awesome CDN so let's go ahead and search for phone awesome cDNAs go to the first link then select CSS and grab the link from here we need to open link tag in the head element and paste the link as the value of the age reference attitude okay so let's open IL with the following classes we need FAS f a tangle left besides that i'm going to assign to it another class for javascript let's call it trip I'm in previous next we need the deep Arnold which will include the math name and also the date it's a scientist class date then I'm going to pass your h1 heading government with the content may it will be followed by the paragraph where we will have weekday Friday then it should be followed by the month May 29 and then we need year 2020 so again right now those are the hard-coded dates but we'll make them time to make later on next we need to insert here another arrow I'm in the right arrow for the future months so I'm going to open eye on with the classes FAS FA and go right and also we need here class next alright so the first part of the calendar is ready let's move on to the next part we have to create the weekdays so let's open div tag which is going to be the wrapper let's assign to it weekdays and then interview all seven weekdays I'm going to insert your deep tag with the content son I mean Sunday then duplicate it six times and change the weekdays so we need Monday Tuesday then we'll have Wednesday Thursday Friday and finally Saturday all right so with the second part we are done let's move on and create the third part in which we will have the date of the current month let's open div tag with the class days so first of all I'm going to insert here a couple of days from the previous month let's open div tag with the class crib date and past year 26 then duplicate this div element four times and change the dates we need 27 next we will have 28 then 29 and 30 okay next we need the days from 1 through 31 I'm not going to write each date separately so to make this process simple I'm going to use M it we need div tag then an asterisk and 31 and then we have to insert dollar sign inside of the curly braces so here we go we have the numbers from 1 through 31 besides that I'm going to institute a couple of days from the next month so let's create developments with a class the next date insert here 1 then duplicate it five times and change the numbers from 2 through 6 ok actually with the HTML markup we are done now we have to start to customize the calendar first of all let's create some reset and coma styles I'm going to select every element using an asterisk then let's get rid of default margin and padding from all the elements I'm going to set both of them to 0 besides that I'm going to set box sizing to border box next I'm going to define the phone family throughout this project we will use one of the google fonts so let's go to the google fonts website then search for quicksand I'm going to select those different styles and grab the link and paste it in the head and next let's define font-family for average elements I'm going to set it to quicksand sound sorry alright so that's it about the reset and common styles as you can see they are applied to all the elements on the page throughout this project I'm going to use a ramp as the measurement unit right now one Ram is equal to 16 pixels because the font size of the HTML element equals 16 pixels I want to convert one ram into 10 pixels and for that we have to decrease the font size of the HTML element let's make it sixty two point five percent so as you can see the elements became a little bit smaller okay so now it's time to work on the container I want to expand it to the entire page so it's selected and define width and height I'm going to set with 200 percent as probably height let's make it hundred percent of the viewport then I'm going to change the background color let's use your color 1 2 1 2 1 F and also change the color of the text make it light using color EEE okay next I'm going to place the calendar in the center of the page and for that let's use flexbox we need display flags then for horizontal centering I'm going to use justified content center as for the vertical centering we need a line-item Center all right that's it about the container next I'm going to customize the calendar I'm in the Dib element that wraps the content of the calendar first of all I'm going to define width and height let's set with 245 Ram as for the height let's make it 52 Ram also I'm going to change the background color let's make it two five times and then seven it's going to be the dark color and then at set box shadow 20.5 Ram three RAM and the RGB a value with a black color and with opacity point four alright so with the calendar Deep Ellum we are done let's move on and customize the individual parts of it I'm going to start with the amount let's select it and at first define with make it 100% but then I'm going to set height to 12 Ram and change the background color make it 1 6 7 e 5 6 ok next I'm going to use flexbox in order to place the elements horizontal in a row and also to central down vertically so let's use display flags then in order to create some space between the items let's use justify content space between and also we need a line items Center all right after that I'm going to create some space on the right and left sides inside of the element for that let's use padding and set it to 0 at the top and bottom and to Ram on the elect and right sides also we need to align text in the center and finally use text shadow with values 0.3 Ram point 5 gram and the RGB a value with black color and with the opacity 0.5 all right so next I'm going to style the individual elements of the Mastiff element let's go ahead and start with the arrows select eye element set its font size to 2.5 RAM and also make cursor:pointer next we have the h1 heading garment which shows of the current month so let's go ahead and select this element I'm going to change its font size let's make it 3 Ram so let's make the font slightly lighter set font way to 400 then transform text into uppercase next I'm going to create the space between the letters let's make it point to ram and finally create some space at the bottom using margin button with the value 1 ramp okay let's go ahead and lastly style the paragraph the only thing that I'm going to do is to increase the font size so it's selected and set the font size to 1.6 Ram alright so that's it about the first part of the calendar let's move on to the weekdays I'm going to set with 200% then increase height make it 5 Ram and also let's create some space using padding I'm going to set it to 0 at the top and bottom and point for Ram on the right and left sides ok next I'm going to place the weekdays horizontally in a row and also to Center them vertically so we need display flags and a line items Center ok so with the wrapper development we are done next let's customize the weekdays themselves so I'm going to select deep elements at first let's change the font size I'm going to set it to 1.5 Ram then let's make phone slightly lighter using font weight 400 and create some space between the letters using letter spacing point 1 Ram all right now I'm going to define the width of H deep elements as you know the width of the calendar is equal to 45 Ram we created a little padding inside of the weekday steep it equals 2.4 Ram on both sides I mean on the right and left sides I want to make the width of each development's one-seventh of the entire width so I'm going to use the cotton and we need to divide 44 points to ram by 744 point to ram is the difference between the width and the padding hopefully it makes sense to you okay so next we need to Center the content of each deep elements and for that let's use flexbox I'm going to set display two flags and then we need justify content center and a line item center finally let's create a little shadow effect use tax shadow with the values 0.3 Ram 0.5 gram RGB a value with a black color and with the opacity 0.5 all right so that's it about the weekdays let's move on and take care of the days of the month first of all let's select the wrapper div element which has crossed days let's set with 200% then I'm going to set this play to flex because I want to wrap the days so let's use flex wrap with the value wrap and finally let's create some space using padding let's make it point to Ram on all four sides okay next I'm going to customize the day itself so let's select Eve elements first of all let's set font size to 1.4 Ram then use margin make it point 3 Ram on all four sides after that let's define the width of HDTV elements I'm going to use the same technique that we used on weekdays so I want to place seven days on each line let's use again the cult function we need to divide the width of the calendar by seven but we have to exclude the margin and the padding if we subtract to do with the margin and padding we'll get 40 points for rent the margin on each side is equal to point 3 ram so the amount of margin is going to be point 3 multiplied by 14 because overall we will have seven days it equals to 4.2 Ram and then we have to add to that value point for ram the amount of the padding so we need to divide 40.4 Ram by 7 then I'm going to set the height to 5 Ram then I'm going to Center the content so let's set display property two flags and use justify content Center and a line items Center also I'm going to create little shadow effect let's use text shadow with values 0.3 ran point 5 gram and rgba with a black color and with the opacity point 5 all right so the days are customized and next I'm going to style the previous and next dates the only thing that I'm going to do is to decrease the opacity of them so let's go ahead and select both of them and set opacity to 0.5 okay so the next thing that I'm going to do is to highlight the current day of the month and first let's go to the HTML file and assign to the current day class today then select it and change the background color I'm going to make it 1 6 7 5 6 ok so the last thing that I'm going to do is to create a little hover effect once we hover over the days I'm going to change the background color also display the border and make the cursor point I want to do that for all the days of the month except for the current one so let's select deep elements with hover then it should be followed by the knot selector it is the function we have to pass a year deep with the class today okay let's make the background color - six - six - six then define border with the values point to run solid and the color 777 and finally make the cursor:pointer also let's use transition just for the background color we need here background color and the duration point two second alright with the CSS we are done and now it's time to add some JavaScript to our calendar and make it work throughout this part we will be working with the date object quite frequently we will use a couple of different methods to manipulate the date first of all I want to display the current month dynamically using javascript right now it is May we specified it from the HTML file at first I'm going to create the date object so in order to do that we have to use the date object constructor function in general the date object returns the current date and time also it specifies the browser's time zone and returns this data as a full text string let's go ahead and create the date object I'm going to create new variable date which should be equal to new date constructor function and then run into the console so if I inspect the page and check the console we will get the current date and time followed by the browser's time zone okay so as we said the first thing that we are going to do is to display the current month using javascript in order to get the current month you need to use one of the tape objects methods called get month so let's create a new variable I'm going to call it month it should be equal to date dot get MA then run the math to the console as you can see we've got here a number value for actually this is the index number of the current month now it's May which is the fifth month of the year but because of that the months have zero based index numbers get math method the return for which is the index number of the fifth month alright so in order to display the current month on the page we have to use the get math method and we have to manipulate with those index numbers first of all I'm going to create a new array in which I will store all 12 months of the year so let's create a new variable which is going to be an array and then pass here math names the first one is going to be January then I'm going to duplicate it 11 times and then change names we need February March April then we have May June July August the next one is going to be September then we have October November and December so the array is created as you know the items in the arrays have the zero based index numbers so here each month has the proper index numbers from 0 through 11 now I'm going to select the h1 heading elements which should display the current month so let's select it using query selector method we need to specify here the class name date and then the h1 tag so the heading is selected and now we need to change its content in order to do that I'm going to use one of the Dom properties called inner HTML now we have to use our array maths and specify the index number if I put here the index number manually let's say four and then get rid of the content of the heading element from HTML we will see again May on the page if I change the index number and write five then we will get June so in order to display the proper month we have to use the get math method we need date dot get math so as you can see we have here again May but now it is displayed dynamically using javascript alright let's move on and display the date at first I am going to select the paragraph which displays the date let's select it using query selector method then in order to change the content of the element we need inner HTML property so now I'm going to use one of the methods called to date string which returns the current date in a readable format so we need here date dot to date string if I remove the content from HTML then we will get the exact same result on the page right so with the first part of the calendar we are done we have successfully displayed the month and the date dynamically with the help of JavaScript now it's time to move on display the days we won't touch the weekdays they will be displayed from HTML because I think it's enough in order to display the days I'm going to use for loop first of all let's create a variable days I'm going to use let keyword and let's make it an empty string so I'm going to look through the numbers from 1 to 31 and display them as the content of the days deep element let's use for loop we need to create here I variable which is going to be the counter then we need condition I should be less than or equal to 31 and then we need I plus plus I mean the increment operator so as the content I'm going to insert your days followed by the plus equals operator actually this operator does the exact same as the following expression for example X plus equals 10 means x equals x plus 10 so now we have to create the deep element and pass the I variable as the content of it let's open backticks and interview div tag its contents is going to be the I variable finally we have to change the content of the wrapper div element I'm going to create a new variable let's call it month days then select taste deep element using query selector method and then down below change the content of this variable using inner HTML property so we need math taste dot inner HTML which should be equal to days so as you can see we have here the numbers from 1 through 31 if I go to the index.html file and remove the entire content from here then nothing will change will get again numbers from 1 through 31 so from now the content of the day's development is displayed from JavaScript actually we have to do here a couple of things we no longer see the previous and next days and also the numbers did not match the weekdays besides that here we define the number of the days in a month as 31 but as you know some of the mass have thirty days and some of them 31 so instead of using here just 31 we need to define the ending date for each month let's create a new variable I'm going to call it last day next let's create a date object and define the current year and month so we need to use here get full year method it takes dogcat full year followed by the date dot get math method so the first method will give us the current year as for the second method it will give us current month as for the day I'm going to set it to let's say 1 now let's run this variable to the browser and see what we got so as you can see we have here the first of May 2020 now let's change 1 into 0 and check the result in this case we've got here the 13th of April 2020 so when you specify the day as 0 then you get the last day of the previous month in our case we need to get the last day of the current month therefore we just need to add one to the get mod function now as you can see we have here the last day of the current month so instead of using here the hard-coded number we can simply insert last day but right now we can't do that because the last date variable returns the whole date and time in order to get the number of the day we need to use get date method so now it returns just 31 instead of other data and now we can change 31 into last day in for loop so nothing is changed here we have the same result in order to prove that it works correctly I'm going to set the current month to let's say June where we have 30 days to change the current we have to use one of the methods called set mouth so we need date dot set mouth with the value of five so now we see here June and the number of the days is thirty it means that everything works fine so far let's get rid of this line of code so once we display the days of the month now I'm going to take care of the days from the previous month if we take a look at the finished project you will see that we display a couple of days from the previous month so in order to achieve that first of all we have to guess how many days we should display from the previous month I'm going to use a little trick let's go ahead and change the current date make it the first day of the month so we need date dot set date and we have to make it one after that I'm going to use one of the methods called get day it returns the index numbers of the days of the week those index numbers are zero based for example sunday has the index number zero Monday has one and so on so let's run to the council date thought gets day as you see we've got here five so the first day of May it should be Friday because Friday has index number five it means that the first day of May should be placed underneath the Friday so now we can easily get how many days should we display from the previous month it's going to be five all right so we have to create another for loop as interview variable X which is going to be the counter now we need to define the number of iterations as we said in this case we have to display five days from the previous month so overall we will have five iterations and on each iteration will create a new tip which will be the content of the days developed so the initial value of the X counter is going to be the index of the first day of the month let's create a new variable where we will store the index number of the first of the month that's called variable first day index it should be equal to date dot get day then assign this variable to the X counter so now we have to define the condition X should be greater than zero and on each iteration X should decrease by one so we need X minus minus so let me explain again in this case the index number of the first day of this month is five because it is Friday so the initial value of the X variable is going to be five on each iteration it will decrease by one until it becomes zero so overall we will have five iterations and on each iteration will create a new development for the previous month dates so we need here days plus equals then we need to open backticks and insert div tag with a class previous date I'm in prep date then insert here dollar sign with curly braces okay so now we have to define the content of the development first of all let's define the last day of the previous month I'm going to use the same technique that we used in the previous case let's create a new variable I'm going to call it prep last day I mean previous last day then I'm going to grab this value from here so in order to get the last day of the previous month we just need to get rid of plus one because it gives us the last day of the current month so if I check to the console previous last day then we will get 30 which is the last day of April right so to create the content for each div element we have to subtract X to the previous last date variable so as you see we've got days from the previous month but that's not quite correct because we've got here 29 as the last day of the month it should be a 30 so we need simply plus 1 inside of here so the problem is fixed alright so with the previous days we're done let's move on I take care of the days of the next month in the case of the next days we need to define the index number of the last day of the current month so let's create a new variable and call it last day index then grab this code because it gives us the last day of the current month in this case instead of the get state method we have to use get day because it will return the index number so let's run to the console last day index we've got 0 and it means that the last day is Sunday and we have to display 6 days from the next month so to define the number of the days of the next month we have to subtract to 7 which is the number of the days in the week the last day index and also we need to subtract 1 because the weekdays in X numbers are 0 based so let's create a new variable I'm going to call it next days and it should be equal to 7 minus last day index minus 1 next we need again a for loop in this case I'm going to use J as the counter it should be equal to 1 because each month starts with one valid condition is going to be J is less than or equal to next days and then we need J plus plus so on each it we have to create a new deep element and past them as the content of the day's development we need days plus equals then open backticks and passier div tag with a class next date as the content of the div tag we have to insert variable J finally let's change the content of month days so here we go we have here days from the next month alright so the next thing that I'm going to do is to highlight the current date right now it's no longer highlighted in order to do that we have to use an if statement as the condition we have to compare counter one to the current state once they match then we have to add to the department class today so we need I triple equals to new date dot get date besides that we have to compare the math to the current month so we need here logical and operator and we have to insert date get map triple equals to new date dot get MA so if this condition is true then I'm going to copy this line of code and add to the development class today as for this development it should be placed in the else statement so as you see the current date is highlighted alright so the next thing that I'm going to do is to make the arrows work once we click the left arrow we should navigate to the previous month as for the right arrow we should move to the next month I'm going to attach to both arrows event list nurse with click events so I'm going to select the left arrow with query selector method then attach to it event listener where we have to specify the type of the event it's going to be click and also we need to pass here callback function let's duplicate it and change the class name we need here next okay so in order to move to the previous month we need date dot set month then we need to subtract one to current month so we need take dot get mouth minus one as for the next month we need the same expression but with plus one so if we click the arrows then they won't work the reason is that we need to render the calendar with a proper month on click so we have to create the function where we passed the entire code then we have to call it once on the global scope and also we need to call it when we click the arrows so let's go ahead and create a function I'm going to call it render calendar let's grab the entire code except for this line of code and paste it inside of the function then I'm going to call it on the global scope and also inside of those callback functions alright so if I click the arrows then they will work fine as you see we move to the previous and to the next month okay so we are almost done actually I see here that we have a little issue the current date is not correct because as you remember we set the date to 1 and we need to change here date into new date so now the problem is fixed and finally we are done all right so I hope the project was interesting and useful and you learned some new stuff if you liked this video then please thumbs up comment below share the video subscribe to our channel and click the bell to get notified on coming tutorials ok see you next time

Channel: Code And Create

Views: 67,714

Rating: 4.9334612 out of 5

Keywords: HTML, CSS, JavaScript, Calendar, Web Design, Web Development, Programming

Id: o1yMqPyYeAo

Length: 42min 8sec (2528 seconds)

Published: Sat May 30 2020