Can I disable the badgeTotal from month cell component

[vsd-codesode]

Is your feature request related to a problem? Please describe

Is there any way to disable the badgeTotal in the view.

If you suggest the custom template; Please give some example it.

I am trying to copy this component and remove this whole section from it
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>

Is there any better approach for it?

Describe the solution you'd like

Instead of adding checking day.badgeTotal > 0; there can be a flag(Lets call it showBadgeTotal) that will control the visibility of the span in question.

Describe your use case for implementing this feature

When the calendar is shown to a small screen, this badgeTotal view feels cramped into the UI.

Additional context

[matts-bot]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

[JaxonWright]

On your mwl-calendar-month-view, add a directive for the cell template ([cellTemplate]="customCellTemplate") and then define the template lower down in your template file.

That can be done like this:

<ng-template #customCellTemplate let-day="day">
  <!-- Fill in with whatever you want from the section you were looking at or your own custom stuff -->
</ng-template>

[vsd-codesode]

Yes, I did the same. Thanks.

Will you be accepting PR for the change I have proposed?

[JaxonWright]

That makes sense to me, but that is up to @mattlewis92

[mattlewis92]

That makes sense to me, but that is up to @mattlewis92

I think rather than adding a new input and bloating the api, it makes more sense just to use CSS to hide things like this. All you need to do is add this to your apps global CSS to hide the badge:

.cal-day-badge {
  display: none;
}

[vsd-codesode]

That makes sense to me, but that is up to @mattlewis92

I think rather than adding a new input and bloating the api, it makes more sense just to use CSS to hide things like this. All you need to do is add this to your apps global CSS to hide the badge:

.cal-day-badge {
  display: none;
}

Actually, It should be like below, This CSS class is not working without !important flag.

.cal-day-badge {
  display: none !important;
}

Although, this css add will accept what is expected, but in my view it is pretty obscure way to achieve this. Adding new @input with a default value could be a better approach from usability point of view.

[mattlewis92]

Although, this css add will accept what is expected, but in my view it is pretty obscure way to achieve this. Adding new @input with a default value could be a better approach from usability point of view.

I agree that it's not the most intuitive api, but once you start adding api options for all the things that you can do with just CSS, then you end up with a bloated api with dozens of options that's both difficult from a maintainers point of view, as well as a consumer (as you have to read through the docs for a huge amount of inputs and outputs). Instead I opted for providing demos that show you how you can implement common uses cases with just CSS instead, I'd be open for adding one for showing how to hide the badge with CSS.