angular-calendar
angular-calendar copied to clipboard
Is there a way to change the current date? (The one highlighted with lightgreen background)
Describe the bug Trying to change the current date on the examples by changing the assigned date to the variable viewDate. In the examples it is coded as : viewDate: Date = new Date(); When I changed it to: viewDate: Date = new Date('December 15, 2020'); It only focused on the date given.
What I am wondering is, if there is way to change the current date? Like the highlighted green background on the current date for MonthView for example would move too. In our app, there is system date, and it can change.
Minimal reproduction of the problem with instructions Change the value of viewDate
Screenshots
Versions
@angular/core: "~11.1.0", angular-calendar: "^0.28.28", Browser name and version: Chrome Version 94.0.4606.71 (Official Build) (64-bit)
Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me
@alvincabayan I was searching for the same, and it is not supported ( at least out of the box).
The current date (aka today) is hard coded here https://github.com/mattlewis92/calendar-utils/blob/3bd3bfd6633542f06cef6a240434244894e95598/src/calendar-utils.ts#L389
There are two workarounds I can think of right now:
- override the style of
.cal-month-view .cal-day-cell.cal-today
to remove the background-color. Then use custom template for cell rendering and provide your own isToday detection - When importing CalendarModule, use .forRoot and specify different utils class. Your utils class can start with a copy-paste of existing utils, but don't hard-code
today = new Date()
and adapt to your usecase.
Hi @alvincabayan can i solve this?
You can use a custom header template, copy the default header template and change the conditions for the classes cal-past
, cal-today
and cal-future
.