Event editing: With the mouse, new events can be created by double-clicking on a day or dragging from a day. If dragging, the new event must be at least a half day long to be created.
On a touch device, an event must be selected before it can be moved or resized. To create a new event, make sure no existing event is selected, then tap and hold on a day, and optionally drag to another day. The new event must be at least a half day long, as with mice.
Internet Explorer 8 users: The demos use CSS3 features which are not supported by Internet Explorer 8 and earlier.
Tablet users: Touch to see the rollover annotations. The demos may have minor problems on some Android 4 browsers.
Per-day data shown as clickable text and icons, a shared detail panel, and day background gradients generated from the data.
Movable, resizable multi-day events with icons, labels and a shared detail panel showing the calendar's selection and layout capabilities.
Movable, resizable multi-day events with clickable icons and shared detail and popup panels on a resizable calendar.
Events with a detail panel, per-day annotations, and custom day background shading on a resizable calendar.
Alternative ways to show selection, rollover and edit feedback for events, on a resizable calendar.
Movable variable-height events with heights set in different ways, on a resizable calendar.
WEBDiagrams Framework Demos
The generic WEBDiagrams diagramming component and toolkit can be configured to display many types and styles of diagrams. The diagrams operate entirely in the client browser, and can be used with any client-side toolkit. These demos show a few simple techniques which can be combined with professional graphics to build attractive functional diagrams.
Mouse/touch-sensitive element areas, a rollover panel for well detail, and diagram scrolling and scaling options.
Different colored icons for site availability, selection and rollover outlines, and a rollover panel overlayed on a background image.