Our powerful JS Calendar component


Post 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!

Attachments
Screenshot 2023-01-08 at 14.45.55.png
Screenshot 2023-01-08 at 14.45.55.png (42.48 KiB) Viewed 1262 times

Post by Animal »

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

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


Post 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


Post 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?


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


Post 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


Post by Animal »


Post by vittorio bianchi »

Hey Animal!

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

Thanks! :)


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


Post Reply