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 Per-day data shown as clickable text and icons, a shared detail panel, and day background gradients generated from the data. |
![]() |
Training Events Events with a detail panel, per-day annotations, and custom day background shading on a resizable calendar. |
![]() |
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 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 Mouse/touch-sensitive element areas, a rollover panel for well detail, and diagram scrolling and scaling options. |
![]() |
Show A selection image, annotation, and a rollover panel overlayed on a background image. |
![]() |
Camp Reservation Different colored icons for site availability, selection and rollover outlines, and a rollover panel overlayed on a background image. |
![]() |
Overlays Displays selection and rollover with image overlays. |
![]() |
Images Displays selection and rollover with alternate images. |
![]() |
Divs Displays selection and rollover with styled divs. |










