- [Instructor] This is going to be an incredibly fun project
'cause it's one of the larger
and more difficult projects we've covered up to this point.
And we're gonna be creating a Google Calendar clone,
at least a simplified version of one.
Here we have the starting files,
this is what the starting HTML file looks like.
As you can see it contains
essentially a Google Calendar clone
where we can move backwards and forward through dates.
Since this is the static version,
obviously none of these buttons do anything,
but as you can see, we have plus buttons in the top corner
of all of our different days,
we have different events,
we have the button to view more events
if they overflow like this one does, and so on.
And if we look at the final version,
here's what the final version looks like
with no events added.
If we click on these buttons you can see
we can move through the different months
and if we want to add an event
we can just click a plus button,
give it a name, (keyboard clicking)
we can determine if it's all day or not,
we can even select some different times if we want.
So let's just say that this one is going to be
during these time periods,
so we'll say four o'clock to five o'clock,
it'll be green, and it'll just say name.
I click add, you can see it added a green event.
This one's a little bit grayed out because it's in the past.
If I go into a future month
and I just click on this, we'll make an all day event
with just a random name,
you can see it shows up right here.
Now the important thing to note
is that if these events overflow
part of the actual bonus of this project
is to deal with that overflow
'cause you can see once I add one more event
you can now see that they're overflowing
and I cannot fit them,
so I have this button down here that dynamically changes
if my calendar, for example, grows in size
or shrinks in size,
it'll actually dynamically change
because as you can see if I shrink this down,
you can see now it says three more
because it no longer is able to fit them
and it's purposely hiding all those other ones
and if I click here, you can see,
I can see all the different events
and if I click on one of these
you can see I can edit the event
or I can just delete it if I want.
Same thing here, I can click on this, let's delete that,
and now it can show all those different events.
So that dynamic growing and collapsing
is going to be part of the bonus project.
But overall, you can kind of see the general workflow
for how this works.
We have all day events and we also have events
that are not all day,
such as an event that looks something like this.
There we go.
Now if we move over to the instructions
I can go through exactly what's happening.
So we can come over here,
you can see that I included the style sheet that you need,
so this has all the different CSS styles you need
for this entire project
and this HTML file has all the HTML you'll need.
One thing you will note
is I included this root div right here,
this is just the root div
that React gives you automatically.
The only reason I included this
is because I actually put some styles on that root div,
as you can see here,
to make sure the styling is exactly as I want it to be.
So just make sure that you don't actually
copy this root div over because it's already part of React,
so you don't actually need this.
I just had to put this in the placeholder HTML.
And inside of the calendar here,
you can see we have a header section,
that just takes care of this whole top section up here.
We have this day section,
which is literally everything else
and that's just all of these different days.
And you'll notice the important thing
is that they have different classes.
So if it's a day that's not in the current month,
we add this class.
If it's a day in the past, we add this class and so on,
so make sure you include all that.
And we also have a section for all the different events
that we want to render as well.
Just make sure you really examine what's in this HTML
to determine what all the different class names
and everything are going to need to be
to make sure everything lines up properly
for handling all day and non all day events.
Now the other thing inside this
HTML that's important to note,
if I just collapse this down,
is you can see we have two different modals here.
By default, they are commented out
and the reason for that is if I comment this in
it'll actually show up on the screen.
'cause now if I comment this in and click save
and I just give this quick refresh,
you'll see that this modal is popping up
with all the different things inside of it.
This is essentially what the edit or add modal
is going to look like.
Now if I just comment that back out,
we can scroll up and we can take a look
at what the other modal will look like as well
and this one is just going to be for viewing
multiple events when it overflows.
As you can see when I save,
you can see that that shows up just fine.
Now if we go a little bit further
and we actually look at the instructions right here,
if we can just scroll down past all this
'cause I've kind of talked about what we're trying to do.
In the instructions what we want to do
is we wanna create a calendar component
that renders out the current month.
Just like we're doing here,
we're rendering out June
which is the current month I'm recording this in
and we wanna make sure
we have those buttons for going backward/forward
as well as the today button for jumping to the current day.
That should be pretty straightforward.
The next thing we need to do
is we're gonna add a plus button
that allows us to create a new event.
This is going to open up that modal.
So when I click on this plus button,
this modal right here that pops up,
that's what I want to pop up
when you click on that plus button.
The important thing about this is this name field,
this is required, and if you click the all day check box
I want this start and end time to be disabled.
As you can see, they are here
because you can only do all day or have a time.
So if it's not checked, we obviously need to include
a start time and an end time
and the important thing is the start time
must come after the end time,
otherwise we're going to get an error.
You can see if I click, this must be after the start time.
So then if I just change this, put it after the start time,
you can now see it actually properly add it.
Other things that we need to note
is there can be three different colors, red, blue, or green.
Make sure you label them exactly red, blue, or green
because CSS styles are actually
depending on them being called red, blue, or green.
As you can see here, we have that blue style for these ones,
this one's green for example.
So just make sure that you include that
inside of your actual code.
Lastly, I wanna make sure that you render out your events
inside of the calendar view.
So here you can see we're rendering all of our events
and the important thing is they must go in order
with all day events at the top
and then all your other events are ordered by start date.
So if we look at this one over here, you can see it goes
seven, eight, nine, ten, eleven, and so on.
So it's ordered perfectly in start date order.
Finally, if we click on any event,
we want to open up the edit modal
and this edit modal should be essentially exactly the same,
the only difference is it'll also have a delete button
and it pre-populates all the fields with the information
that's already part of your event,
pretty straightforward stuff.
Now for your bonus section,
they're actually not too difficult except for one of 'em.
The first one is just going to be storing your events
in local storage.
So that way if I do a refresh on my page,
all the events actually stay there
because if I go to July
you can see we have all those events still
inside our local storage.
The next one I wanna talk about is going to be the hard one
and that is that add or that plus button to view more.
So for example here, if I add another event,
we'll just give it some random information.
You can now see that I have this plus button
for adding two more here to say,
"Okay, there are two more events on this."
This is quite complicated to do
because it needs to first take into account resize,
so if my size changes and also, for example,
I delete an event and now I have enough space,
it's going to make sure it shows that space.
Do not get discouraged if you cannot complete this.
Doing this alone took me about a day
of full-time coding to complete, it's a very difficult task.
So again, don't at all feel bad
if you're unable to do this one,
but it's in the bonus section
because it's something that's good
to challenge yourself with
'cause it really tests your JavaScript
and React skills and combining the two together.
'Cause doing this is something
that's very difficult to do in React
'cause it really doesn't fall the React way of doing things.
So just experiment with it
and if you can't do it, that's perfectly okay.
Finally, the very last thing is the modals
should have a closing animation.
You notice here when I open up a modal and click close,
it actually does a closing animation.
To make sure you actually handle that inside of React,
there's an actual class you can add to your modal
called closing, that'll give you the animation,
and then just make sure you do not remove the modal
from the DOM until after that animation finishes.
Otherwise, you won't get the animation
'cause if you remove the modal from the DOM
it's not going to do any animation
unless you wait for this closing animation to finish.
So if you add this closing class,
it'll give you that closing animation for you
and then once that's done
you can remove the actual modal from the DOM.
The only other thing I have to say about this project
is you should try to build this entirely using TypeScript.
That's because this entire section
has been about TypeScript,
but if you don't feel comfortable with TypeScript,
you're not very good at it,
you can use normal JavaScript if you want,
but I'd highly recommend trying to do this in TypeScript.