1
00:00:00,150 --> 00:00:02,580
- [Instructor] This is going
to be an incredibly fun project

2
00:00:02,580 --> 00:00:03,960
'cause it's one of the larger

3
00:00:03,960 --> 00:00:06,750
and more difficult projects
we've covered up to this point.

4
00:00:06,750 --> 00:00:09,480
And we're gonna be creating
a Google Calendar clone,

5
00:00:09,480 --> 00:00:11,550
at least a simplified version of one.

6
00:00:11,550 --> 00:00:13,110
Here we have the starting files,

7
00:00:13,110 --> 00:00:15,750
this is what the starting
HTML file looks like.

8
00:00:15,750 --> 00:00:16,980
As you can see it contains

9
00:00:16,980 --> 00:00:18,900
essentially a Google Calendar clone

10
00:00:18,900 --> 00:00:21,210
where we can move backwards
and forward through dates.

11
00:00:21,210 --> 00:00:22,620
Since this is the static version,

12
00:00:22,620 --> 00:00:24,510
obviously none of these
buttons do anything,

13
00:00:24,510 --> 00:00:26,700
but as you can see, we have
plus buttons in the top corner

14
00:00:26,700 --> 00:00:27,960
of all of our different days,

15
00:00:27,960 --> 00:00:28,860
we have different events,

16
00:00:28,860 --> 00:00:30,750
we have the button to view more events

17
00:00:30,750 --> 00:00:33,570
if they overflow like
this one does, and so on.

18
00:00:33,570 --> 00:00:34,890
And if we look at the final version,

19
00:00:34,890 --> 00:00:36,390
here's what the final version looks like

20
00:00:36,390 --> 00:00:37,620
with no events added.

21
00:00:37,620 --> 00:00:38,970
If we click on these buttons you can see

22
00:00:38,970 --> 00:00:40,950
we can move through the different months

23
00:00:40,950 --> 00:00:42,000
and if we want to add an event

24
00:00:42,000 --> 00:00:43,710
we can just click a plus button,

25
00:00:43,710 --> 00:00:44,850
give it a name,
(keyboard clicking)

26
00:00:44,850 --> 00:00:46,650
we can determine if it's all day or not,

27
00:00:46,650 --> 00:00:48,570
we can even select some
different times if we want.

28
00:00:48,570 --> 00:00:50,280
So let's just say that
this one is going to be

29
00:00:50,280 --> 00:00:51,750
during these time periods,

30
00:00:51,750 --> 00:00:54,570
so we'll say four o'clock to five o'clock,

31
00:00:54,570 --> 00:00:56,820
it'll be green, and it'll just say name.

32
00:00:56,820 --> 00:00:58,980
I click add, you can see
it added a green event.

33
00:00:58,980 --> 00:01:01,500
This one's a little bit grayed
out because it's in the past.

34
00:01:01,500 --> 00:01:02,790
If I go into a future month

35
00:01:02,790 --> 00:01:04,620
and I just click on this,
we'll make an all day event

36
00:01:04,620 --> 00:01:05,730
with just a random name,

37
00:01:05,730 --> 00:01:07,500
you can see it shows up right here.

38
00:01:07,500 --> 00:01:08,970
Now the important thing to note

39
00:01:08,970 --> 00:01:10,470
is that if these events overflow

40
00:01:10,470 --> 00:01:12,300
part of the actual bonus of this project

41
00:01:12,300 --> 00:01:13,470
is to deal with that overflow

42
00:01:13,470 --> 00:01:15,180
'cause you can see once
I add one more event

43
00:01:15,180 --> 00:01:16,530
you can now see that they're overflowing

44
00:01:16,530 --> 00:01:17,700
and I cannot fit them,

45
00:01:17,700 --> 00:01:20,550
so I have this button down
here that dynamically changes

46
00:01:20,550 --> 00:01:23,130
if my calendar, for example, grows in size

47
00:01:23,130 --> 00:01:24,240
or shrinks in size,

48
00:01:24,240 --> 00:01:25,560
it'll actually dynamically change

49
00:01:25,560 --> 00:01:27,480
because as you can see
if I shrink this down,

50
00:01:27,480 --> 00:01:28,890
you can see now it says three more

