Open-Source Calendar and Scheduler Tutorials (Page 2)

Back to Open-Source Calendar and Scheduler Tutorials

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.

Oct 5, 2025

JavaScript Scheduler: Event Types

How to define your own Scheduler event types and customize the appearance. You can change the event type using a context menu or a modal dialog.

javascript scheduler customization open-source

Oct 5, 2025

JavaScript Scheduler: Alternating Column Colors

How to set alternating colors for JavaScript Scheduler columns (time headers and grid).

javascript html5 scheduler open-source

Oct 4, 2025

How to Add Interactive Elements to Vue Scheduler Events Using Templates

Vue templates supported by the Scheduler component allow you to add dynamic content to events, such as checkboxes, drop-down lists, or attachment upload buttons.

javascript vuejs vue3 scheduler template open-source

Oct 2, 2025

Vue Scheduler: Using Cell Templates to Show Slot Prices

How to use Vue templates to display dynamic reservation prices in each Scheduler time slot. Slot prices are defined using pricing plans independently for each day of the week.

vuejs vue3 scheduler template javascript open-source

Oct 2, 2025

React JSX Components in Scheduler Grid Cells

How to render custom React JSX component in the Scheduler grid cells.

react react19 jsx scheduler customization javascript open-source

Oct 2, 2025

React Scheduler: Rendering JSX in Events

How to render custom JSX in events displayed by the React Scheduler component.

react react19 scheduler javascript jsx open-source

Oct 2, 2025

JavaScript Scheduler: Splitting an Event

How to split events in the JavaScript Scheduler at a specified location using the right-click context menu.

javascript html5 scheduler open-source

Sep 24, 2025

Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)

Use Angular lazy loading feature to improve the initial load time of your Scheduler application.

angular angular20 scheduler performance lazy-loading code-splitting typescript open-source

Sep 23, 2025

JavaScript Scheduler: Lock Events using Context Menu

How to lock events displayed in the JavaScript Scheduler using a dynamic context menu. The Scheduler will not allow editing the locked events.

javascript scheduler context-menu open-source

Sep 23, 2025

Using JavaScript/HTML5 Scheduler in Spring Boot (Open-Source)

Source code of a Spring Boot web application that uses HTML5/JavaScript scheduler to display events for multiple resources.

javascript html5 scheduler spring-boot java open-source

Sep 19, 2025

JavaScript Scheduler: Pushing Existing Events Back (Drag and Drop)

How to configure the JavaScript Scheduler to automatically move existing events later when a new event is dragged and dropped, to avoid overlaps.

javascript scheduler drag-drop open-source

Sep 19, 2025

React Scheduler: Next/Previous Buttons

Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

react scheduler javascript react19 open-source

Sep 18, 2025

JavaScript Scheduler: Find Next Free Slot

Add an icon to the JavaScript Scheduler row headers that will let users scroll to the next free slot in the row.

javascript scheduler open-source

Sep 18, 2025

Angular Calendar with Undo/Redo (Open-Source)

This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.

angular angular20 event-calendar open-source undo typescript

Sep 15, 2025

JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)

How to use HTML5/JavaScript resource calendar component to create a dynamic schedule. The calendar loads data (resources and events) using a REST API that is implemented using PHP and MySQL.

javascript resource-calendar php mysql open-source sqlite

Sep 15, 2025

Weekly Event Calendar in Spring Boot/Java (Open-Source)

Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.

javascript html5 event-calendar spring-boot java open-source

Sep 14, 2025

ASP.NET Core Monthly Calendar (.NET 9, JavaScript/HTML5, Open-Source)

ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio project for download.

javascript html5 month event-calendar asp.net-core entity-framework c# open-source dotnet9 sql-server

Sep 14, 2025

Vue.js Weekly Calendar Tutorial (Open-Source)

How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.

vuejs javascript event-calendar appointment open-source composition-api vue3 week

Sep 13, 2025

Next.js Monthly Calendar (Open-Source)

Learn how to build a customized monthly calendar UI in Next.js 15 using the open-source DayPilot scheduling library.

next.js react typescript month open-source jsx nextjs15 react19

Sep 13, 2025

Previous Articles 21-40 of 77 Next

Products

Resources

Tools

About Us

Contact

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.