Up next in 10
Build a React.js Google Calendar API to Create Events and Render Calendar in Browser in JSX
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/e62f468420f86f5e802cbd21e472c2bf
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to use
0:04
the Google Calendar API to show this
0:07
full screen calendar on the react CH
0:10
application so there is a specific
0:12
module that we can use to show the
0:14
monthly calendar and you can see the
0:17
today's date or we can back as
0:21
well so this is August 1
0:24
20124 can see this full calendar weekly
0:28
as well day wise as as
0:30
well so you can have this Google
0:34
Calendar showing you can basically
0:36
create events for certain time intervals
0:39
and see these events so it's you can do
0:41
it programmatically inside react shs
0:43
code so it's a weekly code agenda
0:48
monthly you can show this calendar full
0:51
screen calendar and uh like this you can
0:54
click on back and then click on next as
0:57
well so to see the future calendar
1:00
future dates as well so this is actually
1:03
the module uh the module name is if you
1:06
go to npmjs.com
1:08
just search for this package which is
1:10
react big
1:17
calendar so here you can specify events
1:20
as well so this is actually the command
1:22
I've already installed it it's having
1:24
almost 158,000 weekly
1:27
downloads and it's inspired by full
1:29
calendar which is essentially a
1:32
JavaScript calendar package open source
1:37
so it's a premium one but this is open
1:40
source it's free source uh it's a
1:42
totally free it's based upon Google
1:44
cender API so now to get started just
1:47
create a simple functional
1:49
component and now to import this package
1:52
we simply write our import statement and
1:56
just say
1:58
import calendar
2:00
and your moment
2:03
localizer which all will be coming from
2:06
react big
2:08
calendar and then we also need the
2:10
moment date processing Library you also
2:14
import this and also we need the CSS
2:17
file is that react Pi
2:20
Calender and it's available in the lip
2:23
folder CSS
2:26
react
2:28
Big K
2:30
do CSS so we import the CSS file as well
2:34
and then we specify the
2:36
localizer so moment localizer we call it
2:40
and pass it moment
2:43
reference so that's all and then we
2:45
create a certain events so an array of
2:49
events with dates and title so if you
2:53
are
2:54
planning for certain dates you can put a
2:57
team meeting on this date start starting
3:00
and the ending date then we have the
3:01
lunch break on this date then we have
3:04
the project review on this date so we
3:06
can create events right here now we can
3:09
plot these events in the calendar so in
3:12
the jsx itself
3:15
we put the calendar right here render it
3:19
by this component and it actually takes
3:21
some options first is your localizer
3:24
which is localizer then it takes the
3:27
array of events which is located in
3:29
inside my events
3:32
variable and then it actually take the
3:35
start accessor date which is
3:40
start end accessor will be
3:44
end and the style of the calendar I'll
3:47
say the height will be
3:51
500 so if you refresh now go to your
3:54
application
4:00
so the calendar displays and you will
4:02
see it has put these meetings team
4:05
meeting on this date lunch break project
4:07
review so Monday Tuesday Wednesday so
4:10
depending upon which date that you
4:12
specify it will plot these events so you
4:15
will able to see the calendar you can go
4:17
to the Future Past as well so in this
4:20
way guys you can use this dependency
4:23
which is totally free it is based upon
4:26
Google Calendar API to render this full
4:28
screen calendar and just plot events so
4:32
thank you very much for watching this
4:34
video and do check out my website as
4:36
well free mediat tools.com uh which
4:40
contains thousands of tools regarding
4:42
audio video nmh and I will be seeing you
4:45
guys in the next video
#Time & Calendars