feat: Dot indicator for individual calendar day in Datetime

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The datetime component should include options to optionally render a dot indicator for specific calendar days. To align with iOS design, at most one dot indicator can display at a time for a single calendar day. Displaying a dot should only be available for presentation="date" and presentation="date-time".

Dot indicators are not theme-able in the iOS interface, but I think it makes sense to allow developers to customize the appearance (background color).

Describe the Use Case

The iOS design for the calendar grid commonly shows a dot indicator on a calendar day to indicate either an event or additional information is available for a specific day.

Other libraries such as V-Calendar support this API: https://vcalendar.io/attributes.html#dots

Describe Preferred Solution

Datetime should accept a function that allows developers to control when a dot indicator is displayed.

<ion-datetime></ion-datetime>

<script>
  const datetime = document.querySelector('ion-datetime');
  datetime.displayDotForDate = (dateIsoString) => {
    const date = new Date(dateIsoString);
    // check for a specific date
    return true;
  }
</script>

The default behavior would be to not render a dot for a calendar day.

Developers can customize the appearance of the dot through CSS variables:

ion-datetime {
  --dot-background: blue;
}

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[NeluQi]

any news?

[sean-perkins]

Hello everyone 👋

The team would love to hear your use cases for this feature. While the original request shows the iOS Events interface, we'd like to better understand what features you would build in your applications if Ionic added dot indicators.

Would you need additional APIs, such as knowing when a month changed to load more dots? Would you expect this to be part of ion-datetime or a new component (ion-calendar)? Do you expect it to visually match iOS or just need the ability to render a dot in the calendar day and don't really care if it is visually identical to iOS?

Feedback is appreciated, thanks!

[startupfoundry]

The same way "Every mobile app attempts to expand until it includes chat.", every enterprise app we've worked on expands out until it has a calendar view. Whether it's for scheduling / upcoming events / forecasting, we almost always have to build a custom component since the current implementation doesn't solve those needs.

We would absolutely love this functionality built in to Ionic!

[IMPMAC]

@sean-perkins
See this screenshot for an example where we used a plugin to get this sort of functionality:

There is an event fired every time you change months, which allows to go to the server and grab the data. Which in turn allows you to render the dots. You have the ability to customise the colours of the dots too.

If you were to have the events list at the bottom, then I would expect it to be a new component. Or have a separate component just for that list. This list, allows you to click and view, edit and delete the events.

[seatechdev]

I have a similar need. Let's assume that I have an api that stores Red background days in the backend.

For User 1 - It returns Day 1, Day 3 and Day 5 to be the Red days. The events table is empty. Basically there is nothing to push on the events array to show. But based on the logic returned from the backend - I want Monday, Wednesday and Friday of every week for the next few years to show as Red.

For User 2, the Red Days are Day 2 and Day 4. Which means when User 2 sees the calendar their Tuesdays and Thursdays are Red.

For User 3, Day 6 and Day 0 are the Red days. Which means User 3 sees all of their Saturdays and Sundays as Red.

For User 4, It can be Day 1,2,5,6 and so on..

I still want to be able to show regular events the way your package is designed. But before that I want to color code the days based on the user choice, regardless of the fact if they have any events or not.

There is a hacky way to do it using Ionic2-calendar which is a npm package but going with Ionic core would be great. A good way to format the date would be similar to isDateEnabled - <ion-datetime [isDateEnabled]="isWeekday">. Instead have all thee days enabled with different colors.

[averyrousseau]

This feature has been added via #26775 and will be available in a future minor release of Ionic 🎉 See the PR description for more details.