DayPilotThe JavaScript Date Picker component lets you choose a date visually using a mini calendar. The following tutorials show how to integrate the date picker with the JavaScript and Angular scheduling and calendar components.
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.
Jan 25, 2026
Angular Calendar: Date Switching
How to integrate Angular event calendar component with a date picker and navigation buttons for changing the visible week.
Jan 23, 2026
JavaScript Date Picker: Using Diagonal Cell Split to Show Partial Free/Busy State
How to use diagonal cell overlays in a JavaScript date picker to highlight full and partial day occupancy, common in hospitality reservation and availability views.
Jan 21, 2026
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).
Jan 21, 2026
React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.
Jan 15, 2026
JavaScript Scheduler: How to Integrate a Date Picker
How to link the JavaScript Scheduler component to a date picker that can change the visible date.
Oct 10, 2025
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.
Oct 6, 2025
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.
Jul 14, 2024
Angular Scheduler: Integration with a Date Picker
Angular 14 application that uses DayPilot Navigator component as a date picker for the Scheduler.
Oct 10, 2022