Google Calendar Clone Tutorial – PHP, MySQL, JavaScript, HTML, and CSS

Key Takeaways

Learn how to build a full stack Google calendar clone entirely from scratch using PHP, MySQL, JavaScript, HTML, and CSS. No frameworks, no external libraries, just clean, understandable code. Muhammad Albra developed this course. Hey everyone. In this tutorial, we're diving into an exciting new challenge in web development. Building a Google Calendar app clone from scratch. We'll be using HTML 5, CSS3, JavaScript, PHP, and SQL to bring this powerful interactive scheduling app to life. Get ready to master dynamic event handling responsive layouts and database integration all in one hands-on project. So let's get started and see you in Visual Studio Code. Welcome to the course calendar app, a dynamic web- based scheduling application built using PHP, MySQL, JavaScript, HTML, and CSS. It allows users to add, edit, and delete multi-day events with an intuitive interface, all in a clean mobilefriendly layout. Whether you are building a learning management system, managing training sessions or organizing team events, this project provides a lightweight but a powerful solution. technologies used PHP for back-end scripting, form handling, database communication. So we will learn how PHP interact as a back-end scripting language and how it performs form handling, how to handle data coming from the forms and also how to communicate and interact with the database using PHP MySQL to or as a persistent data storage for appointments to store and to store the events and tasks inside an SQL. table or database JavaScript as a client side calendar logic event rendering and also modal controls. So the JavaScript will allow us to show up to show popups and also to make the page interactive and live and HTML 5. We will use HTML 5 to design and build the structure of the user interface and also of course we will use CSS3 for styling and responsiveness to make the app responsive and also we will use Google font which is my favorite Google font which is enter a clean modern typography which is enter font. So if you notice here in the app, we have a nice header and also we have a clock running and also we have this calendar box which is amazing. If you try to to go back, you can go back May, a April and so on. And if you want to go fourth, you can go fourth. Okay. Until you can see that the year will uh be will become 2026. If you reload the page again, it will redirect you to the current month, current year, and also the current day. You can see that the current day is highlighted with the background as blue. Now, if you want to add new task, you can do that, of course, by typing in typing in the course title, for example, the the course title as data engineering boot camp. And then you can uh define the instructor name for example as me Muhammad. And then start date you can specify it if you want. End date. The start date will be by default the chosen day. If you click on the sixth of this month it will be here the 6th of this month which is in this uh in this time the June month which is six. Then you can update the end date by going for example to the 10th of this month. So you can choose any date you want. I chosen in this uh 10. Then start time for example let's start from the 8:00 a.m. to 12:00 a.m. Now we can save that. And as you see we have here data engineering boot camp. The instructor is Muhammad and it starts from 8:00 to 12:00 which is 000000 and then it spans over to the 10th of this month. Okay. Then we can edit. So if you hover over this you can see that we have an edit button. Now if you click on edit you can edit the course title you can edit the instructor name and also you can edit the range of the date the start date and end date and also you can edit the starting time and ending time. Let's in this case uh uh edit the instructor name to be in this case for example Smith and now save that the you can see that appointment updated successfully which is nice. Now the instructor is Smith. Okay. Also, we we can edit it and edit the start date to start for example from the 15 of this month till the 20 of this month. So, we can go from 15 of this month till the 20 of this month by choosing 20. Then we can save that. It spans now from 15 to 20. Okay. So, we can update the range of the date. We can also update the instructor name. And also we can update the name of the course by going edit and update it to for example data visualization data visualization and then save that we have a nice data visualization boot camp ready to go. Okay. Also we can add multiple events on the same day by going edit uh excuse me by going add a new event and then name that event. So course title for example I'm going to name it as for example PHP course then the instructor name is John start date let's start it from the 15 till the 25 of this month then we can update the start time or keep it the same let's update the start time to be for example from 11 a.m. to 12:00 a.m. or we can update that to P.M. 11:00 p.m. to 12 a.m. Okay, then save that. Then you can notice that we have now an overlapping that starts from 15 and spans over the way all the way up to the 25 of this month. So you can notice that we have here some overlappings. We have two events, but here we have this event alone. PHP course. The instructor is John and the starting time is 23 and the ending time is 12 a.m. Okay. So in this video we will try to build this app and also we will learn some techniques in JavaScript and PHP to fetch the data. If you go to this uh PHP myadmin interface and then go to appointments browse this it will show that we have now created uh two courses. The first is data visualization boot camp and the second is PHP course. The instructor name the the name of the instructor for the data visualization boot camp is Smith and the start date it starts 15 of this month. Okay. And the end date it ends on the 20 of this month. And for the PHP course it starts from the 15 of this month but it lasts or it continues till the 25 of this month. And also we have the starting time and ending time as you can see. So in this video we will try to build this app using full stack languages or uh full stack web development languages HTML, CSS, JavaScript, PHP and SQL. So and also we can delete delete an event by going delete and then it will show a popup for for confirming that as a confirmation as a confirmation popup. Are you sure you want to delete this appointment? Okay. And then this appointment now is deleted. And notice that when we hover on a day that doesn't have events, it just shows one button as add. But when we hover over an a a day that has an existing or has a pre uh pre-existing event, it has two buttons, add and edit. We can add new appointment or we can edit the existing appointment. Okay. And when we have multiple events, let's try to add multiple events by giving for example AI boot camp instructor name Smith and then or for example uh an instructor name as Alex. Then the start date keep it the same. Let's keep it end date as for example the 30 of this month. Now we can save. Now we have another course as AI boot camp. And when when we try to edit this day it will show a select that you can choose which event do you want to edit. So which event you want to update. We can update the data visualization boot camp and also we can update the AI boot camp. Let's try to update the the AI boot camp and then uh update its for example end date to be 28. And also we can update the instructor name as or or for example the course title from AI boot camp to artificial artificial intelligence intelligence boot camp and then update the start time to start for example from 7th till the 12 or for example 10:00. Now let's save that and it's now updated. Now we have an artificial intelligence boot camp that starts from the 21 of this or or starts from the 19 of this month and then spans all the way to 28 because we have excluded this these two days. Okay. So you when we when we do edit on a day that has multiple events, it will show us an a select menu, a drop-own menu that you can choose which uh which appointment, which task, which event you want to update. Okay, so let's dive in together and let's build this project together. See you in Visual Studio Code and let's dive in. In this section, we will build the HTML structure for the calendar project. So, first of all, we need to run exam server. So, we can search exam. So, as you notice here, I have started the Apache server and the MySQL server. So if you don't have these two started, you can click start and it will start. If you don't have exam server installed on your computer, you can go install exam. The first website will will be download exam. Go into it and then you will notice this website which is apachefriend.org. This website will help you download the exam server on your computer locally. So you can choose your appropriate OS system and then choose whatever bits you have 64bit or whatever you have and then you can download it locally whether you have uh Linux whether you have Mac OS and so on. So you have to download examp you search here exampl server to be able to run this project locally. With that being said, now we need to create a folder inside the C. So we have to go into folders and then choose this PC and then go into the C and then we have to go into examp folder. Then we have to choose this folder hypertext documents which is HT docs. Inside this folder, we have to create a new folder. For example, I'm going to call it calendar project or dash project. So now this is my folder. It's empty. Now I will open this folder using Visual Studio Code. So let's open Visual Studio Code which is opened already. And then go to file, open folder. Then we have to go down this PC C choose examp folder hypertext documents and then choose our calendar project folder. Select folder and there we go. So now we have this folder opened. We can create files. Let's create our very first file in this project which is called index.php. So you will notice that there is an elephant icon here which is really nice. Now we can go ahead and start coding this project. So the first thing I will use is dock type HTML. So the document type the type of this document is HTML. This code is really important to denote that this document is of HTML type. And then the first element we have to use is HTML and we have to close this HTML element or tag. We have to specify that the lang is English is English. So language the language of this page is in English language and we have to specify that that the direction is left to right. Next we have to start a head element or head tag and then inside head we will specify meta the meta element and then character set we will set it to the best car set which is UTF-8 which supports a lot of characters and a lot of different letters in many different languages and meta name viewport report. So if you want to if you want your page to be responsive and if you want your page to scale across many different devices or across many different screen sizes, you have to set this meta tag metame viewport. So the viewport and then specify the content attribute as width equals width equals device dash width device-width and then put a comma initial initial dash scale equals 1.0. So we have to specify width equals device- width and then put a comma initial-scale. So the initial scale equals one and then you you might want to put a title for this project. I will use this title calendar project. So you can specify it as whatever you want. And then after title you might put whatever meta tags here. For example meta name description specify some some description for it. For example, I will write in here my own calendar. C calendar project for example. You want to specify it as you want. Whatever you want, you can specify it as you want. So this that's enough for the for the meta tags and titles. There are a lot of types a lot of other types of meta tags. Uh you can search for it and use whatever you want uh to to make it co friendly. Co is short for search engine optimization. But the most important thing in here is we have to create a link tag that link that that will link to a CSS file. So I have to specify the relationship as stylesheet stylesheet and then href. So here we have to put the path to the CSS file. So let's create a CSS file which is called style dot CSS. We will put all of of of our styling content in this file style. CSS and we will link all or we will refer to this file in here in this attribute href. So let's write in here style dot CSS. Now we have created our head section successfully. we can move on to the body section. Body will contain the following contents. So all of our page content will be inside the body tag. The first thing we will create the first thing we will create is the header tag. So we have to go header. So header and then slash header. So the header tag will contain an H1 tag which is the main title for this page. Let's set it as for example let's put an icon of calendar and then course calendar. Let's write in here course calendar and then put some break element and then and then let's write in here my calendar project. You can write whatever you want in here. After the header tag, let's go ahead and create a div element for the clock. So we want a clock. So let's write a comment in here. Clock. Let's create a div element. So div is short for division. div class equals clock container. Clock dash container. And then inside this div element, let's create another div element which which has the id attribute. So the id is a unique identifier for this div. ID as clock. And then let's put /ashdev. So now this div element will show us a live clock that will start from the current time and then counts every every second it will increase the time by 1 second and then it will count the clock for us. So this is a box for the clock item and then after this div after this clock div we will add the calendar section. So we will create calendar section by going div and then class let's specify a class for this div as calendar and then slashde inside the calendar section div we will create another div with the class nav btn container. So this container will contain the navigation arrows that will help us or allows us to navigate between months. So we can go one month uh we we can go to the next month or we can go back to the last to the to the last month. So we can uh we can navigate between months. So let's create a div class and then specify it as nav-btn. So the button the button of the navigation item and then on click when we click on this button we will invoke a function later in JavaScript section we will create a function called change month change month. And then we will invoke this function in here and we will inc uh we will pass in here minus one. So but we will keep this for later when when we use JavaScript. Okay. But this button will be used to navigate between months. So div and then let's specify it as nav-btn and then we have to put in here slashd div and we may use an icon of previous previous button like this. After it we will add a an H2 tag H2 element and specify ID equals month year month year style equals margin month year and then we might give it style as margin zero to to to make the margin of this H2 as zero to zero the margin of the heading two and then we will not write anything here just it will like a separator and then we will add another button another button slash and then slash button and then specify the on click later we as we said we will specify the on click later now we will we will set the class attribute as nav-btn and in here we will put next icon actually we need to set this as button. So we need to set this element as button and then slashutton. Okay. So I have a button for going for going the to the previous month and we have a button for going to the next month. Now that we have finished this section, we can create another div. Notice this div will be inside will will be still inside this class calendar but outside of the div class nav btn container. So outside of this div we will go outside it and then add a new div as class equals calendar. We will name the class as calendar-g grid and then specify id equals calendar. And then we will close this div by going /. So this div will be used to to display the calendar to display the calendar grid. Okay. So the class is calendar-g grid and the id set it as calendar. After this uh calendar section, we need to create another section which is model for add for add slashedit slashdelete appointment. So we need to add a model that will help us add edit delete appointments to affect the calendar. So let's go div and then give it an id equals event selector wrapper. So we will specify this id for this div which is event selector wrapper. And then inside this div we will create a label label and then put / label element and then and then we will specify a four a four attribute for this label tag as event selector. event selector and then inside this label element we will use the strong element strong to make the text strong and bold and let's write in here select event. So this select element this select event will help us to select which event do you want to edit or delete. So when you have multiple events in the same day you and you want to edit an event which event do you want to edit? So you can choose from this select element. So we can go select this is select element in HTML. It's a nice element that helps you to select one element from multiple from multiple elements. And then we have to specify the ID ID as event selector. Event selector. Notice notice capital S. And then when when we reach the JavaScript section, we will create a function that we can invoke in here. On change on the change event, we can invoke invoke a function which is handle called handle event selection. But this will be later on when we reach the JavaScript section when we when we create that function. Currently we inside this select element we will create an option element option and then slash option. This option element will be disabled. Disabled. We'll give it the attribute or the property disabled to be disabled. And then we will give it the property selected. You want it to be selected by default. And then let's write in here choose event. Choose event and then dot dot. Now we have finished this section of the select element. We can move on to the next section. Notice after this div, we will create another section as main form. Main form. This is the main form section. the main form section and this form will contain the inputs that we can insert new appointment or edit an an existing appointment. Okay. So now let's go form and this form element will have the attribute method as post. We need to set the method attribute or property as post to send the data in the post mode or in the post action. and then id equals event form. This form element inside it I will create an input element of type of type text or actually I will make the type as hidden. So we need this input to be hidden. Okay, this input should be hidden will not be visible to the user. But this input will contain a name property of action. So what is the type of action that I want to perform on the calendar? This input will inform me later on when we uh reach the PHP section, the PHP section which action should uh should we perform on the calendar. By default it will be add. It will be add add action. So it will be insert action. So we will set the value as add. And then we have to specify an ID attribute as form action. After this input element I will create another input element of type hidden. So let's make the type as hidden. So input element of type hidden and then the name of it will be event dash ID and then let's create an ID attribute of event event or event I capital I event ID. So the ID attribute here is event ID name event ID. And now let's create a label. Let's create a label element which will have the four attribute as course name. So course name and then let's write in here course title. So course title the title of the course and then type of input of type text. We will create an input of type text as a text input and then the name of it will be course name course underscore name id as course name and this input will have to be required we need to make this input required in order to be provided uh to us to store it in the database. The next step is we have to create another label element which have the for as instructor name. So the instructor name what is the name of the instructor that will explain this course or this session. And then let's have it as instructor name. Let's add an input element here of type text. And then set the name attribute as instructor name. ID equals instructor instructor name and then let's make this input required. Let's let's give it the the property required to be required. The same thing goes for the start date. So I have to create the label element and that that has the four attribute as start date start date. So this what is the start date of this event of this task or of this course and then we have to create an input of type date. So this input has to be of type date. Why? Because this input will be as a uh date input that you can choose the date, the month and the year that this session or this course will be on. And then we have to give it the name as start underscore date and the id should be as start date. And this input uh also has to be required uh from the user. We have to get some start date in order to be able to specify when this event starts. The same thing goes for the end date. So you so we have to give it four the four attribute as end date and then write in here end date. So you will notice a pattern in here that always the the value of the four attribute matches the value of the ID. The the value for the four attribute must match the value of the ID. Why? Because when we click on the on this label, we want the browser to automatically select or focus on the input. Later when we browse the page, I will show you that when we click on this label, it will focus on the input by default. Why? Because we are matching up the value of the four attribute with the value of the ID attribute. This has to be matched. The name doesn't doesn't have to match them but uh it's good to have uh explainable and it's best practice to name the name attribute as uh really good names for you in future to understand what this input gets from the user. So let's do an input element here of type date and then give it name as end underscore date. As as you'll notice this type of naming is really good for for us for for future us when we return back to this code maybe after 6 months you will you will understand immediately what this input receives from the user and the ID attribute has to match up with this value. So we have to copy and paste this value in here otherwise it will not focus on the input. And then we have to make the this input required uh to be required uh in order the user has to uh has to provide us with end date for us to be able to specify when this session starts and when this session ends or when this when this task starts and and when this start task ends. The last thing here we need to do is a button. We have to create a button that will be of type and equals submit. So this button of type submit to submit this form. And then let's add an icon here for save or preserve. Let's go save or it doesn't matter not important. Let's write in here save and then slashton. So now we have a button that will allow us to to save and submit this form and then we will receive the data that's being sent from this form by a PHP script later. I will create it and then we will send this data and store it in the database in myq in MySQL database and then we can we can we we will be able to fetch this data and display it on the calendar grid. So I think we have finished now the HTML section correctly. We can now uh the last thing we can create a delete form. So let's create a section for the delete form before we finish this section. So we have to create a form to delete this session or delete to delete this task or delete the the task or event. So form of type of method that has a method attribute method equals post notice capital letters post and then the onsubmit onsubmit when we submit this form I want to return return the function confirm. So the function confirm in JavaScript specifically in the bomb object which is browser object model. This bomb JavaScript has a function called confirm. Confirm will show us in the browser a confirmation message that will confirm. Do you are you sure you want to delete this? So are you sure you want you want to delete this task or this event? So we are asking the user are you sure you want to delete this event? If yes or to delete this appointment let's name it appointment. If yes he wants to delete it and he he is sure he want to delete it. We can go ahead and delete this task or event. So inside this form we will create an input of type equals input of type equals hidden. So this input must be hidden. This input will contain this information which is name equals equals action. So the type the type of action and then value equals delete. So the action we are trying to do in here is deleting action. we we want to delete a task or event from the calendar. So we have to specify the value of this input element as delete. Then we have to spec to create another to create we have to create another input element of type hidden and this input will also be event id. So what is the id of the event that we want to delete? We have to specify ID as delete event ID. And then lastly, we will have a button of type equals submit. And then let's spec let's specify class as submit btn. Then and let's put here an icon of for example bin. Yes, this this is the icon. So, bin icon and then write in here delete. Delete this event. The last thing here I want to add is let's write a comment in here. Let's put an X icon X icon and then cancel. So, what if we want what if you we wanted to cancel uh any the procedures that we have clicked on. So when when we click on this model for edit add and delete it will show up a model it will pop up a model and if we don't want to add or edit or delete we may want to cancel the procedures. So we can go ahead and put a button specified or dedicate or dedicated to this action which is cancelling action specify type equals button. So the type of this button will be a normal button and then on click when we click on this button later on as I said in the JavaScript section we will create a function that will close model. So let's keep that for the JavaScript section. When we reach the JS section we will create these functions and we will come back in this HTML and inject the onclick attributes for each element that needs to be called. Okay. and then because otherwise it will error up it will error it will error out out because we don't have these functions uh now in uh now in this time and then let's specify a class attribute as submit-bn and also we have also to uh write something in here as for example let's uh put a comment of x and let's right in here. Cancel. So with that being said, I believe now we have finished all the sections for this for this HTML section or all all the codes. Now we can move on to the next section which is CSS. Uh but if you wanted to just lastly link to a script, link to a JavaScript file, we can go script and then slashcript and let's specify src as calendar.js. And let's create this file now as we have done with the CSS. Let's create a file called calendar.js. And this file will contain some JS. So now let's make sure that we have these we have these I think we have to rise the button inside the div elements of this section. So I think this button and this form we have closed the module area. So let's take the /ash div from here. We have a calendar section calendar and then slashde div id event selector wrapper and then we have div class model. Yeah, we have forgotten to create this. We have to create a div in here. div class equals model and then id equals event model. And then inside this div we have to create another div which is which which has the class mod-content. And then inside inside these two divs we can put our code like that. Yeah. And now we can close these two divs right here after the button. We we must close these two divs. Okay. So this is a really important step that I have missed. We have to create two divs before the event selector wrapper. One div has the class model and also the id event model. Notice capital m and inside it there's another div which has the class modal dash content. These two divs will be closed right below the this cancel button. Why? Because all of this content will be contained. All this content, the button, the cancel button, the delete form and also the edit form and also the add form will all be contained contained or will all be within this model that will pop up. So we have to create these two divs. Really important. Okay, really important tip. And then we have to close them right before the script and also right below the button. So once we close this button, we have to close these two divs. So now we have finished all the HTML section. Meet you in the next section where we will be coding CSS. Welcome back. In this section, we will continue writing our CSS code. So the first element is root. We will set some colors to use later when we when we want to color uh our elements. So the first color is dash primary. So the primary color will be as three uh 6B8 to F6 and then primary dash light and then as DB B E A F E I think this has to be three and then we will set primary duck primary dash duck as 1 e 3 a 8 a dash background. So the the color of the background will be f9 fa fb. I think this has to be a one d uh one e and then 3 a 8a. Yeah. And then we have to set the the color of the success message to be as d 1 fa e5. So when we do some operations like adding a new appointment or editing an existing appointment or deleting an appointment and that operation uh happened successfully, we want to to to show a message a success message and we want to color we want to color that message as a success message. So the color of the success operation will be as D1 F AE5 and then dash dash success dash text will be as 06 5 F46. So this is the color of the of the text of the message of the success message and then the the color of the error message will be as fe E2E2 and then also the the color of the error text. So the color of the text of the error message will be as B # B9 1 C1 C. So now we have finished all of the colors that we will use across our CSS stylesheet. We will set the margin of all elements as zero as well as the padding as zero. And also we will set the box sizing as border box. And these are best practices. You will notice across many different stylesheets in the internet or in GitHub. All you all of them uses or use this kind of elements margin zero, padding zero and box sizing, border box because we want to set these elements to the default uh so that HTML elements uh go in the default behavior. For example, the headings and the inputs don't have a margin, don't have padding. We will we we will set the margin and padding ourselves. The next step is the body. We will style the body section. Font dash family. I will use the font family. Enter. And as as a backup font, we will use sand serif. Right now I have this font. Okay. So I have this font in my clipboard. I will paste it in the head section. So now I am in the PHP or HTML file. I will paste this CDN link for the font family. Enter in here. You can you can notice that the weight is 400 600 700 and display equals swap. So if you want this font, you can get it from the Google Google fonts. You can go Google Google fonts and then you can search in here for the inter enter inter font. So you can notice that we have this font and you can choose whatever font you have whatever font you want. For example, if you want this font, you can go to here and then get font and you can get this font using which way you you want whether it was link or import whether you want it the import version or link version. Okay, right now I have pasted my C link in here. Why? Because I want to use the font as enter. So font family as the font enter and then the background color I will set a background color for the body as variable and I will set it set it as dash background and then the color of the body will be hash 333 and also I will set the line height as 1.6. So these are uh these are the styling elements for the body. Font family enter background color. We have used this variable background which is this color. So we will we will set the background color for the body as this color and also the color the color the text color will be as 333 and then the line height 1.6. Now let's move on to the header section. The header section will have the background as a variable which is as primary the color primary and then the color will be white. I will set the color of the header to be white padding two rim and then one rim. I will add padding from the top side and bottom side as two rims and from the left and right sides as one rim. And then I will set the text align as center. Now if you save these changes and go into our HTML page, you will you will notice that we have styled our header section correctly in this way. After we have finished our header section, we can move on to the clock section. So let let's write here clock. So the clock section will have these uh these elements clock container the background as variable of primary light. So I will use primary light variable and then color I will use the variable primary dark primary dark- dark. So this is the the purpose of setting some variables. You don't have to memorize these colors over and over. You set them at the start of the file and then you use you refer back to the variable names. And then I will set the font size to be as two rim to make the font bigger. And then the font weight to be bold to make the font bolder. And then padding one rim. And then also I will set the text align as center. And then font dash family I will set it as enter. The font enter. and then comma sans surf sans-surf and then the letter spacing I will add some letter spacing to the clock container as two pixel and then border border dash bottom I will add a border bottom two pixel solid and then I will use the color of primary so now if you notice this clock container it will be like this so this is the clock container and now we will add some media query for it to make the clock container responsive. So media and then max dash width I will set the max width as 768 768 pixels. So the maximum width of the of the device screen of the screen size will be 768. So every single device uh screen equal to this or less we will set the clock container to be as the font size I will make it smaller. So rather than being the font size as two rim I will make it 1.4 4 rim to make the font smaller and then the padding I will set it as 0.75 from all directions from the top left bottom right. Okay. So these are important for uh responsiveness purposes. Now we have finished our clock. You may have the question why don't we have a clock running into here? Because we haven't reached the JavaScript section. When we reach JavaScript, we will create a function that will make this clock work and make this clock counts further. Now we can go to the calendar section calendar container. In the calendar, in the calendar container, I will set dot calendar the class calendar to have a max width of 1,000 pixel and also margin from the top and bottom as two rim and auto from the right and left sides. background as white and then also padding 1.5 rim border dash radius I will add border radius by 10 pixels amount and then box dash shadow we will add box shadow as 04 pixel and then 10 pixel the spread and then rgba I will set the red green blue alpha channels as 0 0 and then 0.1 one. So these are uh the calendar section effects. You will notice that now we have this section. It has a max width of 1,000 pixels. If we open the console and then go to here, you will notice that these styles have gone to the calendar div. So now calendar, if you go to here, the same styles we have wrote are now in here. Max width. So the calendar we have max width of 1,000. If you if we cancel this attribute it will be maximum width of 100%. But if we set the max width as 1,000 it will be in this looking in this looking div. Okay. The margin will have two rim. So two rim from top and bottom. So you notice that top and bottom have two rim. And from the left and and right we have auto background as white. We have the background here white and we have the shadow effect. So without shadow effect it will not be visible but with the shadow effect it it shows up it rises up. Okay. After the calendar section we will move on to the navbtn container. So navbtn container dash container. So this container contains we have uh coded it in the last section. We have this nav btn container which is a div that contains two buttons and these two buttons are the next button and the previous button. So we have two buttons that will navigate uh through or across the months. Now let's style the container of it. So display flex we will make the display of them as flex. Why flex? Because we want them to be in a flex order. And then justify dash content. I will justify the content as space dash between space between. So now you'll notice that we have display flex. So the now they are in a row in row flex and then the the justify content as space between. You can specify it to be as space dash around will have some space around them. You'll notice that they will have some space around them. So now they will have some space around the boxes. So you can set this property to whatever you want. It's called justify-content and I will specify it as space dash between. So I want the space to be between them, not around them like that. After it we will have align items. Align dash items to be center. So we want to center them and then margin-bottom as one rim. like that. Like that. Next we will move on to the navbtn itself. Now we will style these buttons themselves. So let's go ahead. We can go dotn navbtn nav-bn. A dot is used to select an element using a class. So font size is 1.5 rem. And then we will specify the background as none. We don't want a background. Okay, we don't want a background for these buttons. And ne and next we will specify border as none. And also the cursor. We want the cursor to be pointer. Currently the cursor is a normal cursor. We want them to be a pointer. Okay. So let's make the cursor as pointer. Pointer. And also we will use a color of variable. We'll use a variable of primary dash duck. Okay. Now if we reload this page, you'll have now we have a cursor as pointer and they don't have background or poda anymore. Now we will move on to the dot calendar grid. So let's now style the calendar grid section. We have to set this element the display of this element as display grid. So now we will specify the display property as grid to be in a grid fashion because the calendar cells will be in a grid fashion and then grid-template dash columns which is a really important uh property. We will call the function repeat and then we will put seven comma one fraction one frs fraction. So display grid and display flex are two of the uh new CSS attributes and we are using them here to uh to adjust the the displaying of our elements in our HTML page. And then the gap of this element will be as 10 pixel. Okay. So this this is the calendar grid. Next I will specify some specify a media query here for responsiveness purposes. So let's go here. Let's put a comment in here. mobile grid. So media at media and then max dash width as 1 to4 pixel. So the maximum screen width uh is 1,024 pixels. We want to style the dot calendar grid to be as display flex. We want to adjust the display from grid to be as flex. In mobile devices, we want to be them as flex. So to be in a row fashion and then flex- wrap, this is this is an important property to be no to to be no wrap. No wrap. So uh so for it to be as scrollable, we want the elements to be scrollable and no wrap. There's no wrap because wrap will make them as cards. cards. When you uh resize the the screen, the cards will go under each other. No, we don't want we don't want them to be in a column fashion. We want them to be we want them to be in a row fashion. So, we specify flex wrap property as no wrap. Overflow- x will be as auto. So, specify the overflow x property as auto. and then scroll dash snab dash type x and then mandatory mandatory. So this property is really important because we want to we want the calendar cells to be scrollable to be scrollable. So we have to set scroll dash snap dash type x. So we want to scroll across the x-axis and it's mandatory gap as 10 pixel. Okay. So this is for uh mobile devices for mobile and tablet devices for responsiveness purposes. Then I will uh we will do for day and day name. Later we will have some day, day name classes and then we will specify the minimum width to be as 140 pixels. Flex dash shrink as zero and then scroll scroll dash snap scroll dash snap dash align as start. Okay, now we have finished our media query for this media. We have finished the coding for this media. So we have add media. Media helps us uh run code or run CSS code for a specific device screen sizes. We have set the device to be as 124 pixels. We have changed the display mode for the candy grid from display grid to display flex and then set the flex the flex wrap as no wrap the overflow x to be as auto and then scroll- snap dash type across the x-axis and then specify here mandatory gap of of 10 pixel. So the gap between each element will be 10 pixels. And also the same for the day and day name. We want the minimum width to be 140 pixels. Flex dash rink zero. And then scroll snap align start. After this media I will set the dot day and also the dot day-name classes to have the text align center and then dot day individually. I want to select the day the individual day class and then specify the background to be background to be as hash FFF. The border of the day will be as one pixel solid # E5 E7 EB and then the border dash size I think this will be E5 E5 this this should be E5 E7 EB and then the border radius border radius as 6 pixels. So we want to uh make a radius effect on the border by the amount of six pixels and then minimum dash height one uh 100 pixels minimum height 100 pixels padding 8 pixels and then the display display as flex flex dash direction flex direction as column. So we want it to to be displayed in a column fashion and then justify dash content as flex start. Also we want to set the justifi uh the position position property to be relative. So I want the position of this element to be in a relative mode. The cursor should be pointer. So cursor should be pointer. And then transition we will specify a transition property for it for the background just for the background by the by the duration 2 seconds and then the effect will be ease. So here we have finished the day attributes. Uh the most important thing here is display flex flex direction as column and then justify content as flex starts. After we have finished the day attribute, we will go into the day hava. So let's add a hava effect for the day day and then choose the hava effect. I will set the background the background to be as f3 f4 f6. So a kind kind of a a a degree of the white colors and then do day dot today class today as background background variable I will use a variable of primary dash light so this color and then border dash color the color of the border will be as variable of d- primary dash duck and then dot date number. I will uh style the date- number element to be font weight bold margin-bottom. We will set the margin bottom. We will add some margin from from the top from the bottom side by the amount five pixels. Also, I want to style the event element to have a background using a variable of this color primary the primary color. Set the color to be white. And then padding. I will add padding of three pixels and six pixels from the top and and top and bottom sides as 3 pixels. And from the left and right sides as 6 pixels, border dash radius as 4 pixels, margin- top as 4 pixels. And also we will add some font size by 14 pixels. And then cursor pointer. We will adjust the cursor to be a pointer cursor. And then lastly, we will add a transition uh transform of 0.2 seconds as is. And then we will go ahead and put an event hover effect here transform. So the transform property in the CSS uh it's kind of a a transform property that transforms the element. You can use scale of 0 1.03. So we want to make the element bigger. If you scale by one, it will be the same size as the element. If you scale it to a number low that is low than or lower than one, for example, 0.5, it will make the element half its size. But if you make it 1.5, it will make the element uh half more than the size than the original size of the the of the element. So in this case, I will make it 1.03. Okay. So scale it will scale the element and then let's go into the alert into the alert boxes. So let's let's style the alert boxes. Let's go dot alert. Let's give it a max width of 600 pixels. 600 pixels. and then margin one rim uh auto padding as one rim. So alert will be the alert that will be showed after we do an operation. After we add a new appointment or edit an existing appointment, it will show an alert that tells us whether it was successful or it wasn't successful. So this alert will be uh the alert that is being showed after we do an operation. border dash radius by 6 pixel and then text dash align center and we have to set the font weight to be bold. Font-weight an important property as bold. After we have finished this alert this this generic alert element let's style the success alert. The success alert will will be the same as the original alert but just uh but just have the background as variable of dash success. This color we have set way up in the file. This success variable and and also we will set the the color to be as the variable of success dash text. So you have another variable called success text. So this alert will be a generic alert that has a max width, margin, padding, proto size but the success message when the alert is a success message we will make the background as success and the color as success text. When the alert is a error error message we will set the the back the background as variable dash error and then we will set the color property to be as variable dash error error dash text. Okay. Now let's move on to the model popup. So the model popup model popup is the model that will be showed when we click on the edit or add button. So when when we click on add or edit button it will show up or pop up a model window and this model will have these these attributes dot model position as fixed. We will set the position as fixed and then also the inset insert as zero display I will make the the the default display of it as none. So we have to make the model none. The display of the model as none by default align items center. So the model so this model will not show up until the user clicks on a button. Until the user clicks on the edit or add button it will be uh shown. Otherwise it will not be shown and then justify dash content center also we have to specify the background as rgba 0 0 0 comma 0.5 so R red G green B blue and A stands for alpha alpha controls the transparency of the color and then zindex this zindex property controls the the the layering the layering order, the order of the layers or the order of the elements. Uh which element do you want to show above which element? So now we will set it as 9999 for for the model. Why? Because we want the model to show above all sections. Okay. Next we'll have we will have to specify modal content element mod-content and give it background as white padding as two rim. So the padding as two rims from all sides and then border- radius dash radius as 10 pixel by the amount of 10 pixel and then maximum dash width max width as 420 pixels 420 pixels and then we will set the width to be 100%. And also the box dash shadow we will give it a shadow a shadow effect of zero 8 pixels and then 20 pixels and then rgba of 0 0 and then 0.2. Next we will move on to the mod-content d uh label. So model dashc content and then inside this element we will have an element of label label which is the label of the of the of the inputs. Here we have some labels here of the inputs. These labels we want to style them to be as width 100% and then padding 10 pixel font size font dash size one rim border as 1 pixel solid #ctc and then border- radius we will give it radius by amount five pixels. So I think we have to set the display display display to be block here and also font dashweight to be bold and also we have to set margin dashbottom to be one rim and then we have to to specify margin-bottom to be as six pixel and I think these properties properties are not meant for the label itself but these pro these properties we will add for the input. So let's go now model-ash content and then choose input. So the input will have these attributes width 100% padding 10 pixels font size one rim border as one pixel solid hash ccc and then border radius as 5 pixels whereas the label will have display block to to be displayed in a block fashion and then font weight bold also margin from the top side as one rim and margin from the bottom side as six pixels. But the input will have these attributes. Okay. So we have to move on to the model content button. So now dot model content-content and then choose button element. This button element will have margin- top as one rim and then padding 10 pixels 10 pixels from all the sides. width as 100%. And then border as none as none border dash radius. So the amount of rad of of radius will be as six pixels and then font dash size one rim cursor cursor as pointer. So we have to set the cursor to be as pointer font size one rim border radius 6 pixels and border should be none. Okay, these are important uh properties for the button. We have to make the border none. To make the border none, border radius 6 pixels and then font size one one rim. Now let's choose a specific type of the buttons which is the submit button by going model-ash content and then choose the button element and then specify in square brackets the type of the button to be equal submit. When the type of the button is submit go ahead and give it these styles. First of all, first of all the background background dash color as variable which is dash primary and then the color should be white. So we have to make the background color as a primary color but but the color of the text of the button should be white. dots dashbtn. The same thing here we have to make the background dash color as this color crimson crimson color which is kind of a a reddish color and then color as white or hash fff if you want to use the uh the hash system. Let's go ahead and style the modal dash content and then choose the button last dash child. So we want to select this is a selector in CSS. If you want to select the last child uh the last child button from the modal content, you can go mod-ash content and then space and then choose button put a semicolon and then choose last child and then we can go and specify the background color as E5 E7 EB semicolon and then the color as h# 333 Now let's style the drop-own menu by going drop-down dropdown for multiple events. So now we will style the dropdowns for multiple events. hashevent selector we will go and give it width as 100%. So a full width, width as 100%. And then padding as 10 pixels from all sides, font size as one rim, one rim, and then margin- top. The top margin as one dash one rem. And then margin bottom margin dash bottom as one rem. And then we can specify border dash radius to be as five pixels. and also now border one pixel solid hash ccc. Okay. Now let's specify the day overlay. When we hover over a day, we want to show an overlay hover or or overlay effect that will show two buttons add and edit. So overlay, let's put a icon for the check mark. Check mark. Overlay overlay buttons logic or CSS logic CSS logic. Now let's go and style it by going dot day dash overlay. This overlay should have position absolute position as absolute. And then we have to go top six pixels right six pixels from the from the right section and then display as none. We want to make it none. It's it's it's display as none. And then flex dash direction column column gap as four pixels and zindex as two to make it appear uh above the cell. And then we will specif we will specify day hover effect comma or day hover. When we hover over day over the day element we want to select another element which is day- overlay. This is a complex way of selecting elements. When we hover over this element I will want I want to select this element and do something on this element. when we hover on this element. Okay. So, make the display as flex. We want to to make the display as flex. And then I want to select the overlay button by going overlay overlay-bn background background property. I want to use a variable of primary dash dark and then color as white. And also I want to set the padding four pixels from top and bottom. And also eight pixels from the right and left size. From from top and bottom I want to set four pixels. And from left and right 8 pixels. Font size as 12 pixels. 12 pixels. And then the border should be none. And also the border radius 4 pixels. And then also the cursor cursor pointer. Let's make the cursor as pointer and then transition. We will set transition property to be background 0.2 seconds ease. So I want to transition uh the the effect of background by the duration of 2 seconds and make the effect as is. Last the last thing in here in this section CSS section will be overlay-bn hover and then we will set the background color to be a variable using the variable primary the background color or the background if you want a shorthand version. So now congratulations we have finished the CSS section correctly. I believe now this will make the styling of our uh style of our page look nice. Yep. And it's like that. You will notice that some elements have been uh have been ignored or have been uh uh disappeared. Why? Because we have set display as none. As you notice display none. We want to show a model when we hover hover over the days or sales. In the next section, we will dive into the JavaScript section where we will create the logic that will loop through the cells and then create some elements in here, create some divs and then you will notice that when we click on some cell, it will show up a model that will add an appointment or add a new task or event. And when we have a day that has existing events, we will have over it and it will show an overlay which we have styled in this section. This section overlay we have created a nice overlay that will show up edit and add buttons. When we click on those buttons, it will show up a model that will edit or delete existing events or tasks or or tasks. So meet you in the next section. Welcome back. In this section, we will dive into PHP code. So, let's create a file called calendar calendar.php. And then let's go ahead and start a PHP tag like this exclamation uh a bigger than notation and then question mark and then PHP. Okay. Now let's go ahead and first of all uh create a file called connection connection that will connect to the database. If you go to the connection file it will be as a emptyp file. Let's start a PHP tag like this and then put a comment one connect. We will connect to local MySQL server using examp whatever server you have currently I am using examp uh whatever server you have we will connect locally to my SQL server. First of all, I will create a variable called connection equals new. Then the keyword new. I will create a new instance, a new object of the class or or of the function MySQL I MySQL or MySQL. This is a function in PHP language. And then we have to pass in some parameters. First of all, local host because now we are uh on the local host and then we have to pass in here the username username. We will pass here root. So currently the username is root. You can specify it in a variable. You can go and create username variable equals root and then you can refer to this variable by using username like that or you could pass it straightforward whatever way you prefer you can choose it's up to you and then the password is nothing we are on the local host I don't have password currently uh to access a database and then we will create a uh database called course _ calendar I will connect to this database. Okay, the next step is connection and then I will go ahead and call this method which is set character set character set set car set as UTF8 MB4. Now I will access the PHP myadmin by going to the localhost slashphpmyadmin. it will redirect me to PHP my admin tool on the local host and then I can create a new database. Uh currently I have a database here called course calendar. I have created uh previously which has this kind of structure ID, course name, instructor name, start date, end date and then created at uh what you will do is you will have to create a column called ID of this type. Okay. Of this type integer 11 course name variable character 255 instructor name var which is variable character meaning a variable amount of characters of 255 and then start date end date and then create at or let's in this let's in this course or let's in this uh video create this database by going localhost and then open a new PHP my admin tab and then I will create a new database called for example calendar calendar and then set its uh it's as uh its uni code as UTF8 MP4 general C and then let's click on create. Now it it has created a new database called calendar. So you can notice this is a new DB a new database called calendar. I will create a table here called calendar appointments or let's make it short. Let's call it appointments. Appointments. And then the number of columns here 1 2 3 4 5 6. So we have six columns. Let's go and put six. Create. Now let's name these columns. We have id, we have to set the type of id column as integer and the length as 11 and then we have to uh set it to be auto incremented. So this is a really important attribute. We have to set it as auto incremented and it uh once you set it as auto incremented it will become a primary key. So the ID column as you notice it's a primary key. It has this icon of primary key and then the next column as course name. So what is the name of the course? Course underscore name. The type of this column should be variable character var. And then the length should be 255. The third column is instructor name. The name of the instructor. Instructor underscore name. Instructor name as variable character. And then the length as 255. And then start date. You have to specify a start start underscore date as date as type as of type date. If you scroll down here, you will go we have we have some string types. We have some date. We have a date type. Okay. We have a date type. I have to choose date and then end date as date. Also we have to to create a to create a new column called end date as of type date. So date and then the last column is is called created as created underscore as of type date or of type time stamp time stamp. Okay. Now we can click on save and it will save this table. As you can notice there here we have a database called calendar. Inside this database we have a table called appointments. And this table appointments have these columns. Now we can go ahead and go back to our calendar. PHP file and write our PHP logic in here. The first thing is we have to include the database connection of this file. We have to include this connection to this file in order to be able to connect to the database and interact with the database. So we have to include the file which is connection connection.php. Why we have to include the connection dotphp file to connect to the database to connect to the database. The second step is we have to create three variables. The first one is success message equals empty string. The second is error message. So these variables will contain the messages whether it was success message it will be contained into here or whether it was error message it will be stored into this variable and so on so on and then events from DB we will return some events or get back when we fetch or when we retrieve or pull the events from the database we will store them in this array. So we will create an empty array here. So, initialize initialize a new array. Initialize or we could write initialize. Initialize a new array to store the fetched events. The next thing here is handle handle add appointment. When we add a new appointment, we want to add some logic here to handle that add add or insert appointment by going if we will create an if condition here and then if server if the server the the the magical variable server in PHP if the server and then then and then the attribute request underscore method it must be capital. So we have to write it in capital letters request method. If the request method equals equals post that means when we send some data from the form if the request method is a post method and by going and operator and and and the post the magical variable post action and the action and the action then put ex uh double exclamation marks uh double question marks string equals equals add and if the post action parameter if it's not empty if this action parameter equals equals equals add then we will do something. So this is an if condition to check that checks or that inspects whether the request method is a post action and also the post action uh property or attribute equals equals equals add. Okay. Then we will do course equals trim. The function trim. We will trim the function trim. Simply uh strip wide space. It will it will trim or cut the wide space or other characters from the beginning and end of a string. And then we will pass into here post. We will get the data post from the magical variable post. And then I will choose the property course name if it's not empty by going double question marks and then empty string. You have to put a semicolon otherwise PHP will cry out or we could use single quotation marks whatever you you you would like. And then instructor variable equals trim the function trim to trim the white space from the beginning and end of strings. and then pass into here the magical variable post and then choose the instructor underscore name and then just put like that thirdly the variable start the start date the starting date I will fetch it or we will retrieve it from them from the variable post underscore post and then we will uh pass into here start and date. The same thing goes into here. And then end equals post end underscore date and then put double question marks empty string. After these variables, after we have gotten these variables, extracted them, after we have extracted these variables from the post variable, we can go and do an if condition. If the course and and instructor instructor and and start the variable start and the variable end. So if these variables exist, if these variables already exist and we have gotten them correctly, then I will create a statement a SQL statement equals connection. This variable is coming from that file. It's coming from is coming from this connection file which is connection. I will connect to this database and then prepare a new statement and then prepare a statement. This statement will be insert into the table appointments which I will copy its name from here. Appointments insert into appointments and then specify these columns course name, instructor instructor name, comma start un end date. I will insert these values. These values which are values which are question mark question mark four question marks as placeholders to uh to to insert them or inject them later to inject these values later and then I will close this prepare uh bracket here and then put a semicolon. The next step is call statement. The next step is call statement variable and then bind param. This bind param is really fun. Why? Because we we have to put four s letters. If you have here four question marks, you will have to put into here you will have to put into here four s letters. But if you have 10 question marks, you'll have to put into here 10 s letters. So it's quite fun to to count them and then pass them to your course comma instructor comma start comma end statement and then call the method execute. This method will execute this SQL query and then header I will header the user redirect the user to the location which is uh it's a good practice to close this statement. So statement and then call the method close. Why do we have to close it? Uh so to keep resources uh to not to keep PHP busy with that statement. So we have to close it. Always if you open some statements or files, you have to close them using a close method or close function. And then and then location. I will specify a location and then put a dot sign. In PHP when you want to concatenate strings or concatenate substrings, we use dot. We don't use plus as in Python or JavaScript. We use a dot notation to concatenate. And then we have to go the the server magical variable and then choose the the attribute PHP self and then concatenate a third string a third substring and then put a question mark success. If this operation happened and it's successfully happened, I will send it send the user to this file with a parameter success equals 1 equals 1. Okay, so success equals one and we don't forget to put a semicolon otherwise PHP will cry out and then exist or exit. Exit will exit out of this file. Else, let's put an else command in here. So else if we don't have these variables or if we don't have one of these variables we will add a else logic here. else we have to header we have to redirect the user to this location which is location and then uh concatenate the string server and then choose the parameter PHP self and then concatenate this string question mark error I will pass error equals 1 and then exit you have to exit out of this script out of this PHP script script. Now we have finished our handle add appointments. Let's move on to the next step which is handle edit. Handle edit appointment. The same thing if if condition if server if the server variable and then choose this request method property or attribute. If this equals equals equals post then I will and and if the post the magical variable post and then choose the parameter or attribute or property action action and then put double question marks single quotation marks equals equals edit. If the action is edit then I will go and you can make it in single in single quotation marks and also we can put in here three equal marks. If this logic happens or if these conditions are met, we can go and id equals post we will call the post variable and then select the uh property event underscore id equals and then go double quotation marks null otherwise we'll make it as null and then course the course name equals trim I will trim trim takes for me a string and trim it. So trim post and then also I will select the course underscore name attribute and then put double question marks and then specify single empty single quotation marks. instructor I will get the instructor name from the post from the sent post variable and then specify instructor underscore name and then specify it as null otherwise as empty string also the start date the starting date equals the magical variable post and then choose the attribute start underscore date put double question marks as empty string and then end equals post and then choose end date double quotation double quotation marks and then single quotation uh double question marks and then single quotation marks and then put a semicolon. Now we have gotten these variables in a correct way and we have stored them in these variables. We can check if we have if we actually have these variables by going if id ID variable and add course and and instructor and add start and add end. We can go ahead and create a statement equals connection and then prepare. I will prepare a new statement which is update and this time I will update the table appointments. Let's copy its name. Update the table appointments and then paste it into here. Update the table appointments. Set the course underscore name to equal question mark, instructor instructor name to equal question mark, comm, start underscore date to equal question mark and then end underscore date end date equals question mark where ID equals question mark and then we have to put a semicolon after this parenthesis or after this brackets and then we have to bind the parameters by going stmmt short for statement and then bind_pammed params parameters and then pass into here ss ss si then pass course comma instructor comma start comma end comma id. So, so we are binding these variable names to these question marks. The third step is statement and then execute it. We have to execute it by going execute function and then we have to go header uh we have to go statement and then close this statement. The last step is header. We have to redirect the user to the location which is dot to concatenate and then server PHP self and then put concatenation mark question mark success equals 2 and then semicolon and we have to exit out of this PHP script. else. If we notice here, we have this condition. If request method, okay, and and and then we have an inner loop. If ID, course, instructor, start and date are all available. We have to put an else here and then specify header location and then dot to concatenate to the server variable and then choose PHP self and then concatenate to the error question mark error equals 2 and then put a semicolon and we have and then we have to exit out of this script. exit. The third step or the third major step here is we have to handle delete appointment by going if server if the server and then choose the property request method request method equals equals equals post and by putting and double and marks and post variable and then choose Choose the action property. If the action equals equals equals delete then I will go ahead and id fetch the id from the post variable by going post and then extract the id the event underscore id. So I am extracting the id attribute outside of the post variable. and then put double question marks null otherwise it will be none. If id if we do have ID I will go and create a statement by connecting to the to the database and then calling a method in here prepare. This method is called prepare. I will prepare an SQL statement to be uh run or to be executed on the database which is in this case delete from the table appointments which I will copy its name to be exactly it appointments where id column equals question mark and then statement I will bind parameter. So bind param function really important function. This function bind or maps the parameters to these question marks. bind and scope RAM and then I comma id statement stmmt execute. I will execute the statement and then SMTB SM stmmt the statement and then we have to close this statement or close the this statement header and then we have to redirect the user to this to the server which is PHP self and then we have to go and redirect him to the success uh by a success message equals equals 3 and then exit out of PHP. Now then the last thing is success success and error messages. We want to handle success and error messages. If is set the function is set determine if a variable is declared and is different than null. So this function checks whether the variable is declared or not. And also at the same time it checks whether it if this variable is different than the object null. If is set and then pass into here the get variable the get magical variable success. Well, then we will call our variable success message which we have defined way at the top of this file success message and then we have to put equals match. We have to use the keyword match and then we have to put an expression in here. Get expression success. I will get the success message from the get. If the if the success message match one then I will return this message which is the check mark icon and then appointment appointment added successfully comma if it's two if it is two then I will return a check mark and then write in here. Appointment appointment updated successfully because when we uh do a a an editing mode we will return two. Here when we add when the action is add we specified the success to be one. When we update or edit when the action is edit we specify the success as two. And when the handle delete when we handle delete actions we specify the success as uh three. I think we have missplit success in here. Success success like this and also like this. Yeah. So now I think successfully is now successfully like that. Comma three when the three when we have three as action then we will put a check mark or put a uh bin mark and then appointment declared or deleted. Appointment deleted deleted successfully. Comma the default well when it's not one and not two and also not three the default will will return nothing then we will put in here semicolon you can make it single quotation marks and then if is set also we will use the is set function is set the variable get the magical varable will get and then choose the error uh parameter or error attribute or error. We will set the error message variable that we have declared at the top of the file error message to be equal or to equal exclamation mark icon and then we have to put error a there's an error a let's make it single quotation marks uh error occurred and then please check please check your input okay you have to check your input and then put a semicolon then I will put fetch here calendar we'll use a calendar icon here fetch all appointments all appointments appointments and spread over date range. So I have to fetch all appointments and spread over date range by going result equals connection and then we have to we have to execute a query in here which is select uh select asterisk from appointments. I will copy the name of the table. Okay. So, select asterisk from appointments and then put a semicolon. So, we have selected every single row or every single column all the columns from appointments. if result variable and and result fetch underscore uh fetch and then call num underscore rows or by going result and then call the method num underscore rows is greater than zero. So when we fetch these columns if we have result and at and also we have the result the number of rows. So the number of rows of the result is greater than zero then and only then while row equals result and then fetch all associative fetch underscore associative array. Then we have to go start equals new. We have to set we have to instantiate a new object from the datetime class by going new datetime class and then pass into here t should be capital uh with the Pascal case because this is this is a class we have to use datetime class and then pass into here row start and date. So we have to pass the start date that we fetch from the SQL database. We have to pass it to the datetime class and instantiate a new object from this class. New new datetime. The same thing with end. So new datetime class and then pass into here row and then pass end date. Then while start is less than or equal end, we will go ahead and call our variable events from DB which is defined into here. Events from DB and then we have to fill it fill this array by going empty square brackets empty square brackets equals square brackets and then put ID as ID in string format. ID matches or corresponds to this value row ID, comma, we have title title and then we have to go and put in here row as like that uh square brackets and then row and these are curly brackets curly brackets and then row and then put put square brackets as like that. Course underscore name minus outside of the square brackets minus and then row and then choose the instructor name. instructor dash name or underscore name instru instructor name comma date it will be mapped to the start variable start and then format I will format the start as year dash month dash days comma and then start the variable uh the the property start will be mapped to to the value row and then choose the column start underscore date comma end and we'll choose the ver the column end and the column end will be mapped to row and then we'll choose the column end underscore date after this list I will put semicolon and then start and and and I will call the function or method modify we will modify here and then pass a string that contains plus one white space day or we can use single quotation marks as + one and then day and also here we could use single quotation marks year capital y- m dash m refers to months dash d refers to days this is the format of the of the start date and then we will have to connection and close the connection by going connection close the connection. And with that being said, congratulations. We have finished writing our PHP logic in this video. So we have finished constructing our HTML structure, building the structure and architecture of the page. And then we have decorated and styled our CSS file using uh CSS sty styling codes flexbox and grid. And then we have created the PHP logic which inserts, adds or or or updates, edits or deletes or removes appointments or tasks or events from the database or table appointments. In the next video or in the next section, we will dive into writing JavaScript code which will make our page uh interactive and also make our uh calendar app interactive with the user to show the pop-up model and also to be uh in a dynamic order. So see you there and thanks for watching. In this section we will dive into JavaScript section. So let's go into the calendar.js file and then start coding JS. The first thing we have to do is create a constant and name it as calendar eel. E is short for element. So calendar element equals document. We will select the document dot getelement by id. So we want to get an element by by an id and then pass in here ID value as calendar. Then constant another constant called month eel the month element equals or month year element to be comprehensive name document dot getelement by id get element by ID and then pass the ID as month year. We need also a third constant name it as mod element. We need to get the mod element equals document dot get element get element by id and then pass in here event model capital m notice the capital M. Now we will create a let variable and call and call it current date capital D equals new date. So we will initialize a new date object. The second step here is we will create a function and name it as render calendar. This function will take from me date equals new date. So we will initial we will initialize this function with the parameter date equals new instance of the date class or of the date object and then the calendar element calendar. If you choose calendar eel dot inner HTML we will we will update the inner HTML property or attribute of this element calendar element to equal an empty string. Then we will initialize a constant called year equals date.get. Notice get full year. And we know that JavaScript uses camel case. The first letter is small. The first letter of each subsequent word is capital. So f is capital, year is capital, y is capital. Then constant name it as month equals date dot get month. We will get the month. So get full year. uh get the full year format get month. It gets the month and then a constant called today equals date or equals new date object. Then we will create a constant called total days. So the total number of days equals new date and then pass in here the constant here that we have created above comma month. So month + 1 comma 0 then dot get date. So we we want to get the date using the get date method and then we will create a constant called first day of month. So the first day of month we need to select or detect what is the first day of the month. first day of month equals new date class and then pass in here year, month comm, one dot get day method. Now we have we have created our constants and variables we can go ahead and use them. So now we want we want to display we want to display this play month and year by going month year element the month year element dot text content. So text content updates the text content of an of an element. It's similar to the inner HTML but it just deals with text equals date dot to local date string. This is a function that takes for me a local string array of local of local strings or array of local objects and then convert a date to local date string. So we have to pass in here the local as en- us comma and then pass in here an object that contains a key or or property as month with the value long. So as the value long comma year as the value numeric and we have to put a semicolon here for JavaScript and then constant we will create constant called week days the days of the week it it's it's just an array of the days names. So Sunday uh short is sun Monday short is man to which is Tuesday Wednesday Thursday Friday, Saturday and then we have to go and loop through it using a for each. So weekdays do for each loop for each and then pass in here day. So it takes for me a parameter day and then we will do an arrow function. This is a shorthand function a short version for functions. It's called arrow function. And then specify in here constant as day el day element equals document dotcreate element. For each day we will create an element which is a div. So we will create a div element for each single or for every single day. For every single day we will create element as div. And then we will take this day element and update its class name property which is the class to equal the value day- name as you can see in here. Then day element dot text content we will update the text content property to equal day just the day parameter and then put a semicolon. then the calendar element dot append child. We will append a new child which is the day element. So we're taking the day element and appending it to the calendar element just as you can see in here and then put a semicolon in here. The next step is we need to create a for loop for and then as you can uh as you know we have to initialize a variable let equals zero. initialize it from zero to start from zero. I uh I will work as long as I is less than first day of month. Then semicolon I ++ and each in each loop we will increase the I by one val uh by one unit one unit. Calendar element. So calendar element dot append child we will append the child document dot createelement. We will create an element using the do function. DOM is short for document object model and then pass in here the element div and then put a semicolon here. After this for loop we will loop through days. So let's go to loop. Let's loop loop through days by using a for loop. So for let day equals 1 as long as day is less than or equal total days then day plus. For each day we will create a constant called date string equals a tilda which is uh this new way of writing strings in JavaScript. And then put dollar sign year minus dollar sign and then we will pass in here the string class string capital S and then pass in here month + one and then dot we have to call dotpad pad string pad start and then pass in here two comma zero. So we will pad it with two zeros minus outside of this we'll put a minus sign and then dollar sign string and then pass in here day dotpad start. You have to pad the start and pass in here max length as two and then the the zero as the string and then put a semicolon. Then we'll create a constant which is cell. So the cell the cells by going document dotcreateelement we will create an an element create element and then pass in here the name of the element which is div then cell dotclass name we will set the class name as day and if you recall we have styled this day class in CSS. If we will specify if condition if day equals today dot Get date and and if month equals equals equals today dot get month method and year equals equals today dot get full year. If so, we will run some logic in here which is cell dotclass list dotcl class list dot add we will add the today element. So today pass today as string to the class list and then constant we will we will create a constant which is date eel date element equals document document dot createelement create capital E capital E element and then pass in here the string div by going diiv and then we have to go outside of this uh uh semicolon date element dot class name capital n as you can notice capital n equals date dash number. So the date number uh of the day then date element date eel dot text content equals day. Then we will append this child to the cell element by going append child. You can notice that we have a capital C. So append child and then pass in here a node which is date eel date element. After this we will create a constant called events today. This constant will equal events dot filter. We have to filter over the events by going events dot filter events and then put a dot filter function pass in here e as a parameter and then an arrow function a dot date equals equals equals date string where the date equals the date string. Then we will initialize a constant as event box equals document document dotcreateelement function which creates an element in the do which is document object model pass in here div. Then event box we will add a class name as the events class by going events semicolon. Then we have to render. We will go to have to render render events by going events today events today and then dot for each we will create a for each here function event and then do an arrow function for each event we will create a constant evv which is event short for event equals document dotcreateelement. So we are creating some elements here using the create element function and then pass in here divvent dotclass name equals the string event. Then we will initialize a constant course eel course element equals document dotcreateelement and then pass in here div course element dotclass name. So we are creating some variables for each thing here for the course for the event and then pass in here equals course as the class name course eel course element text content we have to update the text content property to equal event.title title dotsplit. We have to split it by the whites space dash whitespace and then at index zero and then constant we have to name it as instructor eel instructor element equals document dotcreate element and then pass in here div instructor element and then tap on instructor element dotclass name. We have to tap on the class name property to equal the string or value instructor instructor element. We have to go to instructor element dot text content equals text content equals this icon of the teacher. You can not you can put this icon of teacher or trainer teacher. And then we have to go plus event.title dotsplit and then pass in here whitespace dash whites space at index one. So we have to put here whitespace then constant we will create a constant for the time element. We have now to create a time element by going document dotcreateelement for the time which is also a div time element time time eel time element dotclass name equal time the string time then time element text content we have to tap over time eel element dot text content capital c equals this clock icon For example, if you want to use some icons, so clock icon, then concatenate with the event dot start time plus string of this dash then plus event.end underscore time. Then we have to go EV the event.append child. We have to append this child which is course element that we have created above. And also we have to append another child which is the instructor element child by going instructor eel which we have created in here create element div and then we have to append event.append child append child function pass in here time element. The same thing goes event box dot append child and then pass in here EV. We have to append the event to the to the event box. Now we will continue uh with the overlay buttons by going overlay buttons. Create a constant which is overlay equals document dotcreate capital E element. So create element. have to create an element and pass in here the name of an element which is div. Then overlay dot class name equals day-overlay which we have styled in the CSS over overlay overlay overlay then constant add btn equals document dotcreate element and then pass in here a div add pass in here a button. So we have to create a button element by going document dotcreateelement and then pass button as a button element then add btn this element we have to add a class name we have to inject a class name which is overlay overlay-bn so you can notice the trend of creating some elements and then injecting some class names for each element and then add btn text content we have to change the text content of this element of this button element by going uh putting a string plus icon and then add to add a new event or to add new task add btn dot onclick we will use the on click event equal this e which is short for event and then put an arrow function e dot stop program propagation this function will stop the propagation stop propagation and Then open model we will call this function which we will create uh after this function called open model for add and then pass in here date strr date string and then we will put semicolon here. We will go overlay dot append child and then pass add btn. So we are appending we are appending the child btn to this overlay overlay. add be a pen child add button. Then we will check uh an if condition here. If if if events today dolength is greater than or bigger than zero then we will create a constant which is edit button. We will get the edit button to equal document dotcreateelement. We are we are we are creating a new element which is a div element which is a button element in this case button element and then edit btn edit btn dot class name we will update the class name to be overlay overlay dashbtn and then we'll go edit btnext content equal edit edit btn dot onclick. When on clicking on this button, we want to uh run a function which is an arrow simple arrow function that stops propagation. So stop propagation and then open model for edit. We have to call this function and then pass in here events today. events today. Then we will call overlay dot append child. We have to append a new child which is edit btn the element that we have curtain here by going document create element button and then we have to outside of this if condition we will run cell.append child pass in here overlay and then cell do.append Append child. We have to append a new child which is event box. Also the calendar eel element dot append child. We have to append the child which is cell. So the JavaScript is generating the content for the HTML. Now we have finished writing this whole function which is called this render calendar. This function will render the calendar on the page. After this function, we will uh create a a new function or another function for adding event model. So we will go add event model function and then we will call it open model for add and then pass in here date strr date string. This function will go document getelement by id. We'll get a new element by id which is form action. This element this form dot value we will set the value as equal add. So we are simply here we are selecting or we are choosing an element using an id by going get element by id this form action and setting its value to equal the string add. The same thing goes for here. Document getelement by id get element element by id and then pass event id capital e dot value equal empty string document dot getelement by id and then choosing an an an element which is delete event id and setting its value as an empty string. The same for the course name. We have to go document getelement by id and then select course name element and we have to set its value as empty string. So we are initializing the values of the of the value as empty string. The same goes for the instructor name element. You have to go instructor and instructor capital n name. So the instructor name dot value attribute equals an empty string. The same thing goes also for the start date. We have to go get element by id and then choose start date dot value equals empty string. Now this time equals date strr date string. So we have to set the value as date strr capital s that we are passing into here. We are passing it to the function open model for add. Now we have more uh three more uh elements which is end date. We have to go document getelement by id and date and we have to set its value to the date strr also date string document dot getelement by ID and then choose start time capital T start time and then set its value attribute equal 09 and then colon zero document dot getelement by id choose end time we have to choose end time element and then go do value equals 10 and then put double zero here after a colon sign. Now after we have initialized the values as you can see some with empty values some with some default values that you are passing to the function and some with some starting point times. We can now go ahead and update them by going constant selector. We will we'll create a constant selector equals document dot getelement by id. We are getting an element by id. Get element by id and then pass in here events selector or event selector. So event one event and then capital s selector. Then we will create a constant wrapper. wrapper to uh has to equal document dot getelement by id and then choose the event selector wrapper and uh uh we have capital W capital S and a small E. So event selector wrapper and then put semicolon. If selector if if we do have a selector if we do have a selector and if we have also a wrapper available we can go ahead and do selector dot in HTML we will update the inner HTML to be an as an as an an empty string then wrapper dostyle dot display equals the none value. You have to make the display of the wrapper as none. Outside of this if condition, we will go and put in here modelement model eel dotstyle dot display set the display attribute to equal flex. So we are displaying the model by going modto element dotstyle dot set the display property to equal flex. Then we will create another a third function which is edit which is edit event edit event model by going function the keyword function and then name the function open model for edit. This function takes from me one parameter which is events on date. Events on date. And then this function will set the document dot getelement by id get element by id and then pass in here a form action set the value as equal edit. So we are setting the value of the form action. The action we are trying to do is editing. editing some event some existing event and then we have to go modle element dotstyle dot display we have to display it using a flex display mode then we will create a constant called selector equal document dot getelement by id and then pass in here event selector after that we will go constant wrapper equal document getelement by ID we will choose an an element called event selector wrapper and then we have to go selector dot in HTML update the in HTML we will update the in HTML to equal option so we are filling that select element or that select element with some options the option element in the drop-own menu we are populating some option elements each option represents one one whole task option disabled disabled and then selected. We have to pass in here se the two attributes disabled and selected and then right in here choose event dot dot and then slash option. Now we will loop through the events on date by going events on events on date dot for each for each function. This function will take from me one parameter as e and then put an arrow function. We have to create a constant option equals document. We have to create an element create element as option. So in dynamic web apps the JavaScript populates the HTML content. So in the JavaScript section we are creating new elements and populating some new HTML elements through JavaScript option dot value set the value to equal JSON. The JSON class dot stringify method we have to stringify it by passing the event to the stringify function. And then option dot text content text content equals tilda and then set here e.title title space dollar sign or put a parenthesis and then dollar sign select e dot start and then put some arrow here arrow icon and then initialize a dollar sign and then eend we have to access the end attribute selector append child we have to append this child to the option. So we are appending the child option to the selector and each time for each event we are appending the option element that we have created into here. We have created the option element and append it to the selector. Next I will create an if condition here to check events on date. If events on date.length if its length is greater than one then go wrapper.style dot display dot display equals block otherwise else. So other than that we will go wrapper.style dot display we will set the display to equal none. We have we have to disappear it by going wrapper. Do display equals none. Then we will handle event selection by going handle event selection. This is a new function that we will create after a minute. So JSON dot stringify pass in here events on date at index zero. It's called handle event selection. And we have to close this as semicolon. This function will handle the event selection by going function. We will create a new function called handle event selection and then pass in here event JSON as capital S capital O and N. JSON is short for JavaScript object notation. So this function will do populate will populate form from selected event from selected event constant event. This event constant will equal JSON.parse. We have to parse the JSON content and then pass in here event JSON the parameter event JSON. Then document we will select an element using using an id which is event id dot value equals event do id. The same thing goes for the get element by id which is delete event delete event id dot value equals event do id. The last thing we will create a constant which will takes from me course, instructor in this kind of syntax equals event dot title dotsplit. We have to split pass a string whites dash white space dot map. You have to map event and then arrow function e.trim. you have to trim it in case there are some uh beginning white spaces or ending white spaces. Then we will go document getelement by id and choose the course name element dot value equals course or we will set it as empty string. The same thing goes for the instructor name and for the whole. So I will copy paste it. So the only thing I have to change is the the names of the instructor name and the names of the elements. So course name and then we have to set this as instructor name. Instructor name and then start date, start date, end date, start time and then end time. Then we have to change here from course of course we need to make sure that we have uh that we set the value attribute for each one as its corresponding value. In this case, we will set it as instructor. Then we will set it as event dot start. Then event dot end. The same thing goes for the time. Event event dot start time. Now you may have the question from where do we have this event time or start time? We we didn't include it in the app. But we will create a new section in this video. Then we will update the HTML, CSS and and PHP to include this new feature which is the starting time and ending time. So in the next section we will dive into how to append this new feature of time, start time and end time for each for each of these files for the HTML and CSS and PHP files. How to include this new feature of starting time and ending time. The next we will create a function called close model. This this function will close a model which will take our modal element model element dot dot style dot display equals none. So make the display property as none for the model element. This function will close the model. Then I will create an a comment here month navigation. This function will navigate through months navigation by going month function and then name it as change month pass in here offset. We have to pass an offset pro parameter and then current date. We have to go to current date dot set month and then pass in here current date dot get month method plus offset. You have to add an offset parameter. So we are adding the offset parameter the value of this offset parameter to the get month that you have gotten from the current date and then render calendar we have to call that long function that we have that we have created above which is called render fun render calendar. It takes from me just one parameter which is current date current date. So we are passing current date and then to the render calendar function in order to render the calendar. The very last function is a live digital clock. So that clock will will not be will not work until we define this function. So live digital clock by going function and then name it as update clock. Update clock pass in here. It takes from me no parameters. Then constant now we will name the constant as now equals new date. We have to start a new date by going new date object or date class. The same thing we have to create a clock variable equals document dot getelement by ID. We need to get the element of the clock using its id. So document getelement by id and then get the element clock small clock.ext content we have to set the content of this element by by coming equals a an array. This array will text from me now the now constant which is a new instance of the date object now dot and then access the method get hours by going get hours method dot to string. We have to convert it into a string format. Pad start we have to pad it put some padding which is the max length as two and then comma we have to pass in here zero to add some padding for the hours. Now dot get minutes. We have to get minutes and then we have to convert it into a string by going to two string.pad start and then pass in here the max length as two comma and then the character zero. The same thing goes for the seconds. So get seconds method. This method will get the seconds dot to string. You have to convert it into a string. So it specifies a radics for converting numeric values to strings. to convert some numeric value to strings and then pad start passing here two comma zero. This array we have to join it by going dot join. So the join method is a popular method and then join based on this character colon and close it with a semicolon. Now the initialization process initialization by going render the calendar and pass in here current date and then update clock. We have to call the function or invoke the function update clock. So we are invoking invoke the function update clock and also we have to call the function set interval and the set interval will run the function every every uh predefined amount of time. So every second which is 1,00 uh milliseconds every second we will run this function which is update clock. So we will update the clock every second. The clock will be updated. So with that being said, we have finished writing our whole JS codes. I believe now our app will work. In the next section, as I tell as I told you, we will add a new feature which is adding the the start time and end time of each event. Then we will check and make sure that our app will work. So see you in this next section. In the last section, I noticed that I have some errors in the JavaScript and PHP files. If you go to the JavaScript file, I mistyped the comma and typed in semicolons instead of commas. So we have to replace these comma these semicolons as commas to prevent the errors and to get the JavaScript clean and ready to go. Once we solve this issue also in the PHP file in here I have mistyped the this notation as equals and then this notation I I have to change this equal sign as dash. So we have to change or to solve this problem rather than using an equal sign we have to use a dash sign or dash mark because we are accessing a method we are accessing a method called format and formatting the start as year- month-day. Okay. So now we have solved all of the problems and also in this section I will extend and incorporate a new feature in our app which is the start time and end and end time for each event. So not just we you not just we are using dates but also we are incorporating the time the start time and end time. So to to to achieve this goal, we have to go to the model here inside the model div and specifically after right after the end date right below the end date we have to add a label tag with a four attribute as start time with capital T and then write in here start time and then close this label tag. Then I will add an input of type time. So we have to add an input of type time or the type as time and then give it a name as start underscore time. Then the ID as start time and you have to make this input required. Also we will add another label tag label tag with a four attribute end time and then write in here end time. Then add a new input with a type of time with a type time and add a name for it as end underscore time and the id as end time and make this input required. So now we have achieved the codes for HTML successfully. We have to go to the CSS and also scroll up a little bit right in right here. We have to update or edit the event to be as the following. So the event now has a background of variable primary has a color white padding three pixels from the uh top and bottom and six pixels from right and left. We have to update this to be 6 pixels from top and bottom and 8 pixels from right and left. Then the border radius we will make it 6 pixels. Margin top as 6 pixels. And then font size 13 pixels rather than 14. Quesa as pointer and then line height I will add the line dash height as 1.4. Then display flex we will make the display flex for the event and we will give it flex direction as column. So it will be in column fashion. Align dash items items as flex- start. So that it starts from the beginning and then box and the box dash shadow. We will add a shadow for this event element zero pixels one pixel and then four pixel the spread rgba as 0 0 0 comma 0.1 then transition transform by the duration of 15 seconds and the effect is e is the next we will keep the hover effect as it is just we will decrease the amount by 1% by giving 1.02 and then we will add a new element in here which is event and then dot course. So we will style the course element by going font weight. We will make the font weight as bold to make the text bolder and opacity and we have to go font size 13 pixels. Make the font size 13 pixels. Also dotvent and then dot instructor. We will style the instructor as font size 12 pixels and then opacity as 0.85. So it has an opacity rate or opacity degree opacity degree of 0.85. Dot event and then select time element font size 12 pixels. margin dashtop as three pixels and then color as F3 F3 F3 F3 F3 F3 Yep. dotvent- meta we have to go font size 12 pixels and then color as E F line height 1.2. Now we have finished CSS. We can move towards PHP. Now in the PHP file we have to add the variables of time here. So we have to go start time. So right below this end end date variable we have to go and add a variable start time equals post and then choose the item start time. Otherwise, it will be an empty string. And then end time equals the variable the magical variable post underscore post. And then choose the element and underscore time and then put double question marks and then single quotation marks as empty string. The next edit is that we have to update this statement here. So insert into appointments we'll go statement and then equals connection prepare method insert into appointments we can keep that the same course name instructor name comma start date end date the same but now we have to add after end date we have to add start underscore time comma end underscore time because Now we are uh dealing with times and then we have to increase the number of question marks by two. When we bind the parameters bind parameters we have to increase the number of s letters by two s's. So now we have 1 2 3 4 5 6. We have six s letters. And then we have to bind the course instructor start and then end. After end we have to add start time variable and then comma end time variable. Then also we need to go down a little bit right below the end variable here end date we have to add a new variable which is start equals post. We will use the post variable and then select the attribute start underscore time start time otherwise it will be an empty string. The name of the variable is start time then end time equals post and then select the attribute end underscore time otherwise it will be an empty string. So now we have created two new variables start time equals post and then choose start underscore time attribute otherwise it will be empty string. The same goes for the end time we have selected from the post end underscore time and then otherwise it will be empty string. We have to update or edit the update statement by going update fid. Now we have to go and and start and and end date and then update the statement equals connection prepare. We have to prepare a new statement a new SQL statement by by update appointments set course name equals a question mark instructor name equals question mark start date equals question mark end date equals question mark. Then after end date we have to add comma start underscore time equals question mark comma end underscore time equals question mark as as you see where id equals question mark. Then when we bind the parameters we have to pass two more s's. So now we have S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S I 1 2 3 four five six we have six S's and one I and then we have to pass in here I uh course, instructor, comma, start, comma, end comm, id. No, now we want to remove ID and add rather than ID, start time, comma, end time, comma, id. So the last one must be ID. Okay. Then we can execute and close that statement safely. In the handle delete, we don't need to change anything. But the last block of code here that we have to change is this while loop. So now we have to add comma. After end we have to add comma then add string start underscore time equals row we have to access the row and then access the column start underscore time comma also we have to add end underscore time and then add and then add this value row choose the end underscore time value like that we have finished editing all of our file. Just one little small adjustment in the SQL when we go to the calendar uh when when when we go to the appointments inside our database calendar that we have created in the last section we have a calendar database and then we have appointments. We need to go to this table. As you can see we have ID, course name, instructor name, start date, end date and then and then created at we have to add two new columns which is start time and end time. So add two columns after end date which is start time of t of type time. So by going time choose time and then end time choose the type time and then we can save it like that. So now we have alter table appointments add start time of type time not null also after end date add also end time of type time not null alter start time. Now we have these two new columns in the table. As you can see, start time, end time of type time. In the next section, we will uh make sure that our app works successfully and we will preview it together. So, thanks for watching. See you in the next section. In this section, we will do the final touches of this app. As you notice, we don't have the calendar showed and we cannot choose the days and the days are not are not appeared in the calendar app. So to show the days to display the days we have to go to the index.php file and the first thing we have to include the calendar.php file by going PHP and then close the PHP tag. Then we have to include the file calendar.php and then put a semicolon. So we have to include the file calendar.php. The next update or edit right before the script tag we have to open another script tag or script command by going script and then slashcript. Inside this script we have to initialize a constant and call it events equals we have to open a PHP tag and close it. Then inside these between between the opening and closing tags we have to call the function JSON encode. We have to encode JSON to the and then pass to this function the value events events from DB. So this variable is coming from this file. We have this variable events from DB. This is a variable called events from DB that contains all of this information. So we have to encode it in a JSON format by passing it to the function JSON encode. And then we have to pass this option JSON unescaped unique code. Okay. Now we will close this by adding semicolon. Let's go to our app and then reload the page. Three, two, one, reload. Hooray. Now we have our calendar app ready to go. And it's now ready to book some days and do all of that stuff. First of all, you will notice that we have a nice and amazing header which contains the string course calendar my calendar project and also we have this clock counting up every second. Okay. And then we have this box which contains the name of the current month and the number of the current year. And also we can navigate back and forth. You can go back April, March and we can go forth by going June, July and August, September, November, December and then to the next year. You can notice it will shift the to the next year. Okay. Now if you if you reload the page you will be redirected to the current month to the current year and also to the current day. You will notice that the current day is highlighted with the background blue. So the current day is highlighted as a background of blue and you can add a new you can add new uh event. You you'll notice we have course title as an input. You can type in the course title for example HTML HTML course and then the instructor name for example me Muhammad and then it will start from this date. Okay. From from today till the end it will be for example 9. Okay. Then we will save that. Okay. So you'll notice that we have this event starting from the 6th of June till the 9th of June. Also you can edit its its name. Now notice we have its name as HTML course. Okay. We can edit it by going edit and then change its name for example to CSS course. Now you will uh if you save that it will become CSS course and also the nice thing in here you can edit and edit the instructor name. So for example instructor name as for example John and now save that it will become John. So the instructor of the course is John. If we zoom in to see we have now the instructor name as John and the course name as CSS course also we can edit the the the hours. So we can go start time edit it. Now it's starting from the 9:00 till 10:00. We can edit it to for example start from 1:00 a.m. to 5:00 a.m. And now and now we can save that it starts from 1:00 till 5:00. And that shows us the time for for every single day. Okay. So now we have 1:00 till 5:00. Also, we can add multiple events in the same day by going add and then add another event. For example, the course title as data science course and the instructor is for example called Smith. And now we can update the start date or we can keep it the same. End date it can span till the 19 of this month. Then we can update the the start time for example starts from 10 p.m. for example. You can also alter this alter it or modify it to 2 PM. And then the end time will be to 12 p.m. 12 p.m. or A.M. Okay. And then save. Yes. Now we have data science scores that the teacher is Smith. It's it overlaps with the with the CS scores till the the 9th of this month and then it it grows or it spans only till the 19th of this the 19th of this month. So we have built a robust and scalable app. I I am proud of you. Okay. Now we will also try to delete this event which is you can choose from here. If we try to edit this when when we have overlapping events and click on edit we have a input here h what this input does when we click over it you will notice that we have CSS course and data science course so it's telling you which course you want to edit which course you want to update in this case for example I want to update the CSS course and change its name from being CSS to be a JavaScript course by going JavaScript or for example for short let's keep it JS and then we can save that it's now JS course as you can see we have JS course JS course JS course and JS course and then it stops in the ninth at at the 9th of this month and the data science will span alone we can edit the also the for example JS scores and and and then delete it if you want to delete it you can delete it and it will be It will show a popup to confirm that procedure. Are you sure you want to delete this appointment? H yes I am sure. Okay. Now you will notice that we don't have that event anymore. And that is our app. As you can see we can add we can edit we can delete and also you can go into here and add another appointment. For example, uh we can name it as data analysis or or AI AI course or AI boot camp in this case and then instructor name for example as John and then the start date from uh 22 of this month June and the end date I want it to end on the the last day of this month. The the oct you can adjust it you can keep it the same and then save. You'll notice that we have here so 20 and 21 we have we don't have anything but from 22 till the 30 of this month we have these uh AI boot camp and the instructor is John also you can edit the end date the end date alone not just you can edit not just you can edit the course title or instructor name but also we can adjust the end date to end to end for example on the 27 of this month. save it will end on the 27th of this month and we don't have on 28 or 29 anything as you can see. Then we can also uh we when we have over this these days we have just add but when we when we have on an on a day that has existing events it shows add and edit. Okay, it shows add and edit and then we can edit the starting of this event to to start from the 20 of this month because right now we don't have this anything on on 20. Now it will start from 20 till 27. So this is that's it. That's the end of the calendar project app. We have built a Google calendar clone project. We have replicated the dates, the times uh features in the app and we have created successfully databases. And if you notice when we browse the database now in the in the course calendar calendar and then go to appointments. It's now storing in this database as you can see. Yes. Now we we have these HTML course. The instructor is Muhammad. Data science course instructor is Smith and start date, end date, created date also when it was created, start time and end time. So we have built this robust and scalable project using HTML, CSS, JavaScript, PHP and SQL. It's a full stack project and I hope you liked it. See you in the next tutorials and lectures.