feat: display customized notes for dates in component "<IonDatetime />", e.g. holiday

[creatxrgithub]

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

I wish that I can add some notes to the component "".

e.g. specify a holiday and display it in the calendar by a function

Describe the Use Case

to display holiday or lunar date in calendar

Describe Preferred Solution

by setting a function or a array or a key-value (date-notes) object in a attribute of ""

Describe Alternatives

No response

Related Code

let notes = { "2022-11-25": "初二", "2022-11-26": "one's birthday"}
<IonDatetime notes={notes} />

Additional Information

No response

[sean-perkins]

Hello @creatxrgithub, thank you for this feature request!

The individual date cell is a pretty small space to render additional UI within. We have a feature to track rendering a dot indicator in each cell, that developers could use for indicating additional information (#25832).

Does that feature request solve your core need or are you explicitly looking to render text within the date cells?

[creatxrgithub]

It's similar, but not really.
I wish to display some notes at the "dot" position.
His code:

<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>

should be:

<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 dotNotes; //or empty string ""
  }
</script>

or like this:

<IonDatetime displayDotForDate={ (dateIsoString) => { return dotNotes || "" }}/>

thanks.

Hello @creatxrgithub, thank you for this feature request!

The individual date cell is a pretty small space to render additional UI within. We have a feature to track rendering a dot indicator in each cell, that developers could use for indicating additional information (#25832).

Does that feature request solve your core need or are you explicitly looking to render text within the date cells?

[sean-perkins]

Thanks for the follow-up @creatxrgithub!

While I understand the desire to display more complex information (notes, etc.) in the same position as the dot, I do not think this would align with the native calendar interface (e.g. Apple iOS Events) and wouldn't work with variable height custom content (e.g. text vs. a dot).

Here is a mocked example of how introducing text would cause a shift to the rendered text:

This would also impact the selected/highlighted day appearance. In your example you have rounded borders, whereas in our design it is a full circle (tighter edges).

My recommendation would be if we move forward with the dot indicator for datetime, you would follow a pattern similar to iOS where selecting a day with a dot would display additional information alongside the interface, such as the holiday or lunar date.

Alternatively, a different calendar component from another library may be a better fit for this use case. The benefit of Ionic is that it does not prevent you from pulling in 3rd party components for complex use cases that do not currently align with our component design.

I am going to close this feature request for now and we can reevaluate after the dot indicator feature is supported in Ionic Framework.

If you have any additional thoughts or questions, feel free to reply and I can answer.

[creatxrgithub]

Here is a mocked example of how introducing text would cause a shift to the rendered text:

It's easy to resolve that: to display a text or space string at the position for all the dates to shift all the rendered texts.

This would also impact the selected/highlighted day appearance. In your example you have rounded borders, whereas in our design it is a full circle (tighter edges).

Let the date and "dot" in a same circle. It could have a pre-defined (e.g. square) align style. The difference is the number is not in the center.

Other option is to have a extra line between dates lines, the "dot" display in it below the dates. The number is still in the center of circle. In the image of calendar, it has enough space between lines.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.