From 97a2df081fb867e10a67c6b0244afd2ae26aa363 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Mon, 13 Feb 2023 10:41:33 -0600
Subject: [PATCH 01/10] docs(datetime): add highlightedDates playgrounds

---
 docs/api/datetime.md                          | 21 +++++++
 .../array/angular/example_component_html.md   |  7 +++
 .../array/angular/example_component_ts.md     | 32 +++++++++++
 .../datetime/highlightedDates/array/demo.html | 55 +++++++++++++++++++
 .../datetime/highlightedDates/array/index.md  | 24 ++++++++
 .../highlightedDates/array/javascript.md      | 29 ++++++++++
 .../datetime/highlightedDates/array/react.md  | 35 ++++++++++++
 .../v6/datetime/highlightedDates/array/vue.md | 44 +++++++++++++++
 .../angular/example_component_html.md         |  3 +
 .../callback/angular/example_component_ts.md  | 30 ++++++++++
 .../highlightedDates/callback/demo.html       | 53 ++++++++++++++++++
 .../highlightedDates/callback/index.md        | 24 ++++++++
 .../highlightedDates/callback/javascript.md   | 27 +++++++++
 .../highlightedDates/callback/react.md        | 32 +++++++++++
 .../datetime/highlightedDates/callback/vue.md | 38 +++++++++++++
 .../array/angular/example_component_html.md   |  7 +++
 .../array/angular/example_component_ts.md     | 32 +++++++++++
 .../datetime/highlightedDates/array/demo.html | 55 +++++++++++++++++++
 .../datetime/highlightedDates/array/index.md  | 24 ++++++++
 .../highlightedDates/array/javascript.md      | 29 ++++++++++
 .../datetime/highlightedDates/array/react.md  | 35 ++++++++++++
 .../v7/datetime/highlightedDates/array/vue.md | 44 +++++++++++++++
 .../angular/example_component_html.md         |  3 +
 .../callback/angular/example_component_ts.md  | 30 ++++++++++
 .../highlightedDates/callback/demo.html       | 53 ++++++++++++++++++
 .../highlightedDates/callback/index.md        | 24 ++++++++
 .../highlightedDates/callback/javascript.md   | 27 +++++++++
 .../highlightedDates/callback/react.md        | 32 +++++++++++
 .../datetime/highlightedDates/callback/vue.md | 38 +++++++++++++
 versioned_docs/version-v6/api/datetime.md     | 21 +++++++
 30 files changed, 908 insertions(+)
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/demo.html
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/index.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/javascript.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/react.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/array/vue.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/demo.html
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/index.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/javascript.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/react.md
 create mode 100644 static/usage/v6/datetime/highlightedDates/callback/vue.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/demo.html
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/index.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/javascript.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/react.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/array/vue.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/demo.html
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/index.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/javascript.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/react.md
 create mode 100644 static/usage/v7/datetime/highlightedDates/callback/vue.md

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index ab856254cac..f42d3966a7b 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -31,6 +31,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/s
 import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md';
 import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md';
 
+import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
+
 import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
 
 import Theming from '@site/static/usage/v7/datetime/theming/index.md';
@@ -283,6 +286,24 @@ Developers can provide their own buttons for advanced custom behavior.
 
 <CustomizingButtons />
 
+## Highlighting Specific Dates
+
+Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
+
+### Using Array
+
+Note that provided `date` strings should not contain any time information.
+
+<HighlightedDatesArray />
+
+### Using Callback
+
+<HighlightedDatesCallback />
+
 ## Theming
 
 Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
