All calendar samples in Blazor docs wrap the calendar in a odd looking bordered container for some reason:
<div class="container vertical">
<div style="width: 25rem; border: 1px solid gainsboro;">
<IgbCalendar />
</div>
</div>
https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar
Unless the sample has some actual layout needs - i.e. not just a single calendar, remove both redundant containers and apply width or max-width to the calendar itself, similar to how Web Components samples apply those - except possibly with a class + CSS rule instead of inline styles:
<IgbCalendar class="calendar" />
.calendar {
[max-]width: 25rem;
}
All calendar samples in Blazor docs wrap the calendar in a odd looking bordered container for some reason:
https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar
Unless the sample has some actual layout needs - i.e. not just a single calendar, remove both redundant containers and apply
widthormax-widthto the calendar itself, similar to how Web Components samples apply those - except possibly with a class + CSS rule instead of inline styles: