mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-09 10:26:52 +00:00
Update clock docs (#38333)
* Improve clock docs * Fix caption * Fix typos
This commit is contained in:
parent
fc36dc6785
commit
cb438bb9be
@ -8,7 +8,7 @@ related:
|
|||||||
title: Setup your time format and timezone
|
title: Setup your time format and timezone
|
||||||
---
|
---
|
||||||
|
|
||||||
The Clock card shows the current time in a variety of formats and sizes.
|
The Clock card shows the current time in a variety of formats, sizes and time zones.
|
||||||
|
|
||||||
<p class='img'>
|
<p class='img'>
|
||||||
<img src='/images/dashboards/clock_card_large.png' alt='Screenshot of the clock card'>
|
<img src='/images/dashboards/clock_card_large.png' alt='Screenshot of the clock card'>
|
||||||
@ -23,12 +23,16 @@ All options for this card can be configured via the user interface.
|
|||||||
## Card settings
|
## Card settings
|
||||||
|
|
||||||
{% configuration_basic %}
|
{% configuration_basic %}
|
||||||
|
Title:
|
||||||
|
description: Adds a title to the top of the card
|
||||||
Clock Size:
|
Clock Size:
|
||||||
description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small.
|
description: Adjusts the size of the text allowing a wider range of use with different types of dashboards. Defaults to small.
|
||||||
Display Seconds:
|
Display Seconds:
|
||||||
description: Shows seconds alongside the clock, providing the time format is in a 12-hour format.
|
description: Shows seconds alongside the clock, providing the time format is in a 12-hour format.
|
||||||
Time Format:
|
Time Format:
|
||||||
description: Allows the time format to be changed on a per-card level. Defaults to the user profile setting.
|
description: Allows the time format to be changed on a per-card level. Defaults to the user profile setting.
|
||||||
|
Time Zone:
|
||||||
|
description: Change the timezone used for the time on a per-card level. Defaults to the user profile setting.
|
||||||
{% endconfiguration_basic %}
|
{% endconfiguration_basic %}
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
@ -39,25 +43,21 @@ Basic example:
|
|||||||
type: clock
|
type: clock
|
||||||
```
|
```
|
||||||
|
|
||||||
Clock card with no configuration
|
|
||||||
|
|
||||||
<p class='img'>
|
<p class='img'>
|
||||||
<img src='/images/dashboards/clock_card_default.png' alt='Screenshot of the basic clock card'>
|
<img src='/images/dashboards/clock_card_default.png' alt='Screenshot of the basic clock card'>
|
||||||
Screenshot of the basic clock card
|
Screenshot of the basic clock card
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
Example of a larger clock card for tablet dashboards:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
type: clock
|
type: clock
|
||||||
clock_size: large
|
clock_size: large
|
||||||
time_format: "12"
|
time_format: "12"
|
||||||
show_seconds: true
|
show_seconds: true
|
||||||
grid_options:
|
|
||||||
columns: 12
|
|
||||||
rows: 2
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Example of a larger clock card for tablet dashboards:
|
|
||||||
|
|
||||||
<p class='img'>
|
<p class='img'>
|
||||||
<img src='/images/dashboards/clock_card_large.png' alt='Screenshot of a large sized, 12 hour clock card showing am/pm and seconds'>
|
<img src='/images/dashboards/clock_card_large.png' alt='Screenshot of a large sized, 12 hour clock card showing am/pm and seconds'>
|
||||||
Screenshot of a large sized, 12 hour clock card showing am/pm and seconds
|
Screenshot of a large sized, 12 hour clock card showing am/pm and seconds
|
||||||
@ -75,4 +75,35 @@ show_seconds: false
|
|||||||
<p class='img'>
|
<p class='img'>
|
||||||
<img src='/images/dashboards/clock_card_medium.png' alt='Screenshot of a medium sized, 12 hour clock showing am/pm'>
|
<img src='/images/dashboards/clock_card_medium.png' alt='Screenshot of a medium sized, 12 hour clock showing am/pm'>
|
||||||
Screenshot of a medium sized, 12 hour clock showing am/pm
|
Screenshot of a medium sized, 12 hour clock showing am/pm
|
||||||
|
</p>
|
||||||
|
|
||||||
|
A medium-sized, 24 hour clock using the London timezone with a title
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: clock
|
||||||
|
clock_size: medium
|
||||||
|
time_zone: Europe/London
|
||||||
|
title: London 💂
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
<p class='img'>
|
||||||
|
<img src='/images/dashboards/clock_card_london.png' alt='Screenshot of a medium sized, 24 hour clock showing seconds based in London along with a title'>
|
||||||
|
Screenshot of a medium sized, 24 hour clock showing seconds based in London along with a title
|
||||||
|
</p>
|
||||||
|
|
||||||
|
A medium-sized, 12 hour clock using the New York timezone with a title
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: clock
|
||||||
|
clock_size: medium
|
||||||
|
time_format: "12"
|
||||||
|
time_zone: America/New_York
|
||||||
|
title: New York 🦅
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
<p class='img'>
|
||||||
|
<img src='/images/dashboards/clock_card_new_york.png' alt='Screenshot of a medium sized, 12 hour clock showing am/pm and seconds based in New York along with a title'>
|
||||||
|
Screenshot of a medium sized, 12 hour clock showing am/pm and seconds based in New York along with a title
|
||||||
</p>
|
</p>
|
BIN
source/images/dashboards/clock_card_london.png
Normal file
BIN
source/images/dashboards/clock_card_london.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
BIN
source/images/dashboards/clock_card_new_york.png
Normal file
BIN
source/images/dashboards/clock_card_new_york.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.8 KiB |
Loading…
x
Reference in New Issue
Block a user