Open-Source Calendar and Scheduler Tutorials

Vue Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Next.js Weekly Calendar (Open-Source)
Next.js Weekly Calendar (Open-Source)
Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.
Angular Resource Calendar (Open-Source)
Angular Resource Calendar (Open-Source)
Angular application that shows how to create a resource calendar Angular component that displays event data in multiple columns. The resource calendar supports drag and drop out of the box.
React Weekly Calendar Tutorial (Open-Source)
React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using the open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
Next.js Calendar with Day/Week/Month Views (Open-Source)
Next.js Calendar with Day/Week/Month Views (Open-Source)
How to create an integrated day, week, and month calendar view with a shared data source in Next.js.
React Scheduler: Timeline Zoom
React Scheduler: Timeline Zoom
How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.
JavaScript Scheduler: Date Picker in the Upper-Left Corner
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.
Vue Scheduler with Horizontal Timeline (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.
How to Add Custom Progress Bar to React Scheduler Events
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.
JavaScript Scheduler: Use Custom Button to Scroll to Next Event
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.
Angular Calendar: Day/Week/Month Views (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 Scheduler with Horizontal Timeline (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.
JavaScript Scheduler: Zoom (Open-Source)
JavaScript Scheduler: Zoom (Open-Source)
How to change the zoom level of the JavaScript Scheduler component in real time using a slider and (+)/(-) buttons.
ASP.NET Core Resource-Scheduling Calendar (Open-Source)
ASP.NET Core Resource-Scheduling Calendar (Open-Source)
How to create a resource-scheduling calendar in ASP.NET Core that displays resources as columns. Add more UI features, such as free/busy highlighting, next/previous date-changing buttons and a modal dialog for editing event details.
JavaScript Scheduler with Horizontal Timeline (Open-Source)
JavaScript Scheduler with Horizontal Timeline (Open-Source)
Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.
JavaScript Scheduler: How to Integrate a Date Picker
JavaScript Scheduler: How to Integrate a Date Picker
How to link the JavaScript Scheduler component to a date picker that can change the visible date.
Vue Scheduler: Undo/Redo for Drag and Drop Actions
Vue Scheduler: Undo/Redo for Drag and Drop Actions
How to add "Undo" and "Redo" buttons to the Vue Scheduler. The UndoService maintains history of changes and allows unlimited undo/redo.
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.
JavaScript Scheduler: Read-Only Mode
JavaScript Scheduler: Read-Only Mode
How to switch the JavaScript Scheduler to read-only mode (disables all drag-and-drop) and how to disable drag-and-drop for specific events.
JavaScript Scheduler: Alternating Column Colors
JavaScript Scheduler: Alternating Column Colors
How to set alternating colors for JavaScript Scheduler columns (time headers and grid).
Previous Articles 41-60 of 93 Next