DayPilot Code - Scheduling Tutorials and Source Code

JavaScript Scheduler: Date Picker in the Upper-Left Corner

How to embed a calendar icon in the upper-left corner of DayPilot Scheduler, hook it up to an inline DatePicker, and update the visible timeline.

javascript scheduler datepicker open-source

Vue Scheduler with Horizontal Timeline (Open-Source)

Build a horizontal, resource-based timeline using the open-source Vue Scheduler and customize event appearance with Vue templates and CSS.

vuejs vue3 javascript scheduler open-source timeline

React Calendar with Day/Week/Month Views (Open-Source)

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

react day week month calendar open-source react19 jsx

React Scheduler with Horizontal Timeline (Open-Source)

A lightweight, open-source React Scheduler component with a horizontal timeline, drag-and-drop support, customizable appearance, and smooth performance for large data sets.

react react19 scheduler open-source timeline

How to Add Custom Progress Bar to React Scheduler Events

The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.

react scheduler jsx javascript react19 open-source

Vue Monthly Calendar/Scheduler (Open-Source)

How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.

vuejs calendar javascript open-source context-menu month composition-api vue3

JavaScript Scheduler: Use Custom Button to Scroll to Next Event

How to implement Previous and Next buttons that find the nearest event outside the current viewport of the JavaScript Scheduler component.

javascript scheduler open-source

Angular Calendar: Day/Week/Month Views (Open-Source)

Angular project that displays an event calendar component with day, week and month views that share the same data and can be easily switched. A date picker component is used to switch the current date and highlight busy days.

angular angular21 calendar day week month typescript open-source

Angular Scheduler with Horizontal Timeline (Open-Source)

Plan and visualize your resources in Angular with this lightweight, Apache‑licensed Scheduler - with a horizontal timeline, multi‑row time headers, CSS themes, dynamic event content and large‑dataset performance.

angular scheduler angular21 open-source timeline

JavaScript Scheduler: Zoom (Open-Source)

How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.

javascript scheduler zoom html5 open-source

Angular 21 Scheduler Quick Start Project

A quick-start project with a pre-configured Angular Scheduler component. You can download this project and use it as a starting point for your own Angular 21 calendar/scheduler application.

angular scheduler typescript quick-start angular21

Vue Scheduler: Availability/Utilization Histogram

React Scheduler with Horizontal Timeline (Open-Source)

Angular Calendar: Day/Week/Month Views (Open-Source)

Products

Resources

Tools

About Us

DayPilot Pro