Hi everybody. Something you may see on a lot of pages is that people have calendars embedded into their sites. Now one of the things i'd hope you would figure out by now is that you do not want to try to hard code something like a calendar. It just doesn't make sense, because Google already provides all the code for Google Calendar. Different software is usually going to provide the code that you need to embed. That's the term they use. Their different tools or widgets onto your site. So while the code is provided, it's not always necessarily compliant. We're going to worry about that later, though. Right now I just want to show you how you can use simple steps to embed a calendar onto your page. Let's get started. What I have here is some very simple, pretty much blank, HTML template. And what I want to do is insert my Google Calendar. So I'm going to go over to the actual calendar itself and take a look along the left-hand side. If you look around here you can see all the different calendars that you have access to. I have my main calendars and then some other ones as well. What I want to do is when I put my mouse over the Wines Elementary PTO, you're going to see a little drop down menu that looks like that. Clicked on it. Drop down menu. And one of the options I can choose is Calendar Settings. As soon as I do this, you can get to a page that may look a little bit intimidating. There's a lot of different code in here. You can talk about sharing calendars or editing it. What I want you to do is I want you to look right away for anything. You can even use a search for paste this code into your website. And if you do that, there will be this little tiny piece of code down here at the bottom that you can just copy and paste. So let's start with that option. And I need to make sure that I save my file. After I save it, I can go over here, refresh my page and there I have a really big calendar that's pretty much mostly because I had kind of blown up the screen so we could see everything. So, without having to really do anything, I've gone in and I've put my Google Calendar in. Now, it's really likely that you're not going to want the default settings. So, let's head back over to our other screen and take a look at some of our options. When we go in here, we can see that it says customize the color, size and other options. And for those who've never taken a web design course, that would be kind of the first thing you would do. But I would like to go back to the code for just a second so we can kind of feel smart for a minute, okay? Because when we do, you'll be able to look in and say, hey, I kind of know what's going on with a lot of this code. I've got, the height is in here, the width is in here. So if you want it smaller, you can kind of change that yourself. Although I hope you would do it with CSS. You can see that there's other styling as well. I have something called style, border 0, different things like that. So, other people might not know how to go in and change that but you do. But there are other options we can look at as well. You can decide whether or not you want to show the title of the calendar. All right, you can decide do you want the navigation buttons. Do you want to be able to have people go from month to month. You can have the date. Do you care about the print icon? Now, normally you might not think about these things but since you need to make a responsive page, you might see how you might want some things turned on for the large screen view and turned off for the small screen. One of my favorite things to do is to have the month view on a large screen but the agenda view on a small screen. Let's take a look at how it looks different. You can notice, well, there isn't a whole lot of activities. But you can see it's a nice little list instead of a whole calendar. Once you're done, once you have it looking just perfect for your site, go ahead and go back in. Grab all the code. Copy and paste it into your HTML. And for now, we're going to be all set. All right? So I'm hoping that you'll have the confidence to go in and try adding these little things. The difference though between you and someone else who hasn't had experience in the past is that when we're done, we're going to validate these kind of things and make sure that we've made them accessible and clean and stylish for everybody. Good luck.
