[ANGULAR] apply styling to specific days (header) like b-weekend

[vittorio bianchi]

Hey!

We want to change the styling of some days like the weekend (e.g. red)
Is there a way to apply the b-weekend also to other days?

Thanks!

[Animal]

See the dayHeaderRenderer configured into the week mode in this example:

See https://bryntum.com/products/calendar/examples/custom-rendering/

[vittorio bianchi]

Perfect thanks!

Is there a way to change this dynamically after have been loaded?
Wanted to change it after the HTTP Request and the Calendar is already loaded but the changes on dayHeaderRenderer wasn't working

[tasnim]

Hello,

Is there a way to change this dynamically after have been loaded?

I'm not sure what you want to change.
But you can change the renderer. But there is no updater on the renderer so you would have to call refresh if you change something.
https://bryntum.com/products/calendar/docs/api/Calendar/view/Calendar#function-refresh

Wanted to change it after the HTTP Request and the Calendar is already loaded but the changes on dayHeaderRenderer wasn't working

Could you please upload a test case here so we can check what's wrong?

[Animal]

If all you need is CSS styles, not content, you can just use CSS.

The b-weekend class is on all cells for weekend days.

And the b-nonworking-day class is on all days which are configured as non working. This defaults to Saturday and Sunday, but is settable. It's independent of weekends which are always Saturday and Sunday.

[vittorio bianchi]

  constructor(
    private holidayService: HolidayService,
  ) {
    this.holidayService.getHolidays().then((holidays) => {
      // this.holidays = holidays;
      // const holidayList = getHolidayDates(holidays);
      (this.calendar.modes as any).week.dayHeaderRenderer = (dayHeaderDomConfig, cellData) => {
        console.log(cellData);
        if (true) {
          dayHeaderDomConfig.className['b-highlight-day'] = 1;
          dayHeaderDomConfig.children.push('\ud83c\udf89 Day off');
        }
      };
      this.calendar.refresh();
    });
    }

Just tried to use the example (https://bryntum.com/products/calendar/examples/custom-rendering/) dynamically after the API Request. But calendar does not showing any changes

[Animal]

The renderer is in the allDayEvents of the week view.

https://bryntum.com/products/calendar/docs/api/Calendar/widget/WeekView#property-allDayEvents

[vittorio bianchi]

Hey Animal!

Could you please give me a code example what I should call instead of this.calendar.refresh();

Thanks!

[Animal]

refresh is correct. If you change a renderer dynamically, then the UI needs to be refreshed.

But as I said, the all day row is a child view of a DayView. It's the allDayEvents property of the DayView.