51
00:01:28,890 --> 00:01:30,600
because it no longer is able to fit them

52
00:01:30,600 --> 00:01:32,460
and it's purposely hiding
all those other ones

53
00:01:32,460 --> 00:01:33,450
and if I click here, you can see,

54
00:01:33,450 --> 00:01:34,767
I can see all the different events

55
00:01:34,767 --> 00:01:35,940
and if I click on one of these

56
00:01:35,940 --> 00:01:37,410
you can see I can edit the event

57
00:01:37,410 --> 00:01:39,210
or I can just delete it if I want.

58
00:01:39,210 --> 00:01:40,920
Same thing here, I can click
on this, let's delete that,

59
00:01:40,920 --> 00:01:42,660
and now it can show all
those different events.

60
00:01:42,660 --> 00:01:44,400
So that dynamic growing and collapsing

61
00:01:44,400 --> 00:01:46,380
is going to be part of the bonus project.

62
00:01:46,380 --> 00:01:48,360
But overall, you can kind
of see the general workflow

63
00:01:48,360 --> 00:01:49,380
for how this works.

64
00:01:49,380 --> 00:01:51,450
We have all day events
and we also have events

65
00:01:51,450 --> 00:01:52,320
that are not all day,

66
00:01:52,320 --> 00:01:55,980
such as an event that
looks something like this.

67
00:01:55,980 --> 00:01:56,880
There we go.

68
00:01:56,880 --> 00:01:58,290
Now if we move over to the instructions

69
00:01:58,290 --> 00:01:59,880
I can go through exactly what's happening.

70
00:01:59,880 --> 00:02:00,713
So we can come over here,

71
00:02:00,713 --> 00:02:02,940
you can see that I included
the style sheet that you need,

72
00:02:02,940 --> 00:02:05,070
so this has all the
different CSS styles you need

73
00:02:05,070 --> 00:02:06,180
for this entire project

74
00:02:06,180 --> 00:02:09,000
and this HTML file has
all the HTML you'll need.

75
00:02:09,000 --> 00:02:09,833
One thing you will note

76
00:02:09,833 --> 00:02:11,820
is I included this root div right here,

77
00:02:11,820 --> 00:02:12,930
this is just the root div

78
00:02:12,930 --> 00:02:14,580
that React gives you automatically.

79
00:02:14,580 --> 00:02:15,780
The only reason I included this

80
00:02:15,780 --> 00:02:18,120
is because I actually put
some styles on that root div,

81
00:02:18,120 --> 00:02:19,170
as you can see here,

82
00:02:19,170 --> 00:02:22,170
to make sure the styling is
exactly as I want it to be.

83
00:02:22,170 --> 00:02:23,580
So just make sure that you don't actually

84
00:02:23,580 --> 00:02:26,580
copy this root div over because
it's already part of React,

85
00:02:26,580 --> 00:02:27,690
so you don't actually need this.

86
00:02:27,690 --> 00:02:30,570
I just had to put this
in the placeholder HTML.

87
00:02:30,570 --> 00:02:31,740
And inside of the calendar here,

88
00:02:31,740 --> 00:02:33,180
you can see we have a header section,

89
00:02:33,180 --> 00:02:35,670
that just takes care of this
whole top section up here.

90
00:02:35,670 --> 00:02:36,780
We have this day section,

91
00:02:36,780 --> 00:02:37,860
which is literally everything else

92
00:02:37,860 --> 00:02:39,660
and that's just all of
these different days.

93
00:02:39,660 --> 00:02:40,920
And you'll notice the important thing

94
00:02:40,920 --> 00:02:42,210
is that they have different classes.

95
00:02:42,210 --> 00:02:43,950
So if it's a day that's
not in the current month,

96
00:02:43,950 --> 00:02:44,940
we add this class.

97
00:02:44,940 --> 00:02:47,850
If it's a day in the past,
we add this class and so on,

98
00:02:47,850 --> 00:02:48,960
so make sure you include all that.

99
00:02:48,960 --> 00:02:51,150
And we also have a section
for all the different events

100
00:02:51,150 --> 00:02:52,710
that we want to render as well.

