JavaScript Calendar and Scheduler Tutorials

This page lists tutorials that show how to create a scheduling web application for various fields, such as internal company use (timesheetproductionshift planning, shared resource reservation), services (doctor appointment schedulinghotel room reservation), and project management.

Beginners can start with basic tutorials that explain the basic concepts like installation and initial configuration of the the components (e.g. HTML5 Scheduler). Experienced users can continue with more advanced projects that show how to use the Scheduler in a real-world scenario. There are also tutorials that demonstrate specific features of the scheduler and calendar components (dynamic loadingPDF exportinfinite scrolling). If you are looking for a specific use case which is missing, you can drop us a note in the forum.

All calendar and scheduler tutorials include a downloadable project with source code. You can use the project source code to start your own implementation and save some time with the initial setup and configuration. The tutorial text explains the key areas of the code and shows different views and options using screenshots.

The projects use HTML5 and plain JavaScript interface for the frontend (UI). Most of the tutorial use PHP as the server-side technology for the backend (REST API), but there are also tutorials for other server-side technologies (ASP.NET CoreSpring Boot).

There is also an online configurator tool available that lets you customize selected properties of the components. It shows the changes immediately using a live preview. You can use it to create a quick proof-of-concept project - the configurator will generate a downloadable project that includes the dependencies and the selected component configuration.

In addition to vanilla JavaScript and TypeScript, DayPilot also supports popular JavaScript client-side frameworks, including AngularReact, and Vue.js.

JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)
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.
Vue Monthly Calendar/Scheduler (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.
Weekly Event Calendar in Spring Boot/Java (Open-Source)
Weekly Event Calendar in Spring Boot/Java (Open-Source)
Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.
ASP.NET Core Monthly Calendar (.NET 8, JavaScript/HTML5, Open-Source)
ASP.NET Core Monthly Calendar (.NET 8, JavaScript/HTML5, Open-Source)
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio project for download.
Vue.js Weekly Calendar Tutorial (Open-Source)
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.
Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)
Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)
Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
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.
ASP.NET Core Weekly Calendar (Open-Source)
ASP.NET Core Weekly Calendar (Open-Source)
Simple ASP.NET Core web application that displays event data in a weekly calendar. Uses Entity Framework Core for data access.
React Calendar with Date Picker (Open-Source)
React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
React Monthly Calendar Tutorial (Open-Source)
React Monthly Calendar Tutorial (Open-Source)
React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.
Vue Calendar: Day/Week/Month Views (Open-Source)
Vue Calendar: Day/Week/Month Views (Open-Source)
Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.
ASP.NET Core Maintenance Scheduling (Open-Source)
ASP.NET Core Maintenance Scheduling (Open-Source)
How to create a visual, color-coded, and easily adjustable maintenance plan in ASP.NET Core using DayPilot - the open-source calendar/scheduling UI library.
Spring Boot Resource-Scheduling Calendar (Open Source)
Spring Boot Resource-Scheduling Calendar (Open Source)
A Spring Boot application that uses a visual resource-scheduling calendar to display plans for multiple resources side by side.
Vue.js Scheduler: Changing Visible Date
Vue.js Scheduler: Changing Visible Date
How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.
React Scheduler: How to Enable Undo/Redo
React Scheduler: How to Enable Undo/Redo
The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.
React Resource Calendar with Editable Columns (Open-Source)
React Resource Calendar with Editable Columns (Open-Source)
How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.
Vue Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Monthly Calendar in Spring Boot/Java (Open-Source)
Monthly Calendar in Spring Boot/Java (Open-Source)
Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.
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.
React Weekly Calendar Tutorial (Open-Source)
React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
Articles 1-20 of 186 Next