Team Timezone allows you to install a simple timezone management tool for distributed teams. Please note, that this is currently an alpha pre-release.
Install the package with:
npm install @classcentral/team-timezone --save
The teamTimezone method requires two parameters. An id of the DOM element that the widget will be attached to and a people object with the relevant timezone data for your team. The people param can be either an imported json file or a plain javascript object. See below for proper formatting.
import teamTimezone from "@classcentral/team-timezone";
import people from "./people.json";
teamTimezone("timezone", people);If you want to override some or all style declarations without worrying about CSS files, you can pass a style object as the third parameter. You can use this empty style object as a starting point. The style object is nothing more than properties with CSS declarations using template literals. These add scoped classes to the markup and then the CSS is appended to the <head> of the document in a <style> element.
For reference, you can view the default styles that are applied here. These default styles will remain unless overridden specifically in your style object.
import teamTimezone from "@classcentral/team-timezone";
import people from "./people.json";
// customize/override specific styles
const styles = {
container: `
width: 750px;
`,
title: `
font-size: 18px;
`,
}
teamTimezone("timezone", people, styles);If you want to use your own external stylesheet you can turn off the default styles. For this approach, see the markup generated for all the scoped HTML classes necessary for CSS selection.
import teamTimezone from "@classcentral/team-timezone";
import people from "./people.json";
teamTimezone("timezone", people, false);Below is an example of a people.json file. The only properties currently supported for each person object are name, timezone, and avatar.
[
{
"name": "Human Bean",
"timezone": "America/New_York",
"avatar": "https://pbs.twimg.com/profile_images/425872431975133184/OLU3zsLe_400x400.jpeg",
}
]