Up next in 10
Angular ngx-calendar Example to Integrate Calendar Date & Time Picker in Browser Using TypeScript
Jan 30, 2025
Get the full source code of application here: https://codingshiksha.com/angular/angular-ngx-calendar-example-to-integrate-calendar-date-time-picker-in-browser-using-typescript/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
[Music]
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a angular
0:04
package which allows you to display this
0:08
uh nice little calendar weekly calendar
0:11
you can select the month date and time
0:13
as well we also have the weekly calendar
0:16
as well so we see the seven days in the
0:19
week you will select the date here and
0:21
also if you want to select particular
0:23
time as well alongside with the date and
0:26
inside the calendar we can even see the
0:29
time as well so this is actually a
0:31
package specifically designed for
0:33
angular uh just wait let me open the
0:35
zoomit tool so the name of the package
0:38
is ngx
0:40
calendar you can see we are also
0:42
displaying the dates as well and the
0:45
time as well specific so as you select
0:48
the date in the console the date
0:51
whichever date that you select it is
0:53
captured you will see so if you go to
0:56
npmjs.com uh this is actually the name
0:59
of the package package SS ngx calendar
1:02
this is actually the name of the
1:05
package the command is very simple you
1:08
install this package by using this
1:11
command it's almost it's a fairly new
1:13
package 22 weekly downloads so I've
1:15
written a step by-step blog post on my
1:17
website you can go to the description
1:19
link to get all the source code so I
1:22
will now delete everything and start
1:24
from
1:24
scratch so now right here the very first
1:29
thing we need to to do we need to go to
1:31
this file app. module. typescript file
1:34
and first of all we need to register
1:36
this module so we simply write the
1:38
import statement so we write import
1:42
ngx
1:44
calendar module and this will be coming
1:47
from This Ss ngx
1:50
calendar and after importing this we
1:53
need to add this module inside your
1:55
Imports array so we simply write here we
1:58
add this ngx
2:00
calendar module so after adding it we
2:04
simply close this file and we simply
2:08
move to the app. component.ts file this
2:11
is your typescript file so
2:15
here we will specify some options right
2:18
here so we will say calendar options I
2:20
will declare
2:22
a object empty object and also calendar
2:27
value so whatever date that you cect it
2:30
will be stored inside this variable so
2:34
calendar options calendar value and now
2:37
we move to the template file app.
2:39
component. HTML file and right here we
2:42
display the calendar so wherever you
2:45
want to display
2:47
we just have a div here and we just give
2:50
it a class here of container and inside
2:54
this we display the calendar using this
2:58
directive which is n ngx
3:01
calendar and
3:05
uh inside this you can see as soon as
3:08
you write this directive you will see
3:10
this uh nice little calendar showing and
3:13
uh it automatically displays the current
3:16
month here which is January
3:18
2025 and you actually see the actual
3:22
calendar and it also take some options
3:25
right here you can directly pass some
3:27
options the first option it takes is uh
3:32
the
3:35
options parameter so we can directly
3:38
pass if you also want to pass some
3:41
options so for this we have declared a
3:44
variable calendar options and the second
3:48
you can bind and on
3:49
choose event so whenever you select any
3:53
date we will bind a function here on
3:56
choose date and this event object will
3:59
be automatically be passed here to this
4:02
function so we are binding this function
4:04
right here so now we need to Define this
4:07
function in the typescript code
4:10
so we simply Define this on choose date
4:13
function so what this function does it
4:16
console logs the date that you select
4:19
and then we store this value in the
4:21
calendar value so now what happens if
4:24
you select any date and check the
4:26
console you will see the date will be
4:28
selected and it will be returned so any
4:30
date that you select this call back
4:32
function will execute and you will be
4:34
getting your date which is
4:36
selected so now we can show a weekly
4:43
calendar so we use the same directive
4:47
which is ngx calendar but this time this
4:50
will be a slightly different
4:53
calendar so here you can actually
4:57
pass a option here
5:00
so again we'll be passing the
5:03
options so this
5:10
time I will make an uh new variable
5:14
which will be options to so I will just
5:17
Define
5:22
this so this will be an object right
5:26
here where I will make this property is
5:29
weak to true so what this actually does
5:32
it actually displays a weekly calendar
5:35
so you see the seven days in the week so
5:39
it's a weekly calendar you only see the
5:41
seven days which are there in the week
5:44
like this and also if you also want the
5:47
time as well you will select the second
5:50
option here is with time and you will
5:53
set it to true so now what happens the
5:56
time will also
5:58
display alongside side with the date you
6:01
see all the 24 hours so you can select
6:05
the date and the time as well this is
6:08
your weekly calendar alongside with the
6:10
date and time so this is a nice little
6:12
package in angular if you want to
6:14
display calendar to select to allow user
6:16
to select date and time alongside with
6:18
the time as well so thank you very much
6:21
for watching this video and also check
6:23
out my website as well free mediat
6:25
tools.com uh which contains thousands of
6:27
tools regarding audio video and image
6:30
and I will be seeing you guys in the
6:32
next video
#Time & Calendars