@redsift/d3-rs-schedule NPM

d3-rs-schedule

d3-rs-schedule generate a schedule / calander like presentation via the D3 reusable chart convention.

Example

Empty

Single Entry

Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-schedule/latest/d3-rs-schedule.umd-es2015.min.js"></script>
<script>
	var chart = d3_rs_schedule.html();
	d3.select('body').datum([ { s: 1469723575941, e: 1469726870991, t: "Text to display", u: "proposed" } ]).call(chart);
</script>

ES6

import { chart } from "@redsift/d3-rs-schedule";
let eml = chart.html();
...

Require

var chart = require("@redsift/d3-rs-schedule");
var eml = chart.html();
...

Datum

{ s: 1469723575941, e: 1469726870991, t: "Text to display", u: "proposed" } ...

s start timestamp for the event (epoch UTC ms) e start timestamp for the event (epoch UTC ms) t text to display u status text for the event. This is used by the default fill function to highlight events. The known values are proposed, conflict and provisional.

Parameters

Property	Description	Transition
`classed`	String SVG custom class	N
`width`, `height`, `size`, `scale`	Integer SVG container sizes	Y
`style`	String Custom CSS to inject into chart	N
`indexFormat`	String, Function Change the time presentation on the axis. If string, utilises d3-time-format. If a function, must be a comptabile formatter. Default `%Hh`
`language`	String Change the language, affects time formats. Typically auto detected from the browser.
`timezone`	String Set the timezone for display e.g. `Asia/Colombo`
`prefixDurationFormat`	String Prefix the event text with start and end time
`tickInterval`	Array Interval of the ticks, typically an interval and a specifier e.g. `d3.timeMinute.every(15)`
`eventWidth`	Integer Width to use for the event rects