Comments on: Calendar Component in Angular Material

By: mipi

mipi — Fri, 20 May 2022 06:55:09 +0000

Believe it or not, this is the only sensible article on that matter (still, in 2022!), but I have a question fundamental to me- how on Earth I can connect calendar value to an input?! I mean… it’s simple as assigning ngModel, but I want it formatted and behaving like an input with matDatepicker assigned…

By: ysac

ysac — Wed, 13 Oct 2021 16:09:19 +0000

muchas gracias 🙂

By: John

John — Wed, 13 Jan 2021 22:17:10 +0000

Hi Umut,
two questions…
How apply filter and…
How open auto the calendar
Thanks

By: Peter

Peter — Mon, 13 Jul 2020 08:54:15 +0000

Hi thank you. Is there a way someone can select time as well?

By: Tabish

Tabish — Mon, 29 Jun 2020 11:51:53 +0000

Hi Umut,
This article has helped me a lot, thanks for that. Could you please suggest how can I change the background colour of all dates depending on some criteria or event. Also, can any other view be called in the on click event of this calendar.

Thanks

By: Umut Esen

Umut Esen — Thu, 28 May 2020 20:17:56 +0000

In reply to Facundo. Hi, there should be no need to re-render the calendar component as it works with two-way binding. So in the calendar component: [minDate]="minDate" [maxDate]="maxDate" Here is a working example based on the tutorial code. Good luck!

By: Cesar

Cesar — Wed, 01 Apr 2020 15:04:13 +0000

Very usefull, thx.

By: Facundo

Facundo — Sun, 22 Mar 2020 19:50:26 +0000

Hi Umut, any idea how i can re render the calendar?

For example, I choose two dates to set as min and max values for filtering, and then when I press a button I want the calendar to re render so it can have the filter applied.

By: Umut Esen

Umut Esen — Thu, 20 Feb 2020 00:21:42 +0000

In reply to Jesse.

Hi Jesse,

I have updated the post to include a section on how to highlight dates on the calendar. You can use it as a starting point.

Thanks

Umut

By: Umut Esen

Umut Esen — Thu, 20 Feb 2020 00:13:28 +0000

In reply to Jeevan. Unfortunately this is not supported out of the box, you could wrap the calendar in a component and allow selection of multiple dates via input/output events. You'd need to heavily work with DOM though, which may be a pain in the neck. If you choose to do this, make sure to use Renderer2 to query and modify elements in the DOM