101
00:02:52,710 --> 00:02:54,990
Just make sure you really
examine what's in this HTML

102
00:02:54,990 --> 00:02:56,850
to determine what all
the different class names

103
00:02:56,850 --> 00:02:58,200
and everything are going to need to be

104
00:02:58,200 --> 00:02:59,850
to make sure everything lines up properly

105
00:02:59,850 --> 00:03:02,910
for handling all day
and non all day events.

106
00:03:02,910 --> 00:03:04,770
Now the other thing inside this

107
00:03:04,770 --> 00:03:06,150
HTML that's important to note,

108
00:03:06,150 --> 00:03:07,110
if I just collapse this down,

109
00:03:07,110 --> 00:03:08,850
is you can see we have
two different modals here.

110
00:03:08,850 --> 00:03:10,500
By default, they are commented out

111
00:03:10,500 --> 00:03:12,780
and the reason for that
is if I comment this in

112
00:03:12,780 --> 00:03:14,310
it'll actually show up on the screen.

113
00:03:14,310 --> 00:03:16,320
'cause now if I comment
this in and click save

114
00:03:16,320 --> 00:03:17,700
and I just give this quick refresh,

115
00:03:17,700 --> 00:03:19,260
you'll see that this modal is popping up

116
00:03:19,260 --> 00:03:20,550
with all the different
things inside of it.

117
00:03:20,550 --> 00:03:22,590
This is essentially what
the edit or add modal

118
00:03:22,590 --> 00:03:23,670
is going to look like.

119
00:03:23,670 --> 00:03:25,320
Now if I just comment that back out,

120
00:03:25,320 --> 00:03:26,730
we can scroll up and we can take a look

121
00:03:26,730 --> 00:03:28,320
at what the other modal
will look like as well

122
00:03:28,320 --> 00:03:29,790
and this one is just
going to be for viewing

123
00:03:29,790 --> 00:03:31,530
multiple events when it overflows.

124
00:03:31,530 --> 00:03:32,400
As you can see when I save,

125
00:03:32,400 --> 00:03:34,650
you can see that that shows up just fine.

126
00:03:34,650 --> 00:03:35,640
Now if we go a little bit further

127
00:03:35,640 --> 00:03:37,440
and we actually look at the
instructions right here,

128
00:03:37,440 --> 00:03:38,880
if we can just scroll down past all this

129
00:03:38,880 --> 00:03:40,440
'cause I've kind of talked
about what we're trying to do.

130
00:03:40,440 --> 00:03:41,670
In the instructions what we want to do

131
00:03:41,670 --> 00:03:43,470
is we wanna create a calendar component

132
00:03:43,470 --> 00:03:44,940
that renders out the current month.

133
00:03:44,940 --> 00:03:45,773
Just like we're doing here,

134
00:03:45,773 --> 00:03:46,606
we're rendering out June

135
00:03:46,606 --> 00:03:48,390
which is the current month
I'm recording this in

136
00:03:48,390 --> 00:03:49,223
and we wanna make sure

137
00:03:49,223 --> 00:03:50,640
we have those buttons for
going backward/forward

138
00:03:50,640 --> 00:03:53,460
as well as the today button
for jumping to the current day.

139
00:03:53,460 --> 00:03:55,140
That should be pretty straightforward.

140
00:03:55,140 --> 00:03:56,040
The next thing we need to do

141
00:03:56,040 --> 00:03:57,360
is we're gonna add a plus button

142
00:03:57,360 --> 00:03:58,980
that allows us to create a new event.

143
00:03:58,980 --> 00:04:00,480
This is going to open up that modal.

144
00:04:00,480 --> 00:04:01,950
So when I click on this plus button,

145
00:04:01,950 --> 00:04:03,600
this modal right here that pops up,

146
00:04:03,600 --> 00:04:04,890
that's what I want to pop up

147
00:04:04,890 --> 00:04:06,420
when you click on that plus button.

148
00:04:06,420 --> 00:04:08,250
The important thing about
this is this name field,

149
00:04:08,250 --> 00:04:11,160
this is required, and if you
click the all day check box

150
00:04:11,160 --> 00:04:13,200
I want this start and
end time to be disabled.

