Page 1 of 1

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

Posted: Sun Jan 08, 2023 3:46 pm
by 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!


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

Posted: Sun Jan 08, 2023 4:07 pm
by Animal

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

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


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

Posted: Sat Jan 21, 2023 12:37 pm
by 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


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

Posted: Mon Jan 23, 2023 11:43 am
by 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?


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

Posted: Mon Jan 23, 2023 1:28 pm
by 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.


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

Posted: Thu Jan 26, 2023 4:29 pm
by 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


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

Posted: Thu Jan 26, 2023 5:45 pm
by Animal

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

Posted: Mon Feb 13, 2023 7:54 pm
by vittorio bianchi

Hey Animal!

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

Thanks! :)


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

Posted: Tue Feb 14, 2023 9:54 am
by 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.