new file mode 100644
index 00000000000..46de9b8c9a6
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  presentation="date"
+  value="2023-01-01"
+  [highlightedDates]="highlightedDates"
+></ion-datetime>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
new file mode 100644
index 00000000000..6a766080128
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  public highlightedDates = [
+    {
+      date: '2023-01-05',
+      color: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      color: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      color: '#0000ff',
+      backgroundColor: '#add8e6',
+    },
+    {
+      date: '2023-01-23',
+      color: '#440ab8',
+      backgroundColor: '#d3c8e5'
+    }
+  ];
+}
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html
new file mode 100644
index 00000000000..dfaac30f1bc
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = [
+      {
+        date: '2023-01-05',
+        color: '#800080',
+        backgroundColor: '#ffc0cb',
+      },
+      {
+        date: '2023-01-10',
+        color: '#09721b',
+        backgroundColor: '#c8e5d0',
+      },
+      {
+        date: '2023-01-20',
+        color: '#0000ff',
+        backgroundColor: '#add8e6',
+      },
+      {
+        date: '2023-01-23',
+        color: '#440ab8',
+        backgroundColor: '#d3c8e5'
+      }
+    ];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/highlightedDates/array/index.md b/static/usage/v6/datetime/highlightedDates/array/index.md
new file mode 100644
index 00000000000..166c5f30cb4
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/datetime/highlightedDates/array/demo.html"
+/>
diff --git a/static/usage/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md
new file mode 100644
index 00000000000..f4672fa951f
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = [
+    {
+      date: '2023-01-05',
+      color: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      color: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      color: '#0000ff',
+      backgroundColor: '#add8e6',
+    },
+    {
+      date: '2023-01-23',
+      color: '#440ab8',
+      backgroundColor: '#d3c8e5'
+    }
+  ];
+</script>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/react.md b/static/usage/v6/datetime/highlightedDates/array/react.md
new file mode 100644
index 00000000000..a1aa657d821
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      value="2023-01-01"
+      highlightedDates={[
+        {
+          date: '2023-01-05',
+          color: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          color: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          color: '#0000ff',
+          backgroundColor: '#add8e6',
+        },
+        {
+          date: '2023-01-23',
+          color: '#440ab8',
+          backgroundColor: '#d3c8e5'
+        }
+      ]}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/datetime/highlightedDates/array/vue.md b/static/usage/v6/datetime/highlightedDates/array/vue.md
new file mode 100644
index 00000000000..dee90ff27e8
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/array/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-datetime
+    presentation="date"
+    value="2023-01-01"
+    :highlighted-dates="highlightedDates"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = [
+        {
+          date: '2023-01-05',
+          color: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          color: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          color: '#0000ff',
+          backgroundColor: '#add8e6',
+        },
+        {
+          date: '2023-01-23',
+          color: '#440ab8',
+          backgroundColor: '#d3c8e5'
+        }
+      ];
+      
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
new file mode 100644
index 00000000000..634090ab0ab
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
new file mode 100644
index 00000000000..0f143cddc53
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        color: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        color: '#0000ff',
+        backgroundColor: '#add8e6',
+      };
+    }
+
+    return undefined;
+  };
+}
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html
new file mode 100644
index 00000000000..49510d84a1b
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/demo.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = (isoString) => {
+      const date = new Date(isoString);
+      const utcDay = date.getUTCDate();
+
+      if(utcDay % 5 === 0) {
+        return {
+          color: '#800080',
+          backgroundColor: '#ffc0cb',
+        };
+      }
+
+      if(utcDay % 3 === 0) {
+        return {
+          color: '#0000ff',
+          backgroundColor: '#add8e6',
+        };
+      }
+
+      return undefined;
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v6/datetime/highlightedDates/callback/index.md b/static/usage/v6/datetime/highlightedDates/callback/index.md
new file mode 100644
index 00000000000..25a61b3d896
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v6/datetime/highlightedDates/callback/demo.html"
+/>
diff --git a/static/usage/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
new file mode 100644
index 00000000000..33eadbf4627
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
@@ -0,0 +1,27 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        color: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        color: '#0000ff',
+        backgroundColor: '#add8e6',
+      };
+    }
+
+    return undefined;
+  };
+</script>
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/react.md b/static/usage/v6/datetime/highlightedDates/callback/react.md
new file mode 100644
index 00000000000..a78ff696322
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      highlightedDates={(isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            color: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            color: '#0000ff',
+            backgroundColor: '#add8e6',
+          };
+        }
+
+        return undefined;
+      }}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v6/datetime/highlightedDates/callback/vue.md b/static/usage/v6/datetime/highlightedDates/callback/vue.md
new file mode 100644
index 00000000000..790568f7573
--- /dev/null
+++ b/static/usage/v6/datetime/highlightedDates/callback/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = (isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            color: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            color: '#0000ff',
+            backgroundColor: '#add8e6',
+          };
+        }
+
+        return undefined;
+      };
+
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
new file mode 100644
index 00000000000..46de9b8c9a6
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  presentation="date"
+  value="2023-01-01"
+  [highlightedDates]="highlightedDates"
+></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
new file mode 100644
index 00000000000..6a766080128
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  public highlightedDates = [
+    {
+      date: '2023-01-05',
+      color: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      color: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      color: '#0000ff',
+      backgroundColor: '#add8e6',
+    },
+    {
+      date: '2023-01-23',
+      color: '#440ab8',
+      backgroundColor: '#d3c8e5'
+    }
+  ];
+}
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
new file mode 100644
index 00000000000..dfaac30f1bc
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = [
+      {
+        date: '2023-01-05',
+        color: '#800080',
+        backgroundColor: '#ffc0cb',
+      },
+      {
+        date: '2023-01-10',
+        color: '#09721b',
+        backgroundColor: '#c8e5d0',
+      },
+      {
+        date: '2023-01-20',
+        color: '#0000ff',
+        backgroundColor: '#add8e6',
+      },
+      {
+        date: '2023-01-23',
+        color: '#440ab8',
+        backgroundColor: '#d3c8e5'
+      }
+    ];
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/highlightedDates/array/index.md b/static/usage/v7/datetime/highlightedDates/array/index.md
new file mode 100644
index 00000000000..06e80f607d8
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/datetime/highlightedDates/array/demo.html"
+/>
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
new file mode 100644
index 00000000000..f4672fa951f
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = [
+    {
+      date: '2023-01-05',
+      color: '#800080',
+      backgroundColor: '#ffc0cb',
+    },
+    {
+      date: '2023-01-10',
+      color: '#09721b',
+      backgroundColor: '#c8e5d0',
+    },
+    {
+      date: '2023-01-20',
+      color: '#0000ff',
+      backgroundColor: '#add8e6',
+    },
+    {
+      date: '2023-01-23',
+      color: '#440ab8',
+      backgroundColor: '#d3c8e5'
+    }
+  ];
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md
new file mode 100644
index 00000000000..a1aa657d821
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      value="2023-01-01"
+      highlightedDates={[
+        {
+          date: '2023-01-05',
+          color: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          color: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          color: '#0000ff',
+          backgroundColor: '#add8e6',
+        },
+        {
+          date: '2023-01-23',
+          color: '#440ab8',
+          backgroundColor: '#d3c8e5'
+        }
+      ]}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
new file mode 100644
index 00000000000..dee90ff27e8
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-datetime
+    presentation="date"
+    value="2023-01-01"
+    :highlighted-dates="highlightedDates"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = [
+        {
+          date: '2023-01-05',
+          color: '#800080',
+          backgroundColor: '#ffc0cb',
+        },
+        {
+          date: '2023-01-10',
+          color: '#09721b',
+          backgroundColor: '#c8e5d0',
+        },
+        {
+          date: '2023-01-20',
+          color: '#0000ff',
+          backgroundColor: '#add8e6',
+        },
+        {
+          date: '2023-01-23',
+          color: '#440ab8',
+          backgroundColor: '#d3c8e5'
+        }
+      ];
+      
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
new file mode 100644
index 00000000000..634090ab0ab
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [highlightedDates]="highlightedDates"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
new file mode 100644
index 00000000000..0f143cddc53
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        color: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        color: '#0000ff',
+        backgroundColor: '#add8e6',
+      };
+    }
+
+    return undefined;
+  };
+}
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
new file mode 100644
index 00000000000..49510d84a1b
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Datetime</title>
+  <link rel="stylesheet" href="../../../../common.css" />
+  <script src="../../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <style>
+    ion-datetime {
+      width: 350px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-datetime presentation="date"></ion-datetime>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const datetime = document.querySelector('ion-datetime');
+    datetime.highlightedDates = (isoString) => {
+      const date = new Date(isoString);
+      const utcDay = date.getUTCDate();
+
+      if(utcDay % 5 === 0) {
+        return {
+          color: '#800080',
+          backgroundColor: '#ffc0cb',
+        };
+      }
+
+      if(utcDay % 3 === 0) {
+        return {
+          color: '#0000ff',
+          backgroundColor: '#add8e6',
+        };
+      }
+
+      return undefined;
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/usage/v7/datetime/highlightedDates/callback/index.md b/static/usage/v7/datetime/highlightedDates/callback/index.md
new file mode 100644
index 00000000000..294e127a7e2
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/datetime/highlightedDates/callback/demo.html"
+/>
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
new file mode 100644
index 00000000000..33eadbf4627
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -0,0 +1,27 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.highlightedDates = (isoString) => {
+    const date = new Date(isoString);
+    const utcDay = date.getUTCDate();
+
+    if(utcDay % 5 === 0) {
+      return {
+        color: '#800080',
+        backgroundColor: '#ffc0cb',
+      };
+    }
+
+    if(utcDay % 3 === 0) {
+      return {
+        color: '#0000ff',
+        backgroundColor: '#add8e6',
+      };
+    }
+
+    return undefined;
+  };
+</script>
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md
new file mode 100644
index 00000000000..a78ff696322
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime
+      presentation="date"
+      highlightedDates={(isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            color: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            color: '#0000ff',
+            backgroundColor: '#add8e6',
+          };
+        }
+
+        return undefined;
+      }}
+    ></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
new file mode 100644
index 00000000000..790568f7573
--- /dev/null
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-datetime presentation="date" :highlighted-dates="highlightedDates"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+    setup() {
+      const highlightedDates = (isoString) => {
+        const date = new Date(isoString);
+        const utcDay = date.getUTCDate();
+
+        if(utcDay % 5 === 0) {
+          return {
+            color: '#800080',
+            backgroundColor: '#ffc0cb',
+          };
+        }
+
+        if(utcDay % 3 === 0) {
+          return {
+            color: '#0000ff',
+            backgroundColor: '#add8e6',
+          };
+        }
+
+        return undefined;
+      };
+
+      return { highlightedDates }
+    }
+  });
+</script>
+```
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index 021146d87ff..3524e104496 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -32,6 +32,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v6/datetime/buttons/s
 import CustomizingButtons from '@site/static/usage/v6/datetime/buttons/customizing-buttons/index.md';
 import CustomizingButtonTexts from '@site/static/usage/v6/datetime/buttons/customizing-button-texts/index.md';
 
+import HighlightedDatesArray from '@site/static/usage/v6/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v6/datetime/highlightedDates/callback/index.md';
+
 import MultipleDateSelection from '@site/static/usage/v6/datetime/multiple/index.md';
 
 import Theming from '@site/static/usage/v6/datetime/theming/index.md';
@@ -286,6 +289,24 @@ Developers can provide their own buttons for advanced custom behavior.
 
 <CustomizingButtons />
 
+## Highlighting Specific Dates
+
+Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
+
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
+
+### Using Array
+
+Note that provided `date` strings should not contain any time information.
+
+<HighlightedDatesArray />
+
+### Using Callback
+
+<HighlightedDatesCallback />
+
 ## Theming
 
 Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.

From f75661ea29ddd2bab096593ed9273c127048dcd4 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Mon, 13 Feb 2023 12:09:54 -0600
Subject: [PATCH 02/10] remove note about stripping time info after adding that
 directly to feature

---
 docs/api/datetime.md                      | 2 --
 versioned_docs/version-v6/api/datetime.md | 2 --
 2 files changed, 4 deletions(-)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index f42d3966a7b..123b89a6b67 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -296,8 +296,6 @@ This property is only supported when `preferWheel="false"`, and using a `present
 
 ### Using Array
 
