Open-Source Calendar and Scheduler Tutorials

The free and open-source DayPilot Lite library provides calendar/scheduling components that you can use to build time management, event planning, resource scheduling, project management applications or booking systems. The library is hosted at NPM and it is available for vanilla JavaScript, Angular, React, and Vue.

It is available under a business-friendly Apache License that lets you use the library in open-source and commercial projects. 

You can use the event calendar component to create a traditional day/week/month calendar view that you know from Microsoft Outlook, Google Calendar or Apple Calendar. See the tutorials to learn how to define and integrate different calendar views, share the data and highlight the free/busy days.

You can use the resource calendar view to to display multiple resources as columns side-by-side. You can use it to schedule events, tasks and reservations for multiple resources (locations, rooms, cars, tools, production lines, employees, shift workers, etc.). If you need to scheduler tasks or appointments for multiple workers (such as car mechanics, doctors, hairdressers), you can use the resource calendar to manage shifts and location assignments of your employees.

The library includes a smart date picker component that lets you change a date of the current view and also provides a quick availability preview using the free/busy highlighting feature.

You can use the calendar/scheduler components with any kind of backend (such as PHP, ASP.NET Core, Java/Spring, Node.js, etc.). The components communicate with the backend using a REST API which returns data in JSON format. The server-side part of your application lets you store the data in a database (such as MySQL, PostgreSQL or SQL Server) and perform additional calculations and apply business rules.

To see how to use the calendar component in React, you can check the React Weekly Calendar Tutorial which describes the steps needed for integration in your React application.

The Angular calendar component integrates well with Angular 12+ applications (it uses the Ivy engine). In Angular, add the <DayPilotCalendar> component to the template. Use the [config] attribute to load the configuration data and the [events] attribute to load calendar event data. Angular detects changes automatically and updates the component if needed. For a more detailed guide, please see the Angular Calendar: Day/Week/Month Views (Open-Source) tutorial.

In Vue, there is also a special component available that lets you add a calendar to your application. See the Vue.js Weekly Calendar Tutorial (Open-Source) tutorial to learn more.

If you prefer vanilla JavaScript, you can start using the components by simply importing the daypilot-all.min.js file. Add a <div> placeholder and a short initialization script and your JavaScript calendar is ready for display. To learn how to integrate the JavaScript calendar with an ASP.NET Core or PHP backend (REST API), please see the HTML5/JavaScript Event Calendar (Open-Source) tutorial.

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 Resource Calendar (Open-Source)
Vue Resource Calendar (Open-Source)
Use the Vue calendar component to display an interactive schedule for multiple resources.
Angular Calendar with Undo/Redo (Open-Source)
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 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.
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.
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.
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.
HTML5/JavaScript Event Calendar (Open-Source)
HTML5/JavaScript Event Calendar (Open-Source)
Weekly HTML5/JavaScript event calendar with CSS themes, drag and drop support, date navigator. Sample PHP and ASP.NET Core projects with REST backend implementation.
ASP.NET Core Monthly Calendar (.NET 7, JavaScript/HTML5, Open-Source)
ASP.NET Core Monthly Calendar (.NET 7, JavaScript/HTML5, Open-Source)
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio 2022 project for download.
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.
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular Calendar: How to Use CSS Themes (Open-Source)
Angular application that shows how to apply a custom CSS theme to the calendar component and change it on the fly.
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.
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.
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.
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.
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 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.
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
Angular Date Picker with Drag & Drop Range Selection (Open-Source)
How to activate the free-hand date range selection mode in the Angular date picker component (Navigator).
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
Simple appointment scheduling application built using Angular. The calendar view is created using DayPilot Pro Angular Calendar component. The server-side backend is created using PHP and stores events in a MySQL or SQLite database.
Articles 1-20 of 35 Next