Removing the concept of "selected"

I’ve configured an event calendar with the color option receiving an array of my event dates, exactly as described in this demo:

I’m noticing that today’s date of the current month will have css class “selected” and will be styled to show the current day. If I click on another date in the calendar then that date will receive css class “selected”. Further if I scroll to the next or previous month the 1st day of that month is set as “selected”.

It seems the event calendar must always have a date that is designated “selected”. I want to remove this, I don’t need the calendar to indicate a selection as I’ll be doing that in a different place in the DOM outside of the calendar. The part where this is really undesirable is how the next and previous months just arbitrarily get selected assigned to the first day of the month.

Is there a reason why the first day of the month of each month is defaulted to selected and can I stop that?

Hi @Tim_Case :wave:

Yes, it’s possible :wink:

If you would like to show the calendar with no days selected by default, you can use the defaultValue: null setting for that.

Let me know if this solves your requirement :grinning:

There is actually a concept of selected day, which defaults to today, and as mentioned above, you can turn that pff with defaultValue: null however that won’t solve the first day selection when navigating.

The job of the selected date is actually to show the relevant events for that day, whether in a popup, or in the agenda and so on…

Can you share a bit more about how your setup for the event calendar with marked days looks like? How are the events rendered and how will people interact with it?

It turns out I do want the concept of a selected date. I didn’t know about defaultValue and it came in handy for the case where I wanted the calendar to initially load with a selected date that was not the current month say for instance it’s now July and I wanted to show the month of August.

It also occurred to me that there really isn’t ever a problem of having too many dom selectors only having too few and in this case using css on the dom selectors for selected would really solve my problem of not wanting to have the selected day markers shown, something along the lines of

.mbsc-selected {
  background-color: transparent;

solved my issues.

Calendar is great, I’m a big fan.