diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 54a1efc8750..252d8c8d945 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -41,6 +41,7 @@ import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/ import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md'; import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md'; +import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md'; import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md'; import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md'; @@ -352,6 +353,14 @@ The benefit of this approach is that every component, not just `ion-datetime`, c +### Calender Header + +The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout. + +The header can be styled using CSS shadow parts. + + + ### Calendar Days The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts. diff --git a/static/usage/v7/datetime/styling/calendar-header/angular/example_component_css.md b/static/usage/v7/datetime/styling/calendar-header/angular/example_component_css.md new file mode 100644 index 00000000000..f95379ddaa9 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +/* + * Custom Datetime Calendar Header Part + * ------------------------------------------- + */ +ion-datetime::part(month-year-button) { + background-color: lightblue; +} +``` diff --git a/static/usage/v7/datetime/styling/calendar-header/angular/example_component_html.md b/static/usage/v7/datetime/styling/calendar-header/angular/example_component_html.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v7/datetime/styling/calendar-header/angular/example_component_ts.md b/static/usage/v7/datetime/styling/calendar-header/angular/example_component_ts.md new file mode 100644 index 00000000000..75ed761f6e8 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/datetime/styling/calendar-header/demo.html b/static/usage/v7/datetime/styling/calendar-header/demo.html new file mode 100644 index 00000000000..04722724631 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/demo.html @@ -0,0 +1,33 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/styling/calendar-header/index.md b/static/usage/v7/datetime/styling/calendar-header/index.md new file mode 100644 index 00000000000..555268bf232 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/datetime/styling/calendar-header/javascript.md b/static/usage/v7/datetime/styling/calendar-header/javascript.md new file mode 100644 index 00000000000..fc936e5efea --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/javascript.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/styling/calendar-header/react/main_css.md b/static/usage/v7/datetime/styling/calendar-header/react/main_css.md new file mode 100644 index 00000000000..f95379ddaa9 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/react/main_css.md @@ -0,0 +1,9 @@ +```css +/* + * Custom Datetime Calendar Header Part + * ------------------------------------------- + */ +ion-datetime::part(month-year-button) { + background-color: lightblue; +} +``` diff --git a/static/usage/v7/datetime/styling/calendar-header/react/main_tsx.md b/static/usage/v7/datetime/styling/calendar-header/react/main_tsx.md new file mode 100644 index 00000000000..e51f8f11e86 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/datetime/styling/calendar-header/vue.md b/static/usage/v7/datetime/styling/calendar-header/vue.md new file mode 100644 index 00000000000..16b7da10a40 --- /dev/null +++ b/static/usage/v7/datetime/styling/calendar-header/vue.md @@ -0,0 +1,19 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md new file mode 100644 index 00000000000..f95379ddaa9 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +/* + * Custom Datetime Calendar Header Part + * ------------------------------------------- + */ +ion-datetime::part(month-year-button) { + background-color: lightblue; +} +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_html.md b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_html.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_ts.md new file mode 100644 index 00000000000..75ed761f6e8 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/demo.html b/static/usage/v8/datetime/styling/calendar-header/demo.html new file mode 100644 index 00000000000..331140d4bb4 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/demo.html @@ -0,0 +1,33 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/styling/calendar-header/index.md b/static/usage/v8/datetime/styling/calendar-header/index.md new file mode 100644 index 00000000000..346447efff2 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/datetime/styling/calendar-header/javascript.md b/static/usage/v8/datetime/styling/calendar-header/javascript.md new file mode 100644 index 00000000000..fc936e5efea --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/javascript.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/react/main_css.md b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md new file mode 100644 index 00000000000..f95379ddaa9 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/react/main_css.md @@ -0,0 +1,9 @@ +```css +/* + * Custom Datetime Calendar Header Part + * ------------------------------------------- + */ +ion-datetime::part(month-year-button) { + background-color: lightblue; +} +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/react/main_tsx.md b/static/usage/v8/datetime/styling/calendar-header/react/main_tsx.md new file mode 100644 index 00000000000..e51f8f11e86 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/styling/calendar-header/vue.md b/static/usage/v8/datetime/styling/calendar-header/vue.md new file mode 100644 index 00000000000..16b7da10a40 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-header/vue.md @@ -0,0 +1,19 @@ +```html + + + + + +``` diff --git a/versioned_docs/version-v7/api/datetime.md b/versioned_docs/version-v7/api/datetime.md index a97925e41b8..5a59ea157df 100644 --- a/versioned_docs/version-v7/api/datetime.md +++ b/versioned_docs/version-v7/api/datetime.md @@ -40,6 +40,7 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md'; import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md'; +import CalendarHeaderStyling from '@site/static/usage/v7/datetime/styling/calendar-header/index.md'; import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.md'; import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md'; @@ -341,6 +342,12 @@ The benefit of this approach is that every component, not just `ion-datetime`, c +### Calender Header + +The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout. + + + ### Calendar Days The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.