d3-rs-schedule

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

Example

View @redsift/d3-rs-schedule on Codepen

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|Preview ----|-----------|----------|------- 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.