README

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

Know isues

Timezones that differ from UTC with 30 or 45 min offsets do not present the correct boundaries.

Usage no npm install needed!