151
00:04:13,200 --> 00:04:14,250
As you can see, they are here

152
00:04:14,250 --> 00:04:16,920
because you can only do
all day or have a time.

153
00:04:16,920 --> 00:04:18,870
So if it's not checked, we
obviously need to include

154
00:04:18,870 --> 00:04:20,490
a start time and an end time

155
00:04:20,490 --> 00:04:22,050
and the important thing is the start time

156
00:04:22,050 --> 00:04:23,160
must come after the end time,

157
00:04:23,160 --> 00:04:24,510
otherwise we're going to get an error.

158
00:04:24,510 --> 00:04:27,180
You can see if I click, this
must be after the start time.

159
00:04:27,180 --> 00:04:29,550
So then if I just change this,
put it after the start time,

160
00:04:29,550 --> 00:04:31,920
you can now see it
actually properly add it.

161
00:04:31,920 --> 00:04:33,000
Other things that we need to note

162
00:04:33,000 --> 00:04:35,430
is there can be three different
colors, red, blue, or green.

163
00:04:35,430 --> 00:04:37,830
Make sure you label them
exactly red, blue, or green

164
00:04:37,830 --> 00:04:39,300
because CSS styles are actually

165
00:04:39,300 --> 00:04:41,550
depending on them being
called red, blue, or green.

166
00:04:41,550 --> 00:04:44,100
As you can see here, we have
that blue style for these ones,

167
00:04:44,100 --> 00:04:45,180
this one's green for example.

168
00:04:45,180 --> 00:04:46,500
So just make sure that you include that

169
00:04:46,500 --> 00:04:48,390
inside of your actual code.

170
00:04:48,390 --> 00:04:50,490
Lastly, I wanna make sure that
you render out your events

171
00:04:50,490 --> 00:04:51,540
inside of the calendar view.

172
00:04:51,540 --> 00:04:53,700
So here you can see we're
rendering all of our events

173
00:04:53,700 --> 00:04:55,200
and the important thing
is they must go in order

174
00:04:55,200 --> 00:04:56,610
with all day events at the top

175
00:04:56,610 --> 00:04:59,370
and then all your other events
are ordered by start date.

176
00:04:59,370 --> 00:05:01,140
So if we look at this one
over here, you can see it goes

177
00:05:01,140 --> 00:05:03,300
seven, eight, nine,
ten, eleven, and so on.

178
00:05:03,300 --> 00:05:05,940
So it's ordered perfectly
in start date order.

179
00:05:05,940 --> 00:05:07,620
Finally, if we click on any event,

180
00:05:07,620 --> 00:05:09,120
we want to open up the edit modal

181
00:05:09,120 --> 00:05:11,250
and this edit modal should be
essentially exactly the same,

182
00:05:11,250 --> 00:05:13,320
the only difference is it'll
also have a delete button

183
00:05:13,320 --> 00:05:15,600
and it pre-populates all the
fields with the information

184
00:05:15,600 --> 00:05:17,040
that's already part of your event,

185
00:05:17,040 --> 00:05:18,660
pretty straightforward stuff.

186
00:05:18,660 --> 00:05:19,740
Now for your bonus section,

187
00:05:19,740 --> 00:05:21,990
they're actually not too
difficult except for one of 'em.

188
00:05:21,990 --> 00:05:23,730
The first one is just going
to be storing your events

189
00:05:23,730 --> 00:05:24,563
in local storage.

190
00:05:24,563 --> 00:05:26,430
So that way if I do a refresh on my page,

191
00:05:26,430 --> 00:05:27,570
all the events actually stay there

192
00:05:27,570 --> 00:05:28,403
because if I go to July

193
00:05:28,403 --> 00:05:30,000
you can see we have all those events still

194
00:05:30,000 --> 00:05:31,590
inside our local storage.

195
00:05:31,590 --> 00:05:33,660
The next one I wanna talk about
is going to be the hard one

196
00:05:33,660 --> 00:05:36,210
and that is that add or that
plus button to view more.

197
00:05:36,210 --> 00:05:38,250
So for example here,
if I add another event,

198
00:05:38,250 --> 00:05:40,140
we'll just give it some
random information.

