Embedding a Google Calendar

Loading...

Do curso por University of Michigan

Web Design for Everybody Capstone

253 classificações

University of Michigan

Web Design for Everybody Capstone

253 classificações

Curso 5 de 5 em Specialization Web Design para todos

The capstone will develop a professional-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms. Adherence to validation and accessibility standards will be required. The evolving student implementations will be reviewed each week by capstone peers and teaching assistants to make sure that the student keeps up with the agenda of the course. Upon completion of this course students will feel comfortable creating and/or updating existing front-end sites, utilizing existing frameworks, and testing sites for accessibility compliance. This course is only open to students who have completed the first four courses in the Web Design for Everybody specialization: Introduction to HTML5, Introduction to CSS3, Interactivity with JavaScript, and Advanced Styling with Responsive Design.

Na lição

Week Three: Review and Preparation Phase

This week you will continue to review your fellow students designs. Feedback will be based on layout, proposed content, and accessibility. The goal is that these peer reviews will inspire you to attempt something more on your site (or provide the feedback that lets you know you may want to scale down your own expectations.) You will begin to create the content of your site as you wait for the reviews of your project to be created.

Sticky Footers10:24

Embedding a Google Calendar5:03

Using Bootstrap to Add a Carousel7:18

Adding a Lightbox Plugin5:56

Font Awesome5:57

Conheça os instrutores

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Professor
School of Information

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.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play