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.

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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Articles 1-20 of 39 Next