-Note that provided `date` strings should not contain any time information.
-
 <HighlightedDatesArray />
 
 ### Using Callback
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index 3524e104496..5b9665c5d66 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -299,8 +299,6 @@ This property is only supported when `preferWheel="false"`, and using a `present
 
 ### Using Array
 
-Note that provided `date` strings should not contain any time information.
-
 <HighlightedDatesArray />
 
 ### Using Callback

From 14328c025ffd8ca2ba74dcc168c0624a2b0689d3 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Thu, 16 Feb 2023 13:06:41 -0600
Subject: [PATCH 03/10] rename color to textColor

---
 .../array/angular/example_component_ts.md            |  8 ++++----
 .../v6/datetime/highlightedDates/array/demo.html     | 12 ++++++------
 .../v6/datetime/highlightedDates/array/javascript.md |  8 ++++----
 .../v6/datetime/highlightedDates/array/react.md      |  8 ++++----
 .../usage/v6/datetime/highlightedDates/array/vue.md  |  8 ++++----
 .../callback/angular/example_component_ts.md         |  4 ++--
 .../v6/datetime/highlightedDates/callback/demo.html  |  8 ++++----
 .../datetime/highlightedDates/callback/javascript.md |  4 ++--
 .../v6/datetime/highlightedDates/callback/react.md   |  4 ++--
 .../v6/datetime/highlightedDates/callback/vue.md     |  4 ++--
 .../array/angular/example_component_ts.md            |  8 ++++----
 .../v7/datetime/highlightedDates/array/demo.html     | 12 ++++++------
 .../v7/datetime/highlightedDates/array/javascript.md |  8 ++++----
 .../v7/datetime/highlightedDates/array/react.md      |  8 ++++----
 .../usage/v7/datetime/highlightedDates/array/vue.md  |  8 ++++----
 .../callback/angular/example_component_ts.md         |  4 ++--
 .../v7/datetime/highlightedDates/callback/demo.html  |  8 ++++----
 .../datetime/highlightedDates/callback/javascript.md |  4 ++--
 .../v7/datetime/highlightedDates/callback/react.md   |  4 ++--
 .../v7/datetime/highlightedDates/callback/vue.md     |  4 ++--
 20 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
index 6a766080128..579d9d85247 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -9,22 +9,22 @@ export class ExampleComponent {
   public highlightedDates = [
     {
       date: '2023-01-05',
-      color: '#800080',
+      textColor: '#800080',
       backgroundColor: '#ffc0cb',
     },
     {
       date: '2023-01-10',
-      color: '#09721b',
+      textColor: '#09721b',
       backgroundColor: '#c8e5d0',
     },
     {
       date: '2023-01-20',
-      color: '#0000ff',
+      textColor: '#0000ff',
       backgroundColor: '#add8e6',
     },
     {
       date: '2023-01-23',
-      color: '#440ab8',
+      textColor: '#440ab8',
       backgroundColor: '#d3c8e5'
     }
   ];
diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html
index dfaac30f1bc..2b002ea90f8 100644
--- a/static/usage/v6/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v6/datetime/highlightedDates/array/demo.html
@@ -7,8 +7,8 @@
   <title>Datetime</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
@@ -30,22 +30,22 @@
     datetime.highlightedDates = [
       {
         date: '2023-01-05',
-        color: '#800080',
+        textColor: '#800080',
         backgroundColor: '#ffc0cb',
       },
       {
         date: '2023-01-10',
-        color: '#09721b',
+        textColor: '#09721b',
         backgroundColor: '#c8e5d0',
       },
       {
         date: '2023-01-20',
-        color: '#0000ff',
+        textColor: '#0000ff',
         backgroundColor: '#add8e6',
       },
       {
         date: '2023-01-23',
-        color: '#440ab8',
+        textColor: '#440ab8',
         backgroundColor: '#d3c8e5'
       }
     ];
diff --git a/static/usage/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md
index f4672fa951f..7536b08d32e 100644
--- a/static/usage/v6/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md
@@ -6,22 +6,22 @@
   datetime.highlightedDates = [
     {
       date: '2023-01-05',
-      color: '#800080',
+      textColor: '#800080',
       backgroundColor: '#ffc0cb',
     },
     {
       date: '2023-01-10',
-      color: '#09721b',
+      textColor: '#09721b',
       backgroundColor: '#c8e5d0',
     },
     {
       date: '2023-01-20',
-      color: '#0000ff',
+      textColor: '#0000ff',
       backgroundColor: '#add8e6',
     },
     {
       date: '2023-01-23',
-      color: '#440ab8',
+      textColor: '#440ab8',
       backgroundColor: '#d3c8e5'
     }
   ];
diff --git a/static/usage/v6/datetime/highlightedDates/array/react.md b/static/usage/v6/datetime/highlightedDates/array/react.md
index a1aa657d821..d8856499399 100644
--- a/static/usage/v6/datetime/highlightedDates/array/react.md
+++ b/static/usage/v6/datetime/highlightedDates/array/react.md
@@ -9,22 +9,22 @@ function Example() {
       highlightedDates={[
         {
           date: '2023-01-05',
-          color: '#800080',
+          textColor: '#800080',
           backgroundColor: '#ffc0cb',
         },
         {
           date: '2023-01-10',
-          color: '#09721b',
+          textColor: '#09721b',
           backgroundColor: '#c8e5d0',
         },
         {
           date: '2023-01-20',
-          color: '#0000ff',
+          textColor: '#0000ff',
           backgroundColor: '#add8e6',
         },
         {
           date: '2023-01-23',
-          color: '#440ab8',
+          textColor: '#440ab8',
           backgroundColor: '#d3c8e5'
         }
       ]}
diff --git a/static/usage/v6/datetime/highlightedDates/array/vue.md b/static/usage/v6/datetime/highlightedDates/array/vue.md
index dee90ff27e8..de68a3be483 100644
--- a/static/usage/v6/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v6/datetime/highlightedDates/array/vue.md
@@ -17,22 +17,22 @@
       const highlightedDates = [
         {
           date: '2023-01-05',
-          color: '#800080',
+          textColor: '#800080',
           backgroundColor: '#ffc0cb',
         },
         {
           date: '2023-01-10',
-          color: '#09721b',
+          textColor: '#09721b',
           backgroundColor: '#c8e5d0',
         },
         {
           date: '2023-01-20',
-          color: '#0000ff',
+          textColor: '#0000ff',
           backgroundColor: '#add8e6',
         },
         {
           date: '2023-01-23',
-          color: '#440ab8',
+          textColor: '#440ab8',
           backgroundColor: '#d3c8e5'
         }
       ];
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
index 0f143cddc53..b008f6d0a6e 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -12,14 +12,14 @@ export class ExampleComponent {
 
     if(utcDay % 5 === 0) {
       return {
-        color: '#800080',
+        textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
     if(utcDay % 3 === 0) {
       return {
-        color: '#0000ff',
+        textColor: '#0000ff',
         backgroundColor: '#add8e6',
       };
     }
diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html
index 49510d84a1b..c96d96dca75 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v6/datetime/highlightedDates/callback/demo.html
@@ -7,8 +7,8 @@
   <title>Datetime</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
@@ -33,14 +33,14 @@
 
       if(utcDay % 5 === 0) {
         return {
-          color: '#800080',
+          textColor: '#800080',
           backgroundColor: '#ffc0cb',
         };
       }
 
       if(utcDay % 3 === 0) {
         return {
-          color: '#0000ff',
+          textColor: '#0000ff',
           backgroundColor: '#add8e6',
         };
       }
diff --git a/static/usage/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
index 33eadbf4627..8c43597b7fa 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
@@ -9,14 +9,14 @@
 
     if(utcDay % 5 === 0) {
       return {
-        color: '#800080',
+        textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
     if(utcDay % 3 === 0) {
       return {
-        color: '#0000ff',
+        textColor: '#0000ff',
         backgroundColor: '#add8e6',
       };
     }
diff --git a/static/usage/v6/datetime/highlightedDates/callback/react.md b/static/usage/v6/datetime/highlightedDates/callback/react.md
index a78ff696322..c7a877d594a 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/react.md
@@ -11,14 +11,14 @@ function Example() {
 
         if(utcDay % 5 === 0) {
           return {
-            color: '#800080',
+            textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
         if(utcDay % 3 === 0) {
           return {
-            color: '#0000ff',
+            textColor: '#0000ff',
             backgroundColor: '#add8e6',
           };
         }
diff --git a/static/usage/v6/datetime/highlightedDates/callback/vue.md b/static/usage/v6/datetime/highlightedDates/callback/vue.md
index 790568f7573..3ef6ff049c3 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/vue.md
@@ -16,14 +16,14 @@
 
         if(utcDay % 5 === 0) {
           return {
-            color: '#800080',
+            textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
         if(utcDay % 3 === 0) {
           return {
-            color: '#0000ff',
+            textColor: '#0000ff',
             backgroundColor: '#add8e6',
           };
         }
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index 6a766080128..579d9d85247 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -9,22 +9,22 @@ export class ExampleComponent {
   public highlightedDates = [
     {
       date: '2023-01-05',
-      color: '#800080',
+      textColor: '#800080',
       backgroundColor: '#ffc0cb',
     },
     {
       date: '2023-01-10',
-      color: '#09721b',
+      textColor: '#09721b',
       backgroundColor: '#c8e5d0',
     },
     {
       date: '2023-01-20',
-      color: '#0000ff',
+      textColor: '#0000ff',
       backgroundColor: '#add8e6',
     },
     {
       date: '2023-01-23',
-      color: '#440ab8',
+      textColor: '#440ab8',
       backgroundColor: '#d3c8e5'
     }
   ];
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
index dfaac30f1bc..2b002ea90f8 100644
--- a/static/usage/v7/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -7,8 +7,8 @@
   <title>Datetime</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
@@ -30,22 +30,22 @@
     datetime.highlightedDates = [
       {
         date: '2023-01-05',
-        color: '#800080',
+        textColor: '#800080',
         backgroundColor: '#ffc0cb',
       },
       {
         date: '2023-01-10',
-        color: '#09721b',
+        textColor: '#09721b',
         backgroundColor: '#c8e5d0',
       },
       {
         date: '2023-01-20',
-        color: '#0000ff',
+        textColor: '#0000ff',
         backgroundColor: '#add8e6',
       },
       {
         date: '2023-01-23',
-        color: '#440ab8',
+        textColor: '#440ab8',
         backgroundColor: '#d3c8e5'
       }
     ];
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
index f4672fa951f..7536b08d32e 100644
--- a/static/usage/v7/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -6,22 +6,22 @@
   datetime.highlightedDates = [
     {
       date: '2023-01-05',
-      color: '#800080',
+      textColor: '#800080',
       backgroundColor: '#ffc0cb',
     },
     {
       date: '2023-01-10',
-      color: '#09721b',
+      textColor: '#09721b',
       backgroundColor: '#c8e5d0',
     },
     {
       date: '2023-01-20',
-      color: '#0000ff',
+      textColor: '#0000ff',
       backgroundColor: '#add8e6',
     },
     {
       date: '2023-01-23',
-      color: '#440ab8',
+      textColor: '#440ab8',
       backgroundColor: '#d3c8e5'
     }
   ];
diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md
index a1aa657d821..d8856499399 100644
--- a/static/usage/v7/datetime/highlightedDates/array/react.md
+++ b/static/usage/v7/datetime/highlightedDates/array/react.md
@@ -9,22 +9,22 @@ function Example() {
       highlightedDates={[
         {
           date: '2023-01-05',
-          color: '#800080',
+          textColor: '#800080',
           backgroundColor: '#ffc0cb',
         },
         {
           date: '2023-01-10',
-          color: '#09721b',
+          textColor: '#09721b',
           backgroundColor: '#c8e5d0',
         },
         {
           date: '2023-01-20',
-          color: '#0000ff',
+          textColor: '#0000ff',
           backgroundColor: '#add8e6',
         },
         {
           date: '2023-01-23',
-          color: '#440ab8',
+          textColor: '#440ab8',
           backgroundColor: '#d3c8e5'
         }
       ]}
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
index dee90ff27e8..de68a3be483 100644
--- a/static/usage/v7/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -17,22 +17,22 @@
       const highlightedDates = [
         {
           date: '2023-01-05',
-          color: '#800080',
+          textColor: '#800080',
           backgroundColor: '#ffc0cb',
         },
         {
           date: '2023-01-10',
-          color: '#09721b',
+          textColor: '#09721b',
           backgroundColor: '#c8e5d0',
         },
         {
           date: '2023-01-20',
-          color: '#0000ff',
+          textColor: '#0000ff',
           backgroundColor: '#add8e6',
         },
         {
           date: '2023-01-23',
-          color: '#440ab8',
+          textColor: '#440ab8',
           backgroundColor: '#d3c8e5'
         }
       ];
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index 0f143cddc53..b008f6d0a6e 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -12,14 +12,14 @@ export class ExampleComponent {
 
     if(utcDay % 5 === 0) {
       return {
-        color: '#800080',
+        textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
     if(utcDay % 3 === 0) {
       return {
-        color: '#0000ff',
+        textColor: '#0000ff',
         backgroundColor: '#add8e6',
       };
     }
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
index 49510d84a1b..c96d96dca75 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html
@@ -7,8 +7,8 @@
   <title>Datetime</title>
   <link rel="stylesheet" href="../../../../common.css" />
   <script src="../../../../common.js"></script>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/dist/ionic/ionic.esm.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676304326.136579da/css/ionic.bundle.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6.5.3-dev.11676573595.1564fefe/css/ionic.bundle.css" />
   <style>
     ion-datetime {
       width: 350px;
@@ -33,14 +33,14 @@
 
       if(utcDay % 5 === 0) {
         return {
-          color: '#800080',
+          textColor: '#800080',
           backgroundColor: '#ffc0cb',
         };
       }
 
       if(utcDay % 3 === 0) {
         return {
-          color: '#0000ff',
+          textColor: '#0000ff',
           backgroundColor: '#add8e6',
         };
       }
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
index 33eadbf4627..8c43597b7fa 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -9,14 +9,14 @@
 
     if(utcDay % 5 === 0) {
       return {
-        color: '#800080',
+        textColor: '#800080',
         backgroundColor: '#ffc0cb',
       };
     }
 
     if(utcDay % 3 === 0) {
       return {
-        color: '#0000ff',
+        textColor: '#0000ff',
         backgroundColor: '#add8e6',
       };
     }
diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md
index a78ff696322..c7a877d594a 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/react.md
@@ -11,14 +11,14 @@ function Example() {
 
         if(utcDay % 5 === 0) {
           return {
-            color: '#800080',
+            textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
         if(utcDay % 3 === 0) {
           return {
-            color: '#0000ff',
+            textColor: '#0000ff',
             backgroundColor: '#add8e6',
           };
         }
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
index 790568f7573..3ef6ff049c3 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -16,14 +16,14 @@
 
         if(utcDay % 5 === 0) {
           return {
-            color: '#800080',
+            textColor: '#800080',
             backgroundColor: '#ffc0cb',
           };
         }
 
         if(utcDay % 3 === 0) {
           return {
-            color: '#0000ff',
+            textColor: '#0000ff',
             backgroundColor: '#add8e6',
           };
         }

From a4385b986591aa57ee43dcbc9c53f90feedd91af Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Fri, 17 Feb 2023 10:32:54 -0600
Subject: [PATCH 04/10] add note about selected date styles taking priority

---
 docs/api/datetime.md                      | 2 ++
 versioned_docs/version-v6/api/datetime.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 123b89a6b67..5ded372c944 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -290,6 +290,8 @@ Developers can provide their own buttons for advanced custom behavior.
 
 Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
 
+To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+
 :::note
 This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
 :::
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index 5b9665c5d66..97960069fe1 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -293,6 +293,8 @@ Developers can provide their own buttons for advanced custom behavior.
 
 Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
 
+To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
+
 :::note
 This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
 :::

From 9eb84c014fe8c5e0fed939066e1f413b5e2966a9 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Fri, 17 Feb 2023 10:37:03 -0600
Subject: [PATCH 05/10] add details on why array vs callback

---
 docs/api/datetime.md                      | 4 ++++
 versioned_docs/version-v6/api/datetime.md | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 5ded372c944..ea48cae25ef 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -298,10 +298,14 @@ This property is only supported when `preferWheel="false"`, and using a `present
 
 ### Using Array
 
