Calendar Component Tutorials

How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.

Nov 29, 2024

React Yearly Scheduling Calendar

Learn how to build an interactive yearly scheduling calendar in React, displaying months as columns and days as cells.

react react18 year javascript calendar

Nov 21, 2024

Angular Calendar: Detect Orientation Change (Landscape/Portrait)

How to detect mobile device rotation and switch the Angular Calendar view accordingly.

angular angular18 calendar typescript mobile

Aug 16, 2024

HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL)

HTML5 web application for managing doctor appointments. Includes public and administration interface. Patients can request an appointment in one of the slots predefined using the administration interface. Implemented in PHP/MySQL.

html5 javascript doctor appointment calendar scheduler mysql

Jul 24, 2024

JavaScript Calendar: Blocking Selected Dates

Block access to past dates in the JavaScript Calendar component. Past dates are not accessible using the date picker and drag and drop operations are disabled.

javascript calendar navigator disable date-picker

Jul 14, 2024

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.

vuejs calendar javascript open-source context-menu month composition-api

Jul 6, 2024

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.

angular angular18 calendar day week month typescript open-source

Jul 1, 2024

React Calendar with Day/Week/Month Views (Open-Source)

This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

react day week month calendar open-source react18 jsx

Jun 16, 2024

JavaScript Yearly Calendar

How to configure DayPilot JavaScript Calendar to create a custom view that displays a yearly calendar where each column represents one month, and each cell represents one day.

javascript calendar scheduler year

Apr 15, 2024

React Scheduler with a Vertical Timeline

How to create dynamic calendars and schedulers with a vertical timeline, customizable time cells, and resource display in React.

react react18 calendar timeline resource-calendar

Jan 29, 2024

Next.js Weekly Calendar (Open-Source)

Add an interactive scheduling calendar to your Next.js application using the open-source DayPilot library.

next.js react calendar open-source typescript

Jan 4, 2024

ASP.NET Core Doctor Appointment Scheduling Tutorial (.NET 8)

ASP.NET Core application for doctor appointment scheduling. The application works with three roles: manager (define available appointment slots), patient (request an appointment using one of the available slot) and doctor (manage existing appointments).

calendar scheduler javascript asp.net-core entity-framework sql-server c# doctor dotnet8

Nov 26, 2023

JavaScript Calendar: Use the Zoom Feature to Magnify the Calendar Grid

You can use the zoom feature in the Calendar to define custom magnification levels. Users can zoom using a slider or the [-] and [+] buttons.

javascript calendar zoom

Mar 20, 2023

JavaScript Calendar: Reorder and Resize Columns using Drag and Drop

Learn how to enable drag and drop column reordering and resizing for the JavaScript resource calendar component.

javascript calendar drag-drop resource-calendar

Jul 21, 2022

JavaScript Monthly Calendar: How to Disable Selected Days

How to mark selected days as disabled and prevent adding, moving, and resizing events. You can use this technique to disable days in the past, weekends, holidays or other dates.

javascript month calendar disable holidays

May 24, 2022

React Calendar: Rendering JSX in Events

How to render custom JSX components in events displayed by the React Calendar component.

react calendar javascript jsx

Dec 8, 2021

JavaScript Calendar: Drag All-Day Events to a Specific Time of Day

How to use the native HTML5 drag and drop API to extend the calendar functionality and allow dragging an all-day event to a selected calendar cell.

javascript calendar drag-drop

Oct 29, 2021

JavaScript Calendar: Custom Drop Target for External Items

How to drag items either to the JavaScript Calendar component or to a custom element.

javascript calendar drag-drop

Sep 30, 2021

ASP.NET Timetable with Custom CSS Theme (C#, VB.NET)

This tutorial shows how to create a custom CSS theme for the ASP.NET timetable control. Includes C# and VB.NET source code and sample SQL Server database.

c# vb.net asp.net webforms sql-server timetable css theme calendar

Jul 30, 2021

ASP.NET Shift Scheduling Tutorial (C#, VB.NET, SQL Server)

ASP.NET project that demonstrates how to use Calendar and Scheduler controls to manage a simple shift schedule. Supports conflict detection.

asp.net webforms sql-server c# vb.net calendar scheduler shift

Jun 16, 2021

Articles 1-20 of 35 Next

Products

Resources

Tools

About Us

Contact

DayPilot Pro

HTML5 event calendar/scheduling components. Available for JavaScript/Angular/React/Vue, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.