Build Angular Calendar Component Yourself - No UI Libraries Needed

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
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
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Javascript interview questions - monsterlessons-academy.com/co...
► Typescript interview questions - monsterlessons-academy.com/co...
► React interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@MonsterlessonsAcademy]

WATCH NEXT: Build Custom Interactive Calendar React Without UI Libraries - kzbin.info/www/bejne/lYDKZpR6h9KKnM0si=Iw9zw7WYX69zvu2z

[@sfspmusic]

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

[@davebudah]

I have bought a couple as well and I intend to buy more, unfortunately I specialize in Angular so I cant buy React courses. Olex is a great tutor.

[@MonsterlessonsAcademy]

Thank you!

[@Brendan2Alexander]

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!

[@MonsterlessonsAcademy]

Glad to hear that!

[@DianaBichelashvili]

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

[@MonsterlessonsAcademy]

You're very welcome!

[@cholo2605]

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

[@MonsterlessonsAcademy]

Great to hear!

[@cholo2605]

Love your intro❤😅

[@davebudah]

Just as I requested when you created this in React.

[@MonsterlessonsAcademy]

For some reason your comments are always blocked by KZbin moderation system, so don't be offended if I don't answer them :) I just luckily made both videos as your comment wasn't visible for me.

[@fawzzhkz9023]

❤ Nice

[@MonsterlessonsAcademy]

Thanks 🤗

[@jonathanrees47]

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

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@davidabell3300]

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...

[@MonsterlessonsAcademy]

Yeap. Maybe for them it is obvious

[@petersonumoke5323]

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

[@MonsterlessonsAcademy]

This is a small finished project. I didn't plan it as a series

[@socraton3689]

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.

[@petersonumoke5323]

same thing i said.

[@MonsterlessonsAcademy]

I already did that for custom table kzbin.info/www/bejne/mIPUfHyjpMyVaM0si=YVgQEw66P93wmsdK

[@socraton3689]

​@@MonsterlessonsAcademy Thank you Mr. Kocherhin!!!

[@advance5189]

That’s certainly great

[@MonsterlessonsAcademy]

Thanks!

[@advance5189]

@@MonsterlessonsAcademy By the way, Oleksandr, how is employment going in Germany? Is it hard to get a job as an Angular developer there?

[@MonsterlessonsAcademy]

@@advance5189 Depends on the skills and level. I would say it's okay. Angular is quite popular as a framework.

[@gkvignesh5]

nice

[@MonsterlessonsAcademy]

Thanks

[@TheNacropolice]

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

[@MonsterlessonsAcademy]

It doesn't. You will get property set doesn't exist error. export class AppComponent { foo: Signal = signal(0); constructor() { this.foo.set(1) } }

[@romanroman9638]

comparing to react, angular looks so much cleaner

[@MonsterlessonsAcademy]

Yeap

[@geniusrana1219]

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 ".angular/vite-root/angularv18/main.js". Does the file exist? 1:00:05 PM [vite] Internal server error: Failed to resolve import "luxon" from ".angular/vite-root/angularv18/main.js". Does the file exist? looks like with angular 18 it shows this error, can you help me to sort out this? Thanks

[@geniusrana1219]

When I install luxon alone like, npm install luxon --dev , then it started working, do I still need to add @types/luxon in my dev dependencies?

[@MonsterlessonsAcademy]

Yes if you want typescript support.

[@gkvignesh5]

nice

[@MonsterlessonsAcademy]

Thanks