sp-dev-fx-webparts/samples/react-world-time/README.md

53 lines
2.0 KiB
Markdown
Raw Normal View History

2020-11-09 00:21:43 -05:00
# World Time
2020-07-20 00:55:03 -04:00
2021-05-02 15:04:59 -04:00
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/worldTime.
2020-07-20 00:55:03 -04:00
This web part provides you the ability to display basic clock for a given time zone on a web page. The clock is based on the user's workstation time with an offset from UTC to the selected time zone.
![World Time](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.gif)
## How to use this web part on your web pages
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **World Time** web part.
3. Configure the web part to update its properties.
## Configurable Properties
The `World Time` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Description | description | string | no | Default: UTC Time - The clock description |
| Time Zone | timeZoneOffset | number | no | Default: 0 - The clock offset where 0 = UTC, -8 = PST (UTC08:00), etc |
# Installing the web part
2021-05-02 15:04:59 -04:00
See getting started from [SP-Starter-Kit repository readme](https://github.com/pnp/sp-starter-kit).
2020-07-20 00:55:03 -04:00
2021-05-02 15:04:59 -04:00
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/pnp/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant.
2020-07-20 00:55:03 -04:00
# Screenshots
![World Time](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.png)
# Source Code
2021-05-02 15:04:59 -04:00
https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/worldTime
2020-07-20 00:55:03 -04:00
# Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
- in the command line run:
- `npm install`
- `gulp serve`
# Version history
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
2021-12-20 10:25:30 -05:00
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-world-time" />