199
00:05:40,140 --> 00:05:41,520
You can now see that I
have this plus button

200
00:05:41,520 --> 00:05:42,817
for adding two more here to say,

201
00:05:42,817 --> 00:05:44,640
"Okay, there are two more events on this."

202
00:05:44,640 --> 00:05:46,320
This is quite complicated to do

203
00:05:46,320 --> 00:05:48,300
because it needs to first
take into account resize,

204
00:05:48,300 --> 00:05:50,580
so if my size changes
and also, for example,

205
00:05:50,580 --> 00:05:52,560
I delete an event and
now I have enough space,

206
00:05:52,560 --> 00:05:54,360
it's going to make sure
it shows that space.

207
00:05:54,360 --> 00:05:56,730
Do not get discouraged if
you cannot complete this.

208
00:05:56,730 --> 00:05:58,830
Doing this alone took me about a day

209
00:05:58,830 --> 00:06:01,620
of full-time coding to complete,
it's a very difficult task.

210
00:06:01,620 --> 00:06:03,090
So again, don't at all feel bad

211
00:06:03,090 --> 00:06:04,410
if you're unable to do this one,

212
00:06:04,410 --> 00:06:05,400
but it's in the bonus section

213
00:06:05,400 --> 00:06:06,360
because it's something that's good

214
00:06:06,360 --> 00:06:07,290
to challenge yourself with

215
00:06:07,290 --> 00:06:09,000
'cause it really tests your JavaScript

216
00:06:09,000 --> 00:06:11,400
and React skills and
combining the two together.

217
00:06:11,400 --> 00:06:12,600
'Cause doing this is something

218
00:06:12,600 --> 00:06:14,100
that's very difficult to do in React

219
00:06:14,100 --> 00:06:16,650
'cause it really doesn't fall
the React way of doing things.

220
00:06:16,650 --> 00:06:17,820
So just experiment with it

221
00:06:17,820 --> 00:06:20,640
and if you can't do it,
that's perfectly okay.

222
00:06:20,640 --> 00:06:22,560
Finally, the very last thing is the modals

223
00:06:22,560 --> 00:06:24,300
should have a closing animation.

224
00:06:24,300 --> 00:06:26,310
You notice here when I open
up a modal and click close,

225
00:06:26,310 --> 00:06:28,440
it actually does a closing animation.

226
00:06:28,440 --> 00:06:30,450
To make sure you actually
handle that inside of React,

227
00:06:30,450 --> 00:06:32,310
there's an actual class
you can add to your modal

228
00:06:32,310 --> 00:06:34,620
called closing, that'll
give you the animation,

229
00:06:34,620 --> 00:06:36,870
and then just make sure
you do not remove the modal

230
00:06:36,870 --> 00:06:39,450
from the DOM until after
that animation finishes.

231
00:06:39,450 --> 00:06:40,860
Otherwise, you won't get the animation

232
00:06:40,860 --> 00:06:42,810
'cause if you remove
the modal from the DOM

233
00:06:42,810 --> 00:06:44,280
it's not going to do any animation

234
00:06:44,280 --> 00:06:46,650
unless you wait for this
closing animation to finish.

235
00:06:46,650 --> 00:06:48,120
So if you add this closing class,

236
00:06:48,120 --> 00:06:50,370
it'll give you that
closing animation for you

237
00:06:50,370 --> 00:06:51,300
and then once that's done

238
00:06:51,300 --> 00:06:53,820
you can remove the actual
modal from the DOM.

239
00:06:53,820 --> 00:06:55,620
The only other thing I have
to say about this project

240
00:06:55,620 --> 00:06:58,500
is you should try to build
this entirely using TypeScript.

241
00:06:58,500 --> 00:06:59,760
That's because this entire section

242
00:06:59,760 --> 00:07:00,810
has been about TypeScript,

243
00:07:00,810 --> 00:07:02,220
but if you don't feel
comfortable with TypeScript,

244
00:07:02,220 --> 00:07:03,210
you're not very good at it,

245
00:07:03,210 --> 00:07:05,160
you can use normal JavaScript if you want,

246
00:07:05,160 --> 00:07:08,010
but I'd highly recommend trying
to do this in TypeScript.