+An array is better when the highlights apply to fixed dates, such as due dates.
+
 <HighlightedDatesArray />
 
 ### Using Callback
 
+A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+
 <HighlightedDatesCallback />
 
 ## Theming
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index 97960069fe1..856b2225839 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -301,10 +301,14 @@ This property is only supported when `preferWheel="false"`, and using a `present
 
 ### Using Array
 
+An array is better when the highlights apply to fixed dates, such as due dates.
+
 <HighlightedDatesArray />
 
 ### Using Callback
 
+A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
+
 <HighlightedDatesCallback />
 
 ## Theming

From 091419eadd036bff88929dd6517061f303cd0107 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Fri, 17 Feb 2023 10:39:29 -0600
Subject: [PATCH 06/10] remove explicit public from Angular examples

---
 .../highlightedDates/array/angular/example_component_ts.md      | 2 +-
 .../highlightedDates/array/angular/example_component_ts.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
index 579d9d85247..bd91e3d4d2a 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public highlightedDates = [
+  highlightedDates = [
     {
       date: '2023-01-05',
       textColor: '#800080',
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index 579d9d85247..bd91e3d4d2a 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: 'example.component.html',
 })
 export class ExampleComponent {
-  public highlightedDates = [
+  highlightedDates = [
     {
       date: '2023-01-05',
       textColor: '#800080',

From 0500767aff7bb4df5b2b5ed7295b912a5beffcdb Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Fri, 17 Feb 2023 10:52:04 -0600
Subject: [PATCH 07/10] use different formats for colors in examples

---
 .../array/angular/example_component_ts.md                 | 8 ++++----
 static/usage/v6/datetime/highlightedDates/array/demo.html | 8 ++++----
 .../v6/datetime/highlightedDates/array/javascript.md      | 8 ++++----
 static/usage/v6/datetime/highlightedDates/array/react.md  | 8 ++++----
 static/usage/v6/datetime/highlightedDates/array/vue.md    | 8 ++++----
 .../callback/angular/example_component_ts.md              | 4 ++--
 .../usage/v6/datetime/highlightedDates/callback/demo.html | 4 ++--
 .../v6/datetime/highlightedDates/callback/javascript.md   | 4 ++--
 .../usage/v6/datetime/highlightedDates/callback/react.md  | 4 ++--
 static/usage/v6/datetime/highlightedDates/callback/vue.md | 4 ++--
 .../array/angular/example_component_ts.md                 | 8 ++++----
 static/usage/v7/datetime/highlightedDates/array/demo.html | 8 ++++----
 .../v7/datetime/highlightedDates/array/javascript.md      | 8 ++++----
 static/usage/v7/datetime/highlightedDates/array/react.md  | 8 ++++----
 static/usage/v7/datetime/highlightedDates/array/vue.md    | 8 ++++----
 .../callback/angular/example_component_ts.md              | 4 ++--
 .../usage/v7/datetime/highlightedDates/callback/demo.html | 4 ++--
 .../v7/datetime/highlightedDates/callback/javascript.md   | 4 ++--
 .../usage/v7/datetime/highlightedDates/callback/react.md  | 4 ++--
 static/usage/v7/datetime/highlightedDates/callback/vue.md | 4 ++--
 20 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
index bd91e3d4d2a..4b46ab4c705 100644
--- a/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -19,13 +19,13 @@ export class ExampleComponent {
     },
     {
       date: '2023-01-20',
-      textColor: '#0000ff',
-      backgroundColor: '#add8e6',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
     },
     {
       date: '2023-01-23',
-      textColor: '#440ab8',
-      backgroundColor: '#d3c8e5'
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
     }
   ];
 }
diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html
index 2b002ea90f8..d8faeba5b8b 100644
--- a/static/usage/v6/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v6/datetime/highlightedDates/array/demo.html
@@ -40,13 +40,13 @@
       },
       {
         date: '2023-01-20',
-        textColor: '#0000ff',
-        backgroundColor: '#add8e6',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       },
       {
         date: '2023-01-23',
-        textColor: '#440ab8',
-        backgroundColor: '#d3c8e5'
+        textColor: 'rgb(68, 10, 184)',
+        backgroundColor: 'rgb(211, 200, 229)'
       }
     ];
   </script>
diff --git a/static/usage/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md
index 7536b08d32e..4165071ad0c 100644
--- a/static/usage/v6/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md
@@ -16,13 +16,13 @@
     },
     {
       date: '2023-01-20',
-      textColor: '#0000ff',
-      backgroundColor: '#add8e6',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
     },
     {
       date: '2023-01-23',
-      textColor: '#440ab8',
-      backgroundColor: '#d3c8e5'
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
     }
   ];
 </script>
diff --git a/static/usage/v6/datetime/highlightedDates/array/react.md b/static/usage/v6/datetime/highlightedDates/array/react.md
index d8856499399..a9ef5c776d9 100644
--- a/static/usage/v6/datetime/highlightedDates/array/react.md
+++ b/static/usage/v6/datetime/highlightedDates/array/react.md
@@ -19,13 +19,13 @@ function Example() {
         },
         {
           date: '2023-01-20',
-          textColor: '#0000ff',
-          backgroundColor: '#add8e6',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
         },
         {
           date: '2023-01-23',
-          textColor: '#440ab8',
-          backgroundColor: '#d3c8e5'
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
         }
       ]}
     ></IonDatetime>
diff --git a/static/usage/v6/datetime/highlightedDates/array/vue.md b/static/usage/v6/datetime/highlightedDates/array/vue.md
index de68a3be483..62dbec39055 100644
--- a/static/usage/v6/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v6/datetime/highlightedDates/array/vue.md
@@ -27,13 +27,13 @@
         },
         {
           date: '2023-01-20',
-          textColor: '#0000ff',
-          backgroundColor: '#add8e6',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
         },
         {
           date: '2023-01-23',
-          textColor: '#440ab8',
-          backgroundColor: '#d3c8e5'
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
         }
       ];
       
diff --git a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
index b008f6d0a6e..7186ae3cc64 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -19,8 +19,8 @@ export class ExampleComponent {
 
     if(utcDay % 3 === 0) {
       return {
-        textColor: '#0000ff',
-        backgroundColor: '#add8e6',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       };
     }
 
diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html
index c96d96dca75..50c62e09c5f 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v6/datetime/highlightedDates/callback/demo.html
@@ -40,8 +40,8 @@
 
       if(utcDay % 3 === 0) {
         return {
-          textColor: '#0000ff',
-          backgroundColor: '#add8e6',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
         };
       }
 
diff --git a/static/usage/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
index 8c43597b7fa..008e11c4297 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
@@ -16,8 +16,8 @@
 
     if(utcDay % 3 === 0) {
       return {
-        textColor: '#0000ff',
-        backgroundColor: '#add8e6',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       };
     }
 
diff --git a/static/usage/v6/datetime/highlightedDates/callback/react.md b/static/usage/v6/datetime/highlightedDates/callback/react.md
index c7a877d594a..6830e55eeff 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/react.md
@@ -18,8 +18,8 @@ function Example() {
 
         if(utcDay % 3 === 0) {
           return {
-            textColor: '#0000ff',
-            backgroundColor: '#add8e6',
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
           };
         }
 
diff --git a/static/usage/v6/datetime/highlightedDates/callback/vue.md b/static/usage/v6/datetime/highlightedDates/callback/vue.md
index 3ef6ff049c3..54873e03eaa 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/vue.md
@@ -23,8 +23,8 @@
 
         if(utcDay % 3 === 0) {
           return {
-            textColor: '#0000ff',
-            backgroundColor: '#add8e6',
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
           };
         }
 
diff --git a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
index bd91e3d4d2a..4b46ab4c705 100644
--- a/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -19,13 +19,13 @@ export class ExampleComponent {
     },
     {
       date: '2023-01-20',
-      textColor: '#0000ff',
-      backgroundColor: '#add8e6',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
     },
     {
       date: '2023-01-23',
-      textColor: '#440ab8',
-      backgroundColor: '#d3c8e5'
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
     }
   ];
 }
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
index 2b002ea90f8..d8faeba5b8b 100644
--- a/static/usage/v7/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -40,13 +40,13 @@
       },
       {
         date: '2023-01-20',
-        textColor: '#0000ff',
-        backgroundColor: '#add8e6',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       },
       {
         date: '2023-01-23',
-        textColor: '#440ab8',
-        backgroundColor: '#d3c8e5'
+        textColor: 'rgb(68, 10, 184)',
+        backgroundColor: 'rgb(211, 200, 229)'
       }
     ];
   </script>
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
index 7536b08d32e..4165071ad0c 100644
--- a/static/usage/v7/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -16,13 +16,13 @@
     },
     {
       date: '2023-01-20',
-      textColor: '#0000ff',
-      backgroundColor: '#add8e6',
+      textColor: 'var(--ion-color-secondary-contrast)',
+      backgroundColor: 'var(--ion-color-secondary)',
     },
     {
       date: '2023-01-23',
-      textColor: '#440ab8',
-      backgroundColor: '#d3c8e5'
+      textColor: 'rgb(68, 10, 184)',
+      backgroundColor: 'rgb(211, 200, 229)'
     }
   ];
 </script>
diff --git a/static/usage/v7/datetime/highlightedDates/array/react.md b/static/usage/v7/datetime/highlightedDates/array/react.md
index d8856499399..a9ef5c776d9 100644
--- a/static/usage/v7/datetime/highlightedDates/array/react.md
+++ b/static/usage/v7/datetime/highlightedDates/array/react.md
@@ -19,13 +19,13 @@ function Example() {
         },
         {
           date: '2023-01-20',
-          textColor: '#0000ff',
-          backgroundColor: '#add8e6',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
         },
         {
           date: '2023-01-23',
-          textColor: '#440ab8',
-          backgroundColor: '#d3c8e5'
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
         }
       ]}
     ></IonDatetime>
diff --git a/static/usage/v7/datetime/highlightedDates/array/vue.md b/static/usage/v7/datetime/highlightedDates/array/vue.md
index de68a3be483..62dbec39055 100644
--- a/static/usage/v7/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/array/vue.md
@@ -27,13 +27,13 @@
         },
         {
           date: '2023-01-20',
-          textColor: '#0000ff',
-          backgroundColor: '#add8e6',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
         },
         {
           date: '2023-01-23',
-          textColor: '#440ab8',
-          backgroundColor: '#d3c8e5'
+          textColor: 'rgb(68, 10, 184)',
+          backgroundColor: 'rgb(211, 200, 229)'
         }
       ];
       
diff --git a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
index b008f6d0a6e..7186ae3cc64 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -19,8 +19,8 @@ export class ExampleComponent {
 
     if(utcDay % 3 === 0) {
       return {
-        textColor: '#0000ff',
-        backgroundColor: '#add8e6',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       };
     }
 
diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html
index c96d96dca75..50c62e09c5f 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html
@@ -40,8 +40,8 @@
 
       if(utcDay % 3 === 0) {
         return {
-          textColor: '#0000ff',
-          backgroundColor: '#add8e6',
+          textColor: 'var(--ion-color-secondary-contrast)',
+          backgroundColor: 'var(--ion-color-secondary)',
         };
       }
 
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
index 8c43597b7fa..008e11c4297 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -16,8 +16,8 @@
 
     if(utcDay % 3 === 0) {
       return {
-        textColor: '#0000ff',
-        backgroundColor: '#add8e6',
+        textColor: 'var(--ion-color-secondary-contrast)',
+        backgroundColor: 'var(--ion-color-secondary)',
       };
     }
 
diff --git a/static/usage/v7/datetime/highlightedDates/callback/react.md b/static/usage/v7/datetime/highlightedDates/callback/react.md
index c7a877d594a..6830e55eeff 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/react.md
@@ -18,8 +18,8 @@ function Example() {
 
         if(utcDay % 3 === 0) {
           return {
-            textColor: '#0000ff',
-            backgroundColor: '#add8e6',
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
           };
         }
 
diff --git a/static/usage/v7/datetime/highlightedDates/callback/vue.md b/static/usage/v7/datetime/highlightedDates/callback/vue.md
index 3ef6ff049c3..54873e03eaa 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/vue.md
@@ -23,8 +23,8 @@
 
         if(utcDay % 3 === 0) {
           return {
-            textColor: '#0000ff',
-            backgroundColor: '#add8e6',
+            textColor: 'var(--ion-color-secondary-contrast)',
+            backgroundColor: 'var(--ion-color-secondary)',
           };
         }
 

From 97e2726172ac57c7b97f1598e2f16ee26eece9c3 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Fri, 17 Feb 2023 10:55:04 -0600
Subject: [PATCH 08/10] mention that you can use any color format

---
 docs/api/datetime.md                      | 2 ++
 versioned_docs/version-v6/api/datetime.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index ea48cae25ef..082d75358ba 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -290,6 +290,8 @@ Developers can provide their own buttons for advanced custom behavior.
 
 Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
 
+When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+
 To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
 
 :::note
diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md
index 856b2225839..a4f93b4655c 100644
--- a/versioned_docs/version-v6/api/datetime.md
+++ b/versioned_docs/version-v6/api/datetime.md
@@ -293,6 +293,8 @@ Developers can provide their own buttons for advanced custom behavior.
 
 Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
 
+When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
+
 To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
 
 :::note

From 7890b6b44722a714ca3a4c89cbac64a3c83d8896 Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Fri, 17 Feb 2023 10:56:08 -0600
Subject: [PATCH 09/10] var instead of const for JS examples

---
 static/usage/v6/datetime/highlightedDates/array/javascript.md   | 2 +-
 .../usage/v6/datetime/highlightedDates/callback/javascript.md   | 2 +-
 static/usage/v7/datetime/highlightedDates/array/javascript.md   | 2 +-
 .../usage/v7/datetime/highlightedDates/callback/javascript.md   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/usage/v6/datetime/highlightedDates/array/javascript.md b/static/usage/v6/datetime/highlightedDates/array/javascript.md
index 4165071ad0c..5a702fbfab1 100644
--- a/static/usage/v6/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/array/javascript.md
@@ -2,7 +2,7 @@
 <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
 
 <script>
-  const datetime = document.querySelector('ion-datetime');
+  var datetime = document.querySelector('ion-datetime');
   datetime.highlightedDates = [
     {
       date: '2023-01-05',
diff --git a/static/usage/v6/datetime/highlightedDates/callback/javascript.md b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
index 008e11c4297..270967cccd8 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/javascript.md
@@ -2,7 +2,7 @@
 <ion-datetime presentation="date"></ion-datetime>
 
 <script>
-  const datetime = document.querySelector('ion-datetime');
+  var datetime = document.querySelector('ion-datetime');
   datetime.highlightedDates = (isoString) => {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();
diff --git a/static/usage/v7/datetime/highlightedDates/array/javascript.md b/static/usage/v7/datetime/highlightedDates/array/javascript.md
index 4165071ad0c..5a702fbfab1 100644
--- a/static/usage/v7/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/array/javascript.md
@@ -2,7 +2,7 @@
 <ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
 
 <script>
-  const datetime = document.querySelector('ion-datetime');
+  var datetime = document.querySelector('ion-datetime');
   datetime.highlightedDates = [
     {
       date: '2023-01-05',
diff --git a/static/usage/v7/datetime/highlightedDates/callback/javascript.md b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
index 008e11c4297..270967cccd8 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/javascript.md
@@ -2,7 +2,7 @@
 <ion-datetime presentation="date"></ion-datetime>
 
 <script>
-  const datetime = document.querySelector('ion-datetime');
+  var datetime = document.querySelector('ion-datetime');
   datetime.highlightedDates = (isoString) => {
     const date = new Date(isoString);
     const utcDay = date.getUTCDate();

From 9de99ae9980cd587889788b9cd347716610f40ae Mon Sep 17 00:00:00 2001
From: amandaesmith333 <amandaesmith333@gmail.com>
Date: Mon, 20 Feb 2023 11:03:07 -0600
Subject: [PATCH 10/10] specify playground versions

---
 static/usage/v6/datetime/highlightedDates/array/index.md    | 1 +
 static/usage/v6/datetime/highlightedDates/callback/index.md | 1 +
 static/usage/v7/datetime/highlightedDates/array/index.md    | 1 +
 static/usage/v7/datetime/highlightedDates/callback/index.md | 1 +
 4 files changed, 4 insertions(+)

diff --git a/static/usage/v6/datetime/highlightedDates/array/index.md b/static/usage/v6/datetime/highlightedDates/array/index.md
index 166c5f30cb4..6eb7c9ec130 100644
--- a/static/usage/v6/datetime/highlightedDates/array/index.md
+++ b/static/usage/v6/datetime/highlightedDates/array/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   size="medium"
+  version={6}
   code={{
     javascript,
     react,
diff --git a/static/usage/v6/datetime/highlightedDates/callback/index.md b/static/usage/v6/datetime/highlightedDates/callback/index.md
index 25a61b3d896..106ec4476e7 100644
--- a/static/usage/v6/datetime/highlightedDates/callback/index.md
+++ b/static/usage/v6/datetime/highlightedDates/callback/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   size="medium"
+  version={6}
   code={{
     javascript,
     react,
diff --git a/static/usage/v7/datetime/highlightedDates/array/index.md b/static/usage/v7/datetime/highlightedDates/array/index.md
index 06e80f607d8..6438d84fcf3 100644
--- a/static/usage/v7/datetime/highlightedDates/array/index.md
+++ b/static/usage/v7/datetime/highlightedDates/array/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   size="medium"
+  version={7}
   code={{
     javascript,
     react,
diff --git a/static/usage/v7/datetime/highlightedDates/callback/index.md b/static/usage/v7/datetime/highlightedDates/callback/index.md
index 294e127a7e2..106f90210cf 100644
--- a/static/usage/v7/datetime/highlightedDates/callback/index.md
+++ b/static/usage/v7/datetime/highlightedDates/callback/index.md
@@ -9,6 +9,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   size="medium"
+  version={7}
   code={{
     javascript,
     react,