Your Data + Your Style WEBDiagrams

WEBDiagrams MonthlyCalendar Demos

These are just a few examples of how the MonthlyCalendar component can be configured. The demos are all single-page applications that run entirely on the client, and links to the JavaScript source and CSS files are included on each page.

Tablet users:   Please touch to see the rollover annotations.

Worker Data Worker Data
Per-day data shown as clickable text and icons, a shared detail panel, and day background gradients generated from the data.
Training Events Training Events
Events with a detail panel, per-day annotations, and custom day background shading on a resizable calendar.
Job Schedule #1 Job Schedule #1
Movable, resizable multi-day events with icons, labels and a shared detail panel showing the calendar's selection and layout capabilities.
Job Schedule #2 Job Schedule #2
Movable, resizable multi-day events with clickable icons and shared detail and popup panels on a resizable calendar.

Please note:   Our demos use CSS3 features which are not fully supported by Internet Explorer 8. They are better viewed in other browsers.

WEBDiagrams Framework Demos

The generic WEBDiagrams diagramming component 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.

Oilfield Oilfield
Mouse/touch-sensitive element areas, a rollover panel for well detail, and diagram scrolling and scaling options.
Show Show
A selection image, annotation, and a rollover panel overlayed on a background image.
Camp Reservation Camp Reservation
Different colored icons for site availability, selection and rollover outlines, and a rollover panel overlayed on a background image.
Overlays Demo Overlays
Displays selection and rollover with image overlays.
Images Demo Images
Displays selection and rollover with alternate images.
Divs Demo Divs
Displays selection and rollover with styled divs.