Interactive Event Calendar Demos

These demos are all single-page applications illustrating the features of Apprisant Technologies' MonthlyCalendar and ResourceChart components. The demos run entirely on the client, and links to the JavaScript source and CSS files are included on each page.

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.

Tablet users:   All major tablet browsers can be used with our components; however some may have minor issues, particularly with zooming. If the display fails to update, tap anywhere on the page.

Job Schedule #1 Job Schedule #1
Movable, resizable multi-day events with icons, labels and a detail panel on a resizable calendar. Implemented with React.
Job Schedule #2 Job Schedule #2
Movable, resizable multi-day events with clickable icons and detail and popup panels on a resizable calendar.
Training Events Training Events
Events with a detail panel, per-day annotations, and custom day background shading on a resizable calendar.
Event Feedback Event Feedback
Alternative ways to show selection, rollover and edit feedback for events, on a resizable calendar.
Event Height Event Height
Movable variable-height events with heights set in different ways, on a resizable calendar.
Localization Responsive, Localized Calendar
Shows the calendar's responsive capabilities with localization for the calendar annotation. Implemented with React.
Resource Chart Resource Chart
An interactive Resource Chart with the same event display and interaction capabilities as the Monthly Calendar.