Skip to content

Commit 5195f65

Browse files
thetaPCthetaPC
authored
docs(datetime): add header section for parts styling (#4395)
1 parent c28627b commit 5195f65

File tree

20 files changed

+312
-0
lines changed

20 files changed

+312
-0
lines changed

‎docs/api/datetime.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/
4141
import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md';
4242

4343
import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
44+
import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md';
4445
import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md';
4546
import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md';
4647

@@ -352,6 +353,14 @@ The benefit of this approach is that every component, not just `ion-datetime`, c
352353

353354
<GlobalTheming />
354355

356+
### Calender Header
357+
358+
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.
359+
360+
The header can be styled using CSS shadow parts.
361+
362+
<CalendarHeaderStyling />
363+
355364
### Calendar Days
356365

357366
The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.

‎static/usage/v7/datetime/styling/calendar-header/angular/example_component_css.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
/*
3+
* Custom Datetime Calendar Header Part
4+
* -------------------------------------------
5+
*/
6+
ion-datetime::part(month-year-button) {
7+
background-color: lightblue;
8+
}
9+
```

‎static/usage/v7/datetime/styling/calendar-header/angular/example_component_html.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-datetime presentation="date"></ion-datetime>
3+
```

‎static/usage/v7/datetime/styling/calendar-header/angular/example_component_ts.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonDatetime } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['./example.component.css'],
9+
imports: [IonDatetime],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/datetime/styling/calendar-header/demo.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Datetime</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
12+
<style>
13+
/*
14+
* Custom Datetime Calendar Header Parts
15+
* -------------------------------------------
16+
*/
17+
18+
ion-datetime::part(month-year-button) {
19+
background-color: lightblue;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<ion-app>
26+
<ion-content>
27+
<div class="container">
28+
<ion-datetime presentation="date"></ion-datetime>
29+
</div>
30+
</ion-content>
31+
</ion-app>
32+
</body>
33+
</html>

‎static/usage/v7/datetime/styling/calendar-header/index.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_example_component_ts from './angular/example_component_ts.md';
13+
14+
<Playground
15+
version="7"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.css': angular_example_component_css,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
},
32+
}}
33+
src="usage/v7/datetime/styling/calendar-header/demo.html"
34+
size="medium"
35+
/>

‎static/usage/v7/datetime/styling/calendar-header/javascript.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```html
2+
<ion-datetime presentation="date"></ion-datetime>
3+
4+
<style>
5+
/*
6+
* Custom Datetime Calendar Header Part
7+
* -------------------------------------------
8+
*/
9+
ion-datetime::part(month-year-button) {
10+
background-color: lightblue;
11+
}
12+
</style>
13+
```

‎static/usage/v7/datetime/styling/calendar-header/react/main_css.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
/*
3+
* Custom Datetime Calendar Header Part
4+
* -------------------------------------------
5+
*/
6+
ion-datetime::part(month-year-button) {
7+
background-color: lightblue;
8+
}
9+
```

‎static/usage/v7/datetime/styling/calendar-header/react/main_tsx.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<>
10+
<IonDatetime presentation="date"></IonDatetime>
11+
</>
12+
);
13+
}
14+
export default Example;
15+
```

‎static/usage/v7/datetime/styling/calendar-header/vue.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```html
2+
<template>
3+
<ion-datetime presentation="date"></ion-datetime>
4+
</template>
5+
6+
<script setup lang="ts">
7+
import { IonDatetime } from '@ionic/vue';
8+
</script>
9+
10+
<style scoped>
11+
/*
12+
* Custom Datetime Calendar Header Part
13+
* -------------------------------------------
14+
*/
15+
ion-datetime::part(month-year-button) {
16+
background-color: lightblue;
17+
}
18+
</style>
19+
```

0 commit comments

Comments
 (0)