@@ -3,22 +3,23 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTa
33import { caretDownSharp , caretUpSharp , chevronBack , chevronDown , chevronForward } from 'ionicons/icons' ;
44
55import { getIonMode } from '../../global/ionic-global' ;
6- import type {
7- Color ,
8- DatetimePresentation ,
9- DatetimeChangeEventDetail ,
10- DatetimeParts ,
11- Mode ,
12- StyleEventDetail ,
13- TitleSelectedDatesFormatter ,
14- } from '../../interface' ;
6+ import type { Color , Mode , StyleEventDetail } from '../../interface' ;
157import { startFocusVisible } from '../../utils/focus-visible' ;
168import { getElementRoot , raf , renderHiddenInput } from '../../utils/helpers' ;
179import { printIonError , printIonWarning } from '../../utils/logging' ;
1810import { isRTL } from '../../utils/rtl' ;
1911import { createColorClasses } from '../../utils/theme' ;
2012import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces' ;
2113
14+ import type {
15+ DatetimePresentation ,
16+ DatetimeChangeEventDetail ,
17+ DatetimeParts ,
18+ TitleSelectedDatesFormatter ,
19+ DatetimeHighlight ,
20+ DatetimeHighlightStyle ,
21+ DatetimeHighlightCallback ,
22+ } from './datetime-interface' ;
2223import { isSameDay , warnIfValueOutOfBounds , isBefore , isAfter } from './utils/comparison' ;
2324import {
2425 generateMonths ,
@@ -60,6 +61,7 @@ import {
6061} from './utils/parse' ;
6162import {
6263 getCalendarDayState ,
64+ getHighlightStyles ,
6365 isDayDisabled ,
6466 isMonthDisabled ,
6567 isNextMonthDisabled ,
@@ -322,6 +324,17 @@ export class Datetime implements ComponentInterface {
322324 */
323325 @Prop ( ) multiple = false ;
324326
327+ /**
328+ * Used to apply custom text and background colors to specific dates.
329+ *
330+ * Can be either an array of objects containing ISO strings and colors,
331+ * or a callback that receives an ISO string and returns the colors.
332+ *
333+ * Only applies to the `date`, `date-time`, and `time-date` presentations,
334+ * with `preferWheel="false"`.
335+ */
336+ @Prop ( ) highlightedDates ?: DatetimeHighlight [ ] | DatetimeHighlightCallback ;
337+ 325338 /**
326339 * The value of the datetime as a valid ISO 8601 datetime string.
327340 * Should be an array of strings if `multiple="true"`.
@@ -1235,7 +1248,7 @@ export class Datetime implements ComponentInterface {
12351248 } ;
12361249
12371250 componentWillLoad ( ) {
1238- const { el, multiple, presentation, preferWheel } = this ;
1251+ const { el, highlightedDates , multiple, presentation, preferWheel } = this ;
12391252
12401253 if ( multiple ) {
12411254 if ( presentation !== 'date' ) {
@@ -1247,6 +1260,19 @@ export class Datetime implements ComponentInterface {
12471260 }
12481261 }
12491262
1263+ if ( highlightedDates !== undefined ) {
1264+ if ( presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date' ) {
1265+ printIonWarning (
1266+ 'The highlightedDates property is only supported with the date, date-time, and time-date presentations.' ,
1267+ el
1268+ ) ;
1269+ }
1270+ 1271+ if ( preferWheel ) {
1272+ printIonWarning ( 'The highlightedDates property is not supported with preferWheel="true".' , el ) ;
1273+ }
1274+ }
1275+ 12501276 this . processMinParts ( ) ;
12511277 this . processMaxParts ( ) ;
12521278 const hourValues = ( this . parsedHourValues = convertToArrayOfNumbers ( this . hourValues ) ) ;
@@ -1971,7 +1997,7 @@ export class Datetime implements ComponentInterface {
19711997 < div class = "calendar-month-grid" >
19721998 { getDaysOfMonth ( month , year , this . firstDayOfWeek % 7 ) . map ( ( dateObject , index ) => {
19731999 const { day, dayOfWeek } = dateObject ;
1974- const { isDateEnabled, multiple } = this ;
2000+ const { el , highlightedDates , isDateEnabled, multiple } = this ;
19752001 const referenceParts = { month, day, year } ;
19762002 const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState (
19772003 this . locale ,
@@ -1983,6 +2009,7 @@ export class Datetime implements ComponentInterface {
19832009 this . parsedDayValues
19842010 ) ;
19852011
2012+ const dateIsoString = convertDataToISO ( referenceParts ) ;
19862013 let isCalDayDisabled = isCalMonthDisabled || disabled ;
19872014
19882015 if ( ! isCalDayDisabled && isDateEnabled !== undefined ) {
@@ -1992,15 +2019,26 @@ export class Datetime implements ComponentInterface {
19922019 * to prevent exceptions in the user's function from
19932020 * interrupting the calendar rendering.
19942021 */
1995- isCalDayDisabled = ! isDateEnabled ( convertDataToISO ( referenceParts ) ) ;
2022+ isCalDayDisabled = ! isDateEnabled ( dateIsoString ) ;
19962023 } catch ( e ) {
19972024 printIonError (
19982025 'Exception thrown from provided `isDateEnabled` function. Please check your function and try again.' ,
2026+ el ,
19992027 e
20002028 ) ;
20012029 }
20022030 }
20032031
2032+ let dateStyle : DatetimeHighlightStyle | undefined = undefined ;
2033+ 2034+ /**
2035+ * Custom highlight styles should not override the style for selected dates,
2036+ * nor apply to "filler days" at the start of the grid.
2037+ */
2038+ if ( highlightedDates !== undefined && ! isActive && day !== null ) {
2039+ dateStyle = getHighlightStyles ( highlightedDates , dateIsoString , el ) ;
2040+ }
2041+ 20042042 return (
20052043 < button
20062044 tabindex = "-1"
@@ -2016,6 +2054,11 @@ export class Datetime implements ComponentInterface {
20162054 'calendar-day-active' : isActive ,
20172055 'calendar-day-today' : isToday ,
20182056 } }
2057+ style = {
2058+ dateStyle && {
2059+ color : dateStyle . textColor ,
2060+ }
2061+ }
20192062 aria-selected = { ariaSelected }
20202063 aria-label = { ariaLabel }
20212064 onClick = { ( ) => {
@@ -2050,6 +2093,12 @@ export class Datetime implements ComponentInterface {
20502093 }
20512094 } }
20522095 >
2096+ < div
2097+ class = "calendar-day-highlight"
2098+ style = { {
2099+ backgroundColor : dateStyle ?. backgroundColor ,
2100+ } }
2101+ > </ div >
20532102 { text }
20542103 </ button >
20552104 ) ;
0 commit comments