[ANGULAR] apply styling to specific days (header) like b-weekend
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!
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!
See the dayHeaderRenderer
configured into the week
mode in this example:
See https://bryntum.com/products/calendar/examples/custom-rendering/
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
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?
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.
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
The renderer is in the allDayEvents
of the week view.
https://bryntum.com/products/calendar/docs/api/Calendar/widget/WeekView#property-allDayEvents
Hey Animal!
Could you please give me a code example what I should call instead of this.calendar.refresh();
Thanks!
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.