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.

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.
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Vue Date Picker with Free/Busy Highlighting (Open-Source)
Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.
JavaScript Calendar in Read-Only Mode (Open-Source)
JavaScript Calendar in Read-Only Mode (Open-Source)
How to implement a toggle that switches between the read-only and edit modes of the JavaScript Calendar. Read-only events are marked with a padlock icon in the upper-right corner.
React Scheduler: Rendering JSX Components in Row Headers
React Scheduler: Rendering JSX Components in Row Headers
How to insert React components or direct JSX to Scheduler row headers.
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.
ASP.NET Core Timesheet (.NET 9, SQL Server, Entity Framework)
ASP.NET Core Timesheet (.NET 9, SQL Server, Entity Framework)
How to create a drag-and-drop timesheet application in ASP.NET Core (.NET 9) with SQL Server and Entity Framework.
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.
Event Scheduler in Laravel: Timeline and Resource Allocation with Drag-and-Drop UI
Event Scheduler in Laravel: Timeline and Resource Allocation with Drag-and-Drop UI
Learn how to build an interactive scheduling application in Laravel using the DayPilot JavaScript Scheduler with a dynamic timeline, draggable events, and resource grouping.
JavaScript Scheduler: Resource Utilization Chart for Rows
JavaScript Scheduler: Resource Utilization Chart for Rows
How to dynamically calculate the utilization percentage for each resource and display a chart with utilization details in the Scheduler row headers.
JavaScript Resource-Scheduling Calendar: Full-Screen Layout
JavaScript Resource-Scheduling Calendar: Full-Screen Layout
Use the 100% height mode of the calendar to avoid duplicate vertical scrollbars and keep headers fixed.
Articles 1-20 of 186 Next