title: TimeZoneExample
type: text/vnd.tiddlywiki
tags: WidgetUsage

In this example, `Asia/Shanghai` is +8 to the `UTC`:

```
<div style="display: flex; flex-direction: row;">
  <$calendar timeZone="UTC" initialView="timeGridDay" hideToolbar="yes" width="40%" height="600px" readonly="yes" />
  <$calendar timeZone="Asia/Shanghai" initialView="timeGridDay" hideToolbar="yes" width="40%" height="600px" readonly="yes" />
  <$calendar initialView="timeGridDay" hideToolbar="yes" width="40%" height="600px" readonly="yes" />
</div>
```

<div style="display: flex; flex-direction: row;">
  <$calendar timeZone="UTC" initialView="timeGridDay" hideToolbar="yes" width="33%" height="600px" readonly="yes" />
  <$calendar timeZone="Asia/Shanghai" initialView="timeGridDay" hideToolbar="yes" width="33%" height="600px" readonly="yes" />
  <$calendar initialView="timeGridDay" hideToolbar="yes" width="33%" height="600px" readonly="yes" />
</div>