angular-calendar icon indicating copy to clipboard operation
angular-calendar copied to clipboard

Is there a way to change the current date? (The one highlighted with lightgreen background)

Open alvincabayan opened this issue 3 years ago • 4 comments

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)

alvincabayan avatar Oct 11 '21 22:10 alvincabayan

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

matts-bot[bot] avatar Oct 11 '21 22:10 matts-bot[bot]

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

YasserRabee avatar Oct 15 '21 03:10 YasserRabee

Hi @alvincabayan can i solve this?

NehaK275 avatar Jan 24 '22 07:01 NehaK275

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.

Kleyguerth avatar Oct 25 '22 18:10 Kleyguerth