Angular Calendar Scheduler Example: Step-by-Step Tutorial

Learn how to build Angular calendar component without using any additional UI libraries. It is not complex and you are in full control of styling and logic or your calendar

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
1:17 Project
2:26 Preparing state
7:22 Writing markup
10:10 Adding meetings
15:00 Adding active date
17:36 Highlighting active date
18:57 Today / Previous / Next

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[BrendanAlexander]

Yes. Luxon is awesome. I have been rolling my own calendar controls for a long time, using luxon. I have also rolled my own DateOnly wrapper type. Yes rolling your own calendar controls takes a little tinkering but is not that hard and is totally worth it. Am retooling to use signals. Great video got some nice tips!

[sfspmusic]

Not the first one here, but let's support Olex, I bought a couple of his courses and they were very useful

[DianaBichelashvili]

Thank you very much for such an amazing tutorial, highly appreciated ! very helpful for beginner

[cholo]

I'm starting to learn Angular, thanks for all your content, greats from Rome!!!

[sergiothomaz]

Hello Monsterlessons, how are you?

I would like to congratulate you on the excellent work on this video, thank you for your time and for sharing some of your knowledge.

I would like your help with a question: is it possible to disable all days in the calendar and leave only the days in which a meeting is scheduled in the calendar enabled and highlighted?

thanks

[rtpHarry]

I dont know if you have a day job but I'm imaging you sat alone in the office and as your coworkers go by in the hall you are just narrating your day and hammering through the code just like your videos.

[socraton]

Amazing, thanks a lot! Is it possible to make it like a custom angular components series? Like custom standalone table component that have all features sorting etc.

[jonathanrees]

Great video! Would be cool to see you build a date picker component as well using Luxon.

[geniusrana]

when I install luxon using npm install @types/luxon , and add it to calendar component, I get this error,
Pre-transform error: Failed to resolve import "luxon" from Does the file exist?
1:00:05 PM [vite] Internal server error: Failed to resolve import "luxon" from Does the file exist?

looks like with angular 18 it shows this error, can you help me to sort out this?
Thanks

[davidabell]

I had to pause the video when you started using luxon in the browser console to figure out how the heck you had gotten it to work. Turns out its available as a global object when browsing the luxon site. I wonder why nothing I see in the docs says its available there as a test environment...

[romanroman]

comparing to react, angular looks so much cleaner

[AldAbdiel]

One question. If we want to start the week from Sunday. Does luxon have something built in to configure easily? or will we need to handle those calculations.

Also I think another standard in calendar is to show 6 columns in the grid.

Really cool tutorial, your style rocks 😎

[davebudah]

Just as I requested when you created this in React.

[TheNacropolice]

IIRc, isn't the default type of "signal" also a writeable signal? You can still call Set and Update on a regular Signal

[petersonumoke]

first person here, I think, been waiting for this, can it be a series

[mgltuba]

how to set locale
or custom locale strings