Event Calendar Tutorials

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.

Nov 10, 2024

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.

javascript vuejs vue3 event-calendar template open-source

Nov 5, 2024

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.

javascript event-calendar read-only open-source

Oct 21, 2024

Angular Calendar: Event Filtering

Learn how to implement real-time event filtering (by text and event type) in the Angular Calendar component.

angular angular18 event-calendar typescript filtering

Oct 15, 2024

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.

html5 javascript event-calendar php mysql day week month sqlite open-source date-picker

Oct 4, 2024

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.

javascript html5 event-calendar asp.net-core entity-framework c# dotnet8 open-source sql-server week

Sep 17, 2024

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.

react event-calendar week javascript css jsx open-source react18

Jul 31, 2024

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.

react event-calendar month javascript jsx open-source react18

Jul 30, 2024

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 2022 project for download.

javascript html5 month event-calendar asp.net-core entity-framework c# open-source dotnet8 sql-server

Jun 27, 2024

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.

vuejs javascript event-calendar appointment open-source composition-api vue3

Jun 22, 2024

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 html5 month event-calendar spring-boot java open-source

Jun 20, 2024

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.

html5 javascript event-calendar open-source php asp.net-core entity-framework sql-server c# dotnet8

Nov 20, 2023

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 angular16 event-calendar open-source undo typescript

May 14, 2023

Weekly Event Calendar in Spring Boot/Java (Open-Source)

Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.

javascript html5 event-calendar spring-boot java open-source

May 9, 2023

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.

angular angular14 event-calendar typescript css theme open-source

Aug 16, 2022

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 date-picker event-calendar javascript open-source

Jul 14, 2022

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.

angular angular13 event-calendar typescript php mysql open-source

Feb 15, 2022

Angular Calendar: Date Switching

How to integrate Angular 13 event calendar component with a date picker and navigation buttons for changing the visible week.

angular angular13 event-calendar navigator date-picker open-source typescript

Jan 4, 2022

ASP.NET Calendar: Integration with Date Picker (C#, VB.NET)

ASP.NET WebForms web application that links the ASP.NET event calendar control with a Navigator (date picker) control.

asp.net webforms c# vb.net event-calendar

Dec 22, 2021

Angular Calendar: Displaying Custom Set of Days

Web application with Angular calendar component configured to display a custom set of days as columns.

angular angular13 event-calendar typescript

Dec 9, 2021

Event Calendar Tutorials

Products

Resources

Tools

About Us

DayPilot Pro