@redsift/d3-rs-schedule

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.