Displays the current date and time. 
Clicking on the widget opens a popup with the time and a calendar.

![Screenshot of clock widget with popup open](https://f.jstanger.dev/github/ironbar/modules/clock.png)


## Configuration

> Type: `clock`

| Name                | Type                                                       | Default                            | Description                                                                         |
|---------------------|------------------------------------------------------------|------------------------------------|-------------------------------------------------------------------------------------|
| `format`            | `string`                                                   | `%d/%m/%Y %H:%M`                   | Date/time format string. Pango markup is supported.                                 |
| `format_popup`      | `string`                                                   | `%H:%M:%S`                         | Date/time format string to display in the popup header. Pango markup is supported.  |
| `locale`            | `string`                                                   | `$LC_TIME` or `$LANG` or `'POSIX'` | Locale to use (eg `en_GB`). Defaults to the system language (reading from env var). |
| `show_week_numbers` | `boolean`                                                  | `false`                            | Whether to show the week numbers in the popup calendar.                             |
| `orientation`       | `'horizontal'` or `'vertical'` (shorthand: `'h'` or `'v'`) | `'horizontal'`                     | Orientation of the time on the clock button.                                        |
| `justify`           | `'left'`', `'right'`, `'center'`, or `'fill'`              | `'left'`                           | Justification (alignment) of the date/time shown on the bar.                        |

> Detail on available tokens can be found here: <https://docs.rs/chrono/latest/chrono/format/strftime/index.html>

<details>
<summary>JSON</summary>

```json
{
  "end": [
    {
      "type": "clock",
      "format": "%d/%m/%Y %H:%M"
    }
  ]
}

```

</details>

<details>
<summary>TOML</summary>

```toml
[[end]]
type = "clock"
format = "%d/%m/%Y %H:%M"
```

</details>

<details>
<summary>YAML</summary>

```yaml
end:
  - type: "clock"
    format: "%d/%m/%Y %H:%M"
```

</details>

<details>
<summary>Corn</summary>

```corn
{
  end = [
    {
      type = "clock"
      format = "%d/%m/%Y %H:%M"
    }
  ]
}
```

</details>

## Styling

| Selector                        | Description                                                                        |
|---------------------------------|------------------------------------------------------------------------------------|
| `.clock`                        | Clock widget button                                                                |
| `.popup-clock`                  | Clock popup box                                                                    |
| `.popup-clock .calendar-clock`  | Clock inside the popup                                                             |
| `.popup-clock .calendar`        | Calendar widget inside the popup. GTK provides some OOTB styling options for this. |

Information on styling the calendar can be found [here](https://docs.gtk.org/gtk4/class.Calendar.html#css-nodes).

For more information on styling, please see the [styling guide](styling-guide).
