Hi,
I’m using Angular v14 and Mobiscroll v5.18.2.
I’am using the annual event calendar view and I need to style the days based on two conditions:
Some days will have a border and others will have a background-color. The color of the border or the background-color depends on the type of the event, while If it’s a border or background-color depends on the state of the event.
So basically depending on two conditions defined in my events I need to decide the color and to style a border or a background.
First approach I tried:
Initially I wanted to use the colors option but with it I can only style the background color using the highlight property: See colors option definition.
Right now Mobiscroll only supports defining a CSS class name which limits a lot the freedom to style the cells.
If I could define inline style properties I could make use of CSS custom properties which would be a game changer and make things easier.
For example if the colors option allowed to define inline styles I could define a CSS variable for the color and then define a CSS class to differentiate between background or border.
Something like this would be in the SCSS/CSS file:
.cell {
&-approved {
background-color: var(--color);
}
&-pending {
border: 1px solid var(--color);
}
}
Then, in the TS file, when I define the colors option for the event calendar I could do something like the following:
// This would be created dynamically (this is just an example)
colors: MbscCalendarColor[] = [
{
start: ...,
end: ...,
cellCssClass: 'cell-approved',
cellCssStyles: {'--color': 'red'},
},
{
start: ...,
end: ...,
cellCssClass: 'cell-pending',
cellCssStyles: {'--color': 'red'},
}
];
The current approach of offering only the highlight property limits too much because it sets a background-color which you can’t use anywhere else. If it was the color property you could use the currentColor to do the magic but with the background-color it’s really difficult.
Second approach I tried:
Due to the limitations with the color options I decided to give it a try at the dayTemplate options:
With it I have all the freedom that one would expect but I have found an inconsistent behavior.
If you define some events in the annual calendar view through the data option:
<mbsc-eventcalendar
[data]="events"
[options]="options"
[dayTemplate]="dayTmpl"
>
<ng-template #dayTmpl let-data>
<div class="cell">
{{data.date.getDate()}}
{{data.events?.length ?? 0}} <!-- It's always zero -->
</div>
</ng-template>
</mbsc-eventcalendar>
You always receive as undefined the number of events in the dayTemplate even when there are events in that day.
Here is an example of how I have defined the events property used above:
events: MbscCalendarEvent[] = [
{
id: 0,
start: '2022-01-01',
end: '2022-01-15',
title: 'Text Example',
}
];
options: MbscEventcalendarOptions = {
view: {
calendar: {
type: 'year',
popover: false,
},
},
};
I would expect that when the day is 1st of January 2022 to receive an array in the events property in the dayTemplate but that it’s not the case (I receive undefined).
Conclusions:
I haven’t tried anything else, there could be better ways to accomplish what I’m trying to do, but this is what I have found so far.