Fluent Calendar Disabled Field

[satyajit-behera]

Is it possible to customize the disabled date in a calendar control. the default comes with a backward slash. But can we make it just look plain disabled, or give a different color as per need.
Thanks

[dvoituron]

You can customize the days using DaysTemplate attribute.
See https://www.fluentui-blazor.net/DateTime#customizedcalendar

You can also add a CSS style (with !important suffix), to update the "backward slash" for example.

.fluent-calendar .day[disabled] {
  ...
}
.fluent-calendar .day[disabled]::before {
  ...
}

[satyajit-behera]

I tried to remove the backslash using:

.fluent-calendar ::deep .day[disabled] {
color: var(--neutral-stroke-focus) !important;
cursor: default !important;
}

.fluent-calendar ::deep .day[disabled]::before {
    content: none !important; 
    display: none !important; 
    width: 0 !important;
    height: 0 !important;
    background: transparent !important; 
    border: none !important;
    visibility: hidden !important; 
    transform: none !important;
    position: absolute !important;
    z-index: -9999 !important; 
    pointer-events: none !important; 
}

But not able to remove the backslash. Am I missing something. Thanks in advance.

[dvoituron]

You cannot use ::deep at this place: this ::deep will reference your Blazor component and not the FluentCalendar.
The easy way is probably to define this .fluent-calendar .day[disabled]::before in you app.css file (in wwwroot).

[satyajit-behera]

Thanks @dvoituron Tried with this also. Still getting the same result. May be not able to figure out which property to remove or replace.

[rpodevns]

If targeting the content attribute like this is not working then check the order of your css imports.

.fluent-calendar .day[disabled]::before {
    content: none !important;
}