Open-Source Calendar and Scheduler Tutorials

JavaScript Scheduler: Find Next Free Slot
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 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.
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 9, JavaScript/HTML5, Open-Source)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
JavaScript confirm() Replacement
JavaScript confirm() Replacement
Replace the built-in confirm() modal dialog with a more flexible implementation that allows using custom appearance and button text (e.g. Yes/No).
JavaScript prompt() Replacement
JavaScript prompt() Replacement
Use an improved prompt() replacement to add more flexibility to the single-input modal dialog.
JavaScript alert() Replacement
JavaScript alert() Replacement
Simple helper for replacing alert() with a more flexible HTML-based modal dialog with support for CSS styling.
DayPilot.Modal: Open-Source JavaScript Modal Dialog
DayPilot.Modal: Open-Source JavaScript Modal Dialog
Open-source JavaScript modal dialog with rich features. It can display custom HTML or a standalone page. Supports drag&drop moving and automatic height adjustment.
Using DayPilot Modal in Angular Application (TypeScript)
Using DayPilot Modal in Angular Application (TypeScript)
DayPilot Modal is now available as a NPM package (@daypilot/modal) and can be used in Angular applications as well.
ASP.NET iCalendar Export (Outlook, Google Calendar, Mac OS X Calendar)
ASP.NET iCalendar Export (Outlook, Google Calendar, Mac OS X Calendar)
This tutorial shows how to export calendar data in iCalendar format in an ASP.NET WebForms web application. Includes a sample Visual Studio 2017 project. Open-source.
Loading Calendar Appointments from Exchange Server (Office 365) using EWS (ASP.NET)
Loading Calendar Appointments from Exchange Server (Office 365) using EWS (ASP.NET)
ASP.NET WebForms application that shows how to use Microsoft Exchange server as an appointment storage for DayPilot Calendar. Loads existing appointments, creates new appointments and updates existing ones.
Previous Articles 61-80 of 86 Next