# Table of Contents - [React Scheduler Component | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#react-scheduler-component-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Calendar Component | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-calendar-component-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Scheduler Component | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#scheduler-component-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Width - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#width-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Height - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#height-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Scrollbar Position - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#scrollbar-position-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Layout - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#layout-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CssOnly Mode - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cssonly-mode-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Row Height - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#row-height-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Cell Customization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cell-customization-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Row Header Customization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#row-header-customization-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Upper-Left Corner - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#upper-left-corner-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Separators - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#separators-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Hiding Non-Business Hours - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#hiding-non-business-hours-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Gantt Chart - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#gantt-chart-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header Rows - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-rows-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Header Date and Time Format - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#header-date-and-time-format-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [First Day of Week - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#first-day-of-week-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header Customization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-customization-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Message Bar - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#message-bar-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Bubble - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#bubble-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Resource Tree - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#resource-tree-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Row Header Columns - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#row-header-columns-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Dynamic Resource Tree Loading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#dynamic-resource-tree-loading-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Range Selecting - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-range-selecting-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [External Drag and Drop - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#external-drag-and-drop-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Loading Label - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#loading-label-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [AutoRefresh - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#autorefresh-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Server-Side Image Export (PNG, JPG) - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#server-side-image-export-png-jpg-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Crosshair - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#crosshair-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Dynamic Cell Loading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#dynamic-cell-loading-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Notify Event Model - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#notify-event-model-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Notify Event Handler - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#notify-event-handler-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Notify Queue - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#notify-queue-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CallBack Update - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#callback-update-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CallBack with Custom Data - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#callback-with-custom-data-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side Event API - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-event-api-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Animation - Bubble | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#animation-bubble-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [AJAX CallBack POST Compression - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#ajax-callback-post-compression-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CommandCallBack() - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#commandcallback-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Monthly Event Calendar Component | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#monthly-event-calendar-component-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Business Days - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#business-days-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Bubble | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#bubble-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CSS Themes - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#css-themes-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Context Menu | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#context-menu-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Business Hours - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#business-hours-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Context Menu - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#context-menu-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Date Picker Orientation - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#date-picker-orientation-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Active Areas - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#active-areas-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Navigator - Date Picker | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#navigator-date-picker-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Common | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#common-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Progressive Event Rendering - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#progressive-event-rendering-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Timesheet - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#timesheet-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Scheduler for Touch Devices | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#scheduler-for-touch-devices-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Drag Handles - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-drag-handles-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Selecting - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-selecting-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side Update - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-update-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side Update - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-update-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Dynamic Event Loading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#dynamic-event-loading-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Notify Event Model - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#notify-event-model-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side Event API - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-event-api-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Notify Event Model - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#notify-event-model-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side Update - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-update-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side Event API - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-event-api-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Message Bar - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#message-bar-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Arrangement Mode - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-arrangement-mode-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Message Bar - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#message-bar-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Active Areas - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#active-areas-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [External Drag and Drop - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#external-drag-and-drop-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Rows per Month - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#rows-per-month-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [100% Height - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#100-height-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Duration Bar - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#duration-bar-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Percent Complete - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#percent-complete-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [100% Height - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#100-height-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Height - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#height-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Height - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#height-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Width - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#width-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Width - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#width-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Deleting - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-deleting-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Creation - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-creation-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Day Header - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#day-header-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Creation - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-creation-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Deleting - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-deleting-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Editing - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-editing-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Duration Bar - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#duration-bar-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Editing - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-editing-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Inline Event Editing - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#inline-event-editing-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Position - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-position-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Columns - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#columns-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Recurring Events - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#recurring-events-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Localization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#localization-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Active Areas - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#active-areas-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Position - Bubble | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#position-bubble-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Customization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-customization-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header Cell Duration - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-cell-duration-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Cell Stacking Mode - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cell-stacking-mode-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Highlighting Busy Days - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#highlighting-busy-days-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Column Header Active Areas - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#column-header-active-areas-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Column Header Height Auto-Fit - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#column-header-height-auto-fit-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Crosshair - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#crosshair-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Title - Context Menu | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#title-context-menu-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Cell Customization - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cell-customization-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Active Areas - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-active-areas-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Hiding Weekends - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#hiding-weekends-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Weeks View - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#weeks-view-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Recurring Events - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#recurring-events-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [HideFreeCells - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#hidefreecells-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Active Areas - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-active-areas-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Calendar Overnight Scheduling | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#calendar-overnight-scheduling-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Sorting - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-sorting-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Position - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-position-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Scroll Labels - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#scroll-labels-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Selecting a Day - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#selecting-a-day-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Recurring Events - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#recurring-events-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [100% Height - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#100-height-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Loading Label - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#loading-label-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Date Picker Week Numbers - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#date-picker-week-numbers-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Row Header Active Areas - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#row-header-active-areas-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Day View - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#day-view-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [AutoRefresh - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#autorefresh-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [View Types - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#view-types-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Week View - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#week-view-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Work Week View - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#work-week-view-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Loading - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-loading-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Server-Side Image Export (PNG, JPG, GIF, JPG) - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#server-side-image-export-png-jpg-gif-jpg-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [SkipMonths - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#skipmonths-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [First Day of Week - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#first-day-of-week-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Localization - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#localization-navigator-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Filtering - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-filtering-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Loading - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-loading-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Parent Resources - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#parent-resources-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [First Day of Week - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#first-day-of-week-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [All-Day Events - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#all-day-events-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Resource-Scheduling Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#resource-scheduling-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Localization - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#localization-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Active Areas - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-active-areas-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [AutoScroll - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#autoscroll-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Row Header Width Auto-Fit - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#row-header-width-auto-fit-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [First Day of Week - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#first-day-of-week-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Bubble - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#bubble-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Localization - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#localization-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [ClientState - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#clientstate-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Recurring Events - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#recurring-events-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Server-Side Image Export (PNG, JPG, GIF, JPG) - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#server-side-image-export-png-jpg-gif-jpg-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Limit Event Moving - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#limit-event-moving-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [ClientState - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#clientstate-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Cell Header - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cell-header-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Wildcard Resource - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#wildcard-resource-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Bubble - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-bubble-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Range Selecting - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-range-selecting-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CssOnly Mode - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cssonly-mode-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CssOnly Mode - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cssonly-mode-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Context Menu - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#context-menu-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CSS Themes - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#css-themes-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Drag and Drop between Two Schedulers - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#drag-and-drop-between-two-schedulers-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Filtering - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-filtering-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CSS Themes - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#css-themes-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Loading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-loading-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Manual Date Switching - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#manual-date-switching-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Range Selecting - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-range-selecting-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CSS - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#css-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Header Date Format - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#header-date-format-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Row Header Context Menu - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#row-header-context-menu-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Filtering - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-filtering-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Snap to Grid - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#snap-to-grid-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Bubble - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-bubble-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Column Header Hierarchy - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#column-header-hierarchy-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Cell Duration - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-cell-duration-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Resizing - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-resizing-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Resizing - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-resizing-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CSS - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#css-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [View Types - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#view-types-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Appearance - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#appearance-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Moving - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-moving-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Inline Event Editing - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#inline-event-editing-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Controls - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#controls-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Copying - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-copying-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Appearance - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#appearance-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [CSS - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#css-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Drag and Drop Moving of Scheduler Events | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#drag-and-drop-moving-of-scheduler-events-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Sorting - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-sorting-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Export - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#export-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Appearance - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#appearance-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Editing - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-editing-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Controls - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#controls-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Controls - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#controls-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Customization - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-customization-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Context Menu - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-context-menu-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Selecting - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-selecting-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Server Side Integration - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#server-side-integration-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Exact Event Duration - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#exact-event-duration-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Bubble - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-bubble-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Server Side Integration - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#server-side-integration-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Export - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#export-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [AJAX - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#ajax-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Cell Duration - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-cell-duration-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [View Types - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#view-types-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Export - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#export-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Grid - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#grid-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Grid - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#grid-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [jQuery Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#jquery-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Exact Event Duration - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#exact-event-duration-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Scheduler Grid | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#scheduler-grid-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Hiding Time Columns - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#hiding-time-columns-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Navigation - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#navigation-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Rows - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#rows-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Grid Line Color - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#grid-line-color-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Next and Previous Buttons - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#next-and-previous-buttons-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Events - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#events-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side API - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-api-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Shadow Style - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#shadow-style-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side API - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-api-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Navigation - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#navigation-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Events - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#events-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Date Picker - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#date-picker-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [jQuery Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#jquery-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header Groups - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-groups-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Wildcard Column - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#wildcard-column-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [AfterRender - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#afterrender-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Client-Side API - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#client-side-api-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Resource Loading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#resource-loading-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Navigation - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#navigation-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Cell Width - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cell-width-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Highlighting Today - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#highlighting-today-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Highlighting Weekends - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#highlighting-weekends-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Time Header Customization - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#time-header-customization-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Touch Devices - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#touch-devices-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Touch Devices - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#touch-devices-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Server-Side Event Handling - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#server-side-event-handling-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Cell Customization - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#cell-customization-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [jQuery - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#jquery-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Context Menu - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-context-menu-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Click - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-click-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Click - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-click-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Bubble - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#bubble-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Color - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-color-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Column Header Customization - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#column-header-customization-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Events - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#events-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Spacing - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-spacing-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Deleting - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-deleting-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Context Menu - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#context-menu-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Navigator - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#navigator-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event ToolTip - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-tooltip-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Continuous Events - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#continuous-events-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Creation - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-creation-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Update Events without Reloading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#update-events-without-reloading-scheduler-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) - [Event Customization - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue](#event-customization-monthly-event-calendar-daypilot-documentation-scheduling-components-for-javascript-angular-react-and-vue) --- # React Scheduler Component | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Angular](https://doc.daypilot.org/scheduler/angular/ "Angular") * [AngularJS](https://doc.daypilot.org/scheduler/angularjs/ "AngularJS") * [jQuery](https://doc.daypilot.org/scheduler/jquery/ "jQuery") * [React](https://doc.daypilot.org/scheduler/react/ "React") * [Vue](https://doc.daypilot.org/scheduler/vue-js/ "Vue") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") React Scheduler Component ========================= ![React Scheduler Component (DayPilot)](https://cdn.doc.daypilot.org/page/image/otobaivptjd6jas5cklrghajia/React+Scheduler+Component+%28DayPilot%29.png "React Scheduler Component (DayPilot)") Open-Source Tutorials --------------------- * [React Scheduler with Horizontal Timeline (Open-Source)](https://code.daypilot.org/79813/react-scheduler-with-horizontal-timeline-open-source) A lightweight, open-source React Scheduler component with a horizontal timeline, drag-and-drop support, customizable appearance, and smooth performance for large data sets. * [Using React Scheduler with TypeScript](https://code.daypilot.org/34946/react-scheduler-typescript-project) A sample React project that uses the Scheduler component in TypeScript. * [React Scheduler: Rendering JSX in Events](https://code.daypilot.org/50584/react-scheduler-rendering-jsx-in-events) How to render custom JSX in events displayed by the React Scheduler component. * [React JSX Components in Scheduler Grid Cells](https://code.daypilot.org/43458/react-jsx-components-in-scheduler-grid-cells) How to render custom React JSX component in the Scheduler grid cells. * [React Scheduler: Next/Previous Buttons](https://code.daypilot.org/64293/react-scheduler-next-previous-buttons) Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component. * [React Scheduler: How to Enable Undo/Redo](https://code.daypilot.org/30113/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. Tutorials --------- * [React Scheduler Tutorial](https://code.daypilot.org/77607/react-scheduler-tutorial) Introduction to using the React Scheduler component in your application * [React Shift Scheduling Application (PHP/MySQL Backend)](https://code.daypilot.org/40087/react-shift-scheduling-application-php-mysql-backend) React application for planning employee shifts at multiple locations. * [React Activity Planning System (Node, Express, PostgreSQL)](https://code.daypilot.org/95340/react-activity-planning-system-node-express-postgresql) An application for scheduling activities for different departments. It uses the React Scheduler component to display tasks and milestones. * [React Work Order Planning System (PHP/MySQL)](https://code.daypilot.org/47819/react-work-order-planning-system-php-mysql) An application that lets you assign tasks to employees. Includes a React queue component that displays a list of tasks that were not scheduled yet. * [React Scheduler: Rendering JSX Components in Row Header](https://code.daypilot.org/18688/react-scheduler-rendering-jsx-components-in-row-header) How to render custom JSX content in Scheduler row headers. * [React Scheduler: Rendering JSX Components in Callout (Bubble)](https://code.daypilot.org/49524/react-scheduler-rendering-jsx-component-in-callout-bubble) How to display custom JSX content in hover callouts. * [React Scheduler: External Drag and Drop](https://code.daypilot.org/85690/react-scheduler-external-drag-and-drop) How to activate external items so they can be dragged to the Scheduler as events. * [React Scheduler: Full Screen Layout](https://code.daypilot.org/88196/react-scheduler-full-screen-layout) Configure the React Scheduler component to fill the available screen space. * [React Scheduler: How to Display Slot Details using Background Events](https://code.daypilot.org/81940/react-scheduler-how-to-display-slot-details-using-background-events) Move selected events to the background and use them to display detailed information about a date range. * [React Scheduler: How to Search Events](https://code.daypilot.org/76269/react-scheduler-how-to-search-events) How to search React Scheduler events, highlight the search text and jump between results using "Next" and "Previous" buttons. * [React: Milestone Scheduler](https://code.daypilot.org/31918/react-milestone-scheduler) The React Scheduler can display milestones in addition to standard events or tasks. You can use custom shapes, icons, colors and connect the milestones using links. * [Next.js Scheduler Tutorial](https://code.daypilot.org/50496/next-js-scheduler) How to use the React Scheduler in a Next.js application. What features are available? ---------------------------- To see all the features please see: * [Scheduler documentation](https://doc.daypilot.org/scheduler/ "Scheduler Component") : The documentation includes detailed description of all the features. * [Live demos](https://javascript.daypilot.org/demo/scheduler/) : The demos are built using the pure JavaScript version of the Scheduler but all the features are also available in the React version. How to install the React Scheduler component? --------------------------------------------- ### DayPilot Lite (Open-Source) The [open-source](https://javascript.daypilot.org/open-source/) version of the React Scheduler component is available in DayPilot Lite for React ([@daypilot/daypilot-lite-react](https://www.npmjs.com/package/@daypilot/daypilot-lite-react) ). npm install @daypilot/daypilot-lite-react ### DayPilot Pro You can get the **daypilot-pro-react** module at [npm.daypilot.org](https://npm.daypilot.org/) : npm install https://npm.daypilot.org/daypilot-pro-react/trial/2025.3.6519.tar.gz This package is a part [DayPilot Pro for JavaScript](https://javascript.daypilot.org/) , a library of advanced scheduling components for web applications. How to add the React Scheduler component to your application? ------------------------------------------------------------- You can use the Scheduler component by simply including `` tag in your JSX. ### DayPilot Lite (Open-Source) import React from 'react'; import {DayPilotCalendar} from "@daypilot/daypilot-lite-react"; const Scheduler = () => { return ( ); } export default Scheduler; ### DayPilot Pro import React from 'react'; import {DayPilotScheduler} from "daypilot-pro-react"; const Scheduler = () => { return ( ); } export default Scheduler; How to configure the React Scheduler? ------------------------------------- ![react scheduler component configuration resources](https://cdn.doc.daypilot.org/page/image/neqhctst6bcvtis7en6mk5rc24/react-scheduler-component-configuration-resources.png "react scheduler component configuration resources") The React Scheduler allows you to customize the appearance and behavior using configuration [properties](https://api.daypilot.org/daypilot-scheduler-properties/) . All properties that are mentioned in the [Scheduler JavaScript API reference](https://api.daypilot.org/daypilot-scheduler-class/)  are available in React as well. You can specify the properties directly using `` attributes: import React from 'react'; import {DayPilotScheduler} from "daypilot-pro-react"; const Scheduler = () => { return (
); } export default Scheduler; You can also load the properties from the `state` object using [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) : import React, { useState } from 'react'; import {DayPilotScheduler} from "daypilot-pro-react"; const Scheduler = () => { const \[config, setConfig\] = useState({ startDate: "2024-12-01", days: 31, scale: "Day", timeHeaders: \[\ { groupBy: "Month" },\ { groupBy: "Day", format: "d" }\ \], resources: \[\ { name: "Resource 1", id: "R1" },\ { name: "Resource 2", id: "R2" },\ { name: "Resource 3", id: "R3" },\ \] }); return ( ); } export default Scheduler; How to access the DayPilot.Scheduler API? ----------------------------------------- ![react scheduler component message](https://cdn.doc.daypilot.org/page/image/lwoi4bxcezhspdvmpknw74ojvy/react-scheduler-component-message.png "react scheduler component message") In addition to automatic change detection available in React you can also use the direct API [methods](https://api.daypilot.org/daypilot-scheduler-methods/)  to control the React Scheduler behavior. In order to get access to the methods, you need a reference to [DayPilot.Scheduler](https://api.daypilot.org/daypilot-scheduler-class/)  object. The Scheduler object is accessible using `control` property of the `DayPilotScheduler` React component class. The following example stores the `DayPilot.Scheduler` object as `this.scheduler` property of the Scheduler component: import React, { useState } from 'react'; import { DayPilotScheduler } from "daypilot-pro-react"; const Scheduler = () => { const \[scheduler, setScheduler\] = useState(); return ( ); } export default Scheduler; Now you can invoke the Scheduler methods directly. This example displays a "Welcome!" message using the [message()](https://api.daypilot.org/daypilot-scheduler-message/)  method of the Scheduler when you click the button: import React, { useState } from 'react'; import { DayPilotScheduler } from "daypilot-pro-react"; const Scheduler = () => { const \[scheduler, setScheduler\] = useState(); return ( ` }) export class SchedulerSelectComponent { @ViewChild(DayPilotSchedulerComponent) scheduler!: DayPilotSchedulerComponent; events: DayPilot.EventData[] = [\ {\ id: 123,\ text: "Sample Event",\ start: "2026-02-13T09:00:00",\ end: "2026-02-13T10:00:00"\ },\ // ...\ ]; config: DayPilot.SchedulerConfig = { // Additional config options if needed }; selectEvent(): void { const foundEvent = this.scheduler.control.events.find(123); if (foundEvent) { this.scheduler.control.multiselect.add(foundEvent); } } } Enable [event multi-selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting")  (using Ctrl + click): import { Component } from '@angular/core'; import { DayPilot } from 'daypilot-pro-angular'; @Component({ selector: 'app-scheduler-multiselect', template: ` ` }) export class SchedulerMultiselectComponent { events: DayPilot.EventData[] = [\ {\ id: "1",\ text: "Event 1",\ start: "2026-02-13T09:00:00",\ end: "2026-02-13T10:00:00"\ },\ {\ id: "2",\ text: "Event 2",\ start: "2026-02-13T10:30:00",\ end: "2026-02-13T11:30:00"\ }\ ]; config: DayPilot.SchedulerConfig = { eventClickHandling: "Select", allowMultiSelect: true, // ... }; } Prevent selecting certain events: import { Component } from '@angular/core'; import { DayPilot } from 'daypilot-pro-angular'; @Component({ selector: 'app-scheduler-noselect', template: ` ` }) export class SchedulerNoSelectComponent { events: DayPilot.EventData[] = [\ {\ id: "1",\ text: "Normal Event",\ start: "2026-02-13T09:00:00",\ end: "2026-02-13T10:00:00"\ },\ {\ id: "2",\ text: "unselectable event",\ start: "2026-02-13T10:30:00",\ end: "2026-02-13T11:30:00"\ }\ ]; config: DayPilot.SchedulerConfig = { onEventSelect: (args) => { // Prevent selecting events whose text includes "unselectable" if (args.selected && args.e.text().includes("unselectable")) { args.preventDefault(); } }, // ... }; } ASP.NET WebForms ---------------- ### EventSelect event Whenever the user updates the selection, **EventSelect** can be fired. The handler must be enabled first using **EventSelectHandling** property. The default value of EventSelectHandling is Disabled. ### Server-side API The list of selected events is available in **SelectedEvents** property. It is synchronized during PostBacks or CallBacks and is accessible in all event handlers (not only EventSelect). ### Demo * [http://www.daypilot.org/demo/Scheduler/EventSelecting.aspx](http://www.daypilot.org/demo/Scheduler/EventSelecting.aspx) ASP.NET MVC ----------- Set EventClickHandling to EventClickHandlingType.Select. @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... EventClickHandling = EventClickHandlingType.Select, AllowMultiSelect = false }) ### Select Event You can handle the select event using OnEventSelect method on the server side by setting EventSelectHandling to EventSelectHandlingType.CallBack. View @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... EventClickHandling = EventClickHandlingType.Select, EventSelectHandling = EventSelectHandlingType.CallBack }) Backend Controller protected override void OnEventSelect(EventSelectArgs e) { if (e.Event.Value == "1" && e.Change == EventSelectChange.Selected) { SelectedEvents.Add(EventInfo.Create("13")); // add another event to the selection when event 1 was selected } Update(); } ### Demo * [http://mvc.daypilot.org/demo/Scheduler/EventSelecting](http://mvc.daypilot.org/demo/Scheduler/EventSelecting) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Client-Side Update - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Client-Side Event API](https://doc.daypilot.org/calendar/client-side-event-api/ "Client-Side Event API") * [Client-Side Update](https://doc.daypilot.org/calendar/client-side-update/ "Client-Side Update") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Client-Side Update ================== Call update() on the client side to immediately update the calendar after changing the properties. This used to require a server-side request using commandCallBack(). ### Changing Cell Height (Example) dpc.cellHeight = 40; dpc.update(); Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Client-Side Update - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Client-Side Event API](https://doc.daypilot.org/month/client-side-event-api/ "Client-Side Event API") * [Client-Side Update](https://doc.daypilot.org/month/client-side-update/ "Client-Side Update") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Client-Side Update ================== Call update() on the client side to immediately update the calendar after changing the properties. This used to require a server-side request using commandCallBack(). ### Example dpm.showWeekend = false; dpm.update(); Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Dynamic Event Loading - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Dynamic Event Loading ===================== ![html5 scheduler dynamic event loading](https://cdn.doc.daypilot.org/page/image/wwxweiazkrfmndgd57xz6d7eya/html5-scheduler-dynamic-event-loading.png "html5 scheduler dynamic event loading") The [JavaScript Scheduler](https://javascript.daypilot.org/scheduler/)  can load events from the server dynamically as the user scrolls. Notes ----- * The Scheduler fires `onScroll` event after every scrollbar position change. * The delay before the Scroll event is fired can be configured using `scrollDelayDynamic` property. JavaScript Scheduler -------------------- Handle the [onScroll](https://api.daypilot.org/daypilot-scheduler-onscroll/)  event to supply events for the viewport. See also: * [DayPilot.Scheduler.dynamicLoading](https://api.daypilot.org/daypilot-scheduler-dynamicloading/) * [DayPilot.Scheduler.onScroll](https://api.daypilot.org/daypilot-scheduler-onscroll/) ### Example ### JavaScript Tutorials * [HTML5 Scheduler with Dynamic Event Loading](https://code.daypilot.org/85715/html5-scheduler-with-dynamic-event-loading)  (PHP backend) * [JavaScript Scheduler: Dynamic Event Loading](https://code.daypilot.org/71187/javascript-scheduler-dynamic-event-loading-asp-net-core)  (ASP.NET Core Backend) ### Live Demo * [http://javascript.daypilot.org/demo/scheduler/dynamic.html](http://javascript.daypilot.org/demo/scheduler/dynamic.html) Angular Scheduler ----------------- This example shows how to enable dynamic event loading in the [Angular Scheduler](https://doc.daypilot.org/scheduler/angular/ "Angular")  component. ### Example import {Component, ViewChild, AfterViewInit} from "@angular/core"; import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular"; import {DataService} from "./data.service"; @Component({ selector: 'scheduler-component', template: ` `, styles: [``] }) export class SchedulerComponent implements AfterViewInit { @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent; config: any = { dynamicLoading: true, onScroll: args => { let dp = this.scheduler.control; let viewport = dp.getViewPort(); let from = viewport.start; let to = viewport.end; let rstart = viewport.resources[0]; let rend = viewport.resources[viewport.resources.length - 1]; args.async = true; this.ds.getEventsForViewport(from, to, rstart, rend).subscribe(result => { args.events = result; args.loaded(); }); }, // ... }; constructor(private ds: DataService) { } } ### Angular Tutorial * [Angular Scheduler: Dynamic Loading of Large Data Sets](https://code.daypilot.org/15036/angular-scheduler-dynamic-loading-of-large-data-sets) React Scheduler --------------- In the [React Scheduler](https://doc.daypilot.org/scheduler/react/ "React")  component, enable the dynamic event loading using `dynamicLoading` property and add an `onScroll` event handler that will supply event data for the new viewport. In this example, we extend the viewport date range by one day in both directions to create a buffer with preloaded events. The list of resources included in the current viewport is sent as a comma-separated list of resource IDs. import React, {Component} from 'react'; import {DayPilotScheduler} from "daypilot-pro-react"; class Scheduler extends Component { constructor(props) { super(props); this.state = { dynamicLoading: true, onScroll: args => { const viewport = args.viewport; const from = viewport.start.addDays(-1); const to = viewport.end.addDays(1); const resources = viewport.resources.map(r => r.id); const resourceList = resources.join(","); const {data: events} = await DayPilot.Http.get(`/api/eventsForViewport?from=${from}&to=${to}&resources=${resourceList}`); args.events = events; args.loaded(); } }; } render() { return (
); } } export default Scheduler; Vue Scheduler ------------- In the [Vue Scheduler](https://doc.daypilot.org/scheduler/vue-js/ "Vue")  component, you can enable dynamic event loading using the `dynamicLoading` property of the `config` object. To load the events for the updated viewport during scrolling, use the `onScroll` event handler: ### Vue Tutorial * [Vue Scheduler: On-Demand Event Loading](https://code.daypilot.org/42385/vue-scheduler-on-demand-event-loading) ASP.NET WebForms ---------------- By default, events for the **full grid** (defined by [StartDate](http://api.daypilot.org/daypilot-scheduler-startdate/)  and [Days](http://api.daypilot.org/daypilot-scheduler-days/) ) are loaded from the server. The scheduler may become slow when displaying a large number of events. There is an option to load only the events for the **visible range**. Events will be loaded and rendered as the users scrolls. 1\. Activate the dynamic event loading mode using DynamicLoading property" DynamicLoading="true" 2\. Handle **Scroll** event: OnScroll="DayPilotScheduler1_Scroll" protected void DayPilotScheduler1_Scroll(object sender, DayPilot.Web.Ui.Events.ScrollEventArgs e) {   setDataSourceAndBind();   DayPilotScheduler1.Update(); } Information about the visible range is stored in the **ViewPort** property: * ViewPort.Start - Start of the visible range (DateTime) * ViewPort.End - End of the visible range (DateTime) * ViewPort.Resources - List of IDs (Value property) of the visible resources (List) ### Tutorial * [ASP.NET Scheduler with On-Demand Event Loading](http://code.daypilot.org/80052/asp-net-scheduler-with-on-demand-event-loading) ### Demo * [Demo: Dynamic Event Loading](http://www.daypilot.org/demo/Scheduler/DynamicEventLoading.aspx) ASP.NET MVC ----------- Events can be loaded dynamically (on demand) as the user scrolls. ### Enable Dynamic Event Loading DynamicEventLoading = true ### Load the Events upon Request New events are requested from the server using **OnScroll** event every time the scrollbar position is changed. Details about the new viewport are available in ViewPort property. * ViewPort.Start * ViewPort.End * ViewPort.Resources ### Example View @Html.DayPilotScheduler("dps_dynamic", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... DynamicLoading = true, }) Backend Controller protected override void OnScroll(ScrollArgs e) { DateTime start = ViewPort.Start; DateTime end = ViewPort.End; List resources = ViewPort.Resources; Events = new DataManager().GetEvents(start, end, resources); Update(CallBackUpdateType.EventsOnly); } ### Demo * [http://mvc.daypilot.org/demo/Scheduler/DynamicEventLoading](http://mvc.daypilot.org/demo/Scheduler/DynamicEventLoading) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Notify Event Model - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [AfterRender](https://doc.daypilot.org/month/afterrender/ "AfterRender") * [AutoRefresh](https://doc.daypilot.org/month/autorefresh/ "AutoRefresh") * [CallBack Update](https://doc.daypilot.org/month/callback-update/ "CallBack Update") * [CallBack with Custom Data](https://doc.daypilot.org/month/callback-with-custom-data/ "CallBack with Custom Data") * [ClientState](https://doc.daypilot.org/month/clientstate/ "ClientState") * [CommandCallBack()](https://doc.daypilot.org/month/commandcallback/ "CommandCallBack()") * [Notify Event Handler](https://doc.daypilot.org/month/notify-event-handler/ "Notify Event Handler") * [Notify Event Model](https://doc.daypilot.org/month/notify-event-model/ "Notify Event Model") * [Notify Queue](https://doc.daypilot.org/month/notify-queue/ "Notify Queue") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Notify Event Model ================== ![monthly event calendar ajax notify](https://cdn.doc.daypilot.org/page/image/5rxys7ios5ajjpu4h3cdkdqzt4/monthly-event-calendar-ajax-notify.png "monthly event calendar ajax notify") Event handling models --------------------- ### Refresh event model The traditional **refresh** model is used when event handling is set to CallBack (e.g. EventMoveHandling="CallBack") or PostBack (ASP.NET WebForms only). 1. An action is performed by the user (event moving, resizing). 2. Event handler is fired and the details are sent to the server side. 3. The server-side event handler updates the database and reloads the events. 4. Updated event set is sent to the client side. 5. All events are refreshed on the client side. ### Notify event model The fast **notify** refresh model is used when event handling is set to Notify (e.g. EventMoveHandling="Notify"). It can be used automatically for event moving (EventMoveHandling) and event resizing (EventResizeHandling). It can be also used for client side event updates. 1. An action is performed by the user (event moving, resizing). 2. The events are updated on the client side and the change is immediately visible. 3. Event handler is fired and the details are sent to the server side. 4. The server-side event handler updates the database. Client-side event refresh is optional. Speed gains ----------- The Notify model allows a super-fast UI feedback. Nothing has to be loaded from the server side and only the changed rows are redrawn. While the same change may take **several seconds** using the traditional **refresh** model (server round-trip, events reloaded from a db, client-side reload) it will take only **a few milliseconds** with the **notify** model. Notify event queue ------------------ Depending on the NotifyCommit property value the client-side changes can be sent to the server side immediately (NotifyCommit="Immediate") or they can be queued on the client side (NotifyCommit="Queue"). The queued events must be sent manually using client-side API: dpc.queue.notify(); The "Notify" event model updates the client first and then notifies the server about the change. Compare this model with the traditional "Refresh" model where the change is first sent to the server, the server returns and updated event set and the client is refreshed. Server-side event handlers -------------------------- ### EventMove, EventResize Both event moving (EventMoveHandling="Notify") and event resizing (EventResizeHandling="Notify") fire the standard event handlers on the server side: * [EventMove](https://doc.daypilot.org/month/event-moving/ "Event Moving") * [EventResize](https://doc.daypilot.org/month/event-resizing/ "Event Resizing") Example (ASP.NET WebForms): protected void DayPilotMonth1\_EventMove(object sender, EventMoveEventArgs e) { // update the database eventMove(e.Value, e.NewStart, e.NewEnd); // send a confirmation to the client DayPilotMonth1.UpdateWithMessage("Event moved."); } If you call UpdateWithMessage() or Update() without the CallBackUpdateType specified DayPilot Month will detect the Notify mode and it will not send the updated event set to the client. It is possible to force client-side refresh using Update(CallBackUpdateType.EventsOnly) or Update(CallBackUpdateType.Full). * This might be necessary if the action is forbidden (i.e. the required action will not be stored and the events need to be reset to the original state). * Sometimes the change affects other events as well so they need to be updated. * You may want to update resource details (e.g. row summaries). ### EventAdd, EventRemove, EventUpdate Individual actions submitted using [DayPilot.Action.notify()](http://api.daypilot.org/daypilot-action-notify/)  invoke **EventAdd**, **EventRemove**, or **EventUpdate** event handlers (depending on action type). See also [Update Events without Reloading](https://doc.daypilot.org/month/update-events-without-reloading/ "Update Events without Reloading") ### Notify The [Notify event handler](https://doc.daypilot.org/month/notify-event-handler/ "Notify Event Handler")  is fired when the [action queue](https://doc.daypilot.org/month/notify-queue/ "Notify Queue")  is submitted using [DayPilot.Month.queue.notify()](http://api.daypilot.org/daypilot-month-queue-notify/) . Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Client-Side Event API - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Client-Side Event API](https://doc.daypilot.org/month/client-side-event-api/ "Client-Side Event API") * [Client-Side Update](https://doc.daypilot.org/month/client-side-update/ "Client-Side Update") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Client-Side Event API ===================== You can add, remove, and update events on the client side. ### Overview * [events.add](http://api.daypilot.org/daypilot-month-events-add/ "DayPilot.Month.events.add") (e, data) * [events.find](http://api.daypilot.org/daypilot-month-events-find/ "DayPilot.Month.events.find") (id) * [events.findRecurrent](http://api.daypilot.org/daypilot-month-events-findrecurrent/ "DayPilot.Month.events.findRecurrent") (masterId, time) * [events.remove](http://api.daypilot.org/daypilot-month-events-remove/ "DayPilot.Month.events.remove") (e, data) * [events.update](http://api.daypilot.org/daypilot-month-events-update/ "DayPilot.Month.events.update") (e, data) ### See also * [Update Events without Reloading](https://doc.daypilot.org/month/update-events-without-reloading/ "Update Events without Reloading") * [Notify Event Model](https://doc.daypilot.org/month/notify-event-model/ "Notify Event Model") JavaScript ---------- ### Event adding Events can be added to the [Monthly Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component")  using [events.add()](http://api.daypilot.org/daypilot-month-events-add/)  method. var e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event"}); dpm.events.add(e); ### Event updating Events can be updated using [events.update()](http://api.daypilot.org/daypilot-month-events-update/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-month-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-month-events-findrecurrent/) . var e = dpc.events.find('123'); dpc.text('New Event Name'); // update the event text dpc.client.innerHTML('New Event Name'); // update the event HTML dpc.events.update(e); ### Event removing Events can be removed using [events.remove()](http://api.daypilot.org/daypilot-month-events-remove/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-month-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-month-events-findrecurrent/) . var e = dpc.events.find('123'); dpc.events.remove(e); ASP.NET WebForms ---------------- ### Event adding Events can be added to the [Monthly Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component")  using [events.add()](http://api.daypilot.org/daypilot-month-events-add/)  method. var e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event"}); dpm.events.add(e).notify(); This example will add a new event called "New Event" and notify the server by firing **EventAdd** event. protected void DayPilotMonth1\_EventAdd(object sender, EventAddEventArgs e) { // create the event in the database using custom method createEvent(e.Event.Value, e.Event.Start, e.Event.End, e.Event.Text); // your method for updating the database // display a message to the user DayPilotMonth1.UpdateWithMessage("Added."); } ### Event updating Events can be updated using [events.update()](http://api.daypilot.org/daypilot-month-events-update/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-month-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-month-events-findrecurrent/) . var e = dpc.events.find('123'); dpm.text('New Event Name'); // update the event text dpm.events.update(e).notify(); This example will find an event with id "123", update the text and displayed HTML, and notify the server by firing **EventUpdate** event. protected void DayPilotMonth1\_EventUpdate(object sender, EventUpdateEventArgs e) { createEvent(e.Event.Value, e.Event.Start, e.Event.End, e.Event.Text); // your method for updating the database // display a message to the user DayPilotMonth1.UpdateWithMessage("Updated."); } ### Event removing Events can be removed using [events.remove()](http://api.daypilot.org/daypilot-month-events-remove/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-month-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-month-events-findrecurrent/) . var e = dpc.events.find('123'); dpm.events.remove(e).notify(); This example will find an event with id "123", remove it, and notify the server by firing **EventRemove** event. protected void DayPilotMonth1\_EventRemove(object sender, EventRemoveEventArgs e) { removeEvent(e.Event.Value); // your method for updating the database // display a message to the user DayPilotMonth1.UpdateWithMessage("Deleted."); } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Notify Event Model - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [AfterRender](https://doc.daypilot.org/calendar/afterrender/ "AfterRender") * [AutoRefresh](https://doc.daypilot.org/calendar/autorefresh/ "AutoRefresh") * [CallBack Update](https://doc.daypilot.org/calendar/callback-update/ "CallBack Update") * [CallBack with Custom Data](https://doc.daypilot.org/calendar/callback-with-custom-data/ "CallBack with Custom Data") * [ClientState](https://doc.daypilot.org/calendar/clientstate/ "ClientState") * [CommandCallBack()](https://doc.daypilot.org/calendar/commandcallback/ "CommandCallBack()") * [Notify Event Handler](https://doc.daypilot.org/calendar/notify-event-handler/ "Notify Event Handler") * [Notify Event Model](https://doc.daypilot.org/calendar/notify-event-model/ "Notify Event Model") * [Notify Queue](https://doc.daypilot.org/calendar/notify-queue/ "Notify Queue") * [Server-Side Event Handling](https://doc.daypilot.org/calendar/server-side-event-handling/ "Server-Side Event Handling") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Notify Event Model ================== ![event calendar ajax notify](https://cdn.doc.daypilot.org/page/image/hihlyxitofbefdalnll6okl5vm/event-calendar-ajax-notify.png "event calendar ajax notify") Event handling models --------------------- ### Refresh event model The traditional **refresh** model is used when event handling is set to CallBack (e.g. EventMoveHandling="CallBack") or PostBack (ASP.NET WebForms only). 1. An action is performed by the user (event moving, resizing). 2. Event handler is fired and the details are sent to the server side. 3. The server-side event handler updates the database and reloads the events. 4. Updated event set is sent to the client side. 5. All events are refreshed on the client side. ### Notify event model The fast **notify** refresh model is used when event handling is set to Notify (e.g. EventMoveHandling="Notify"). It can be used automatically for event moving (EventMoveHandling) and event resizing (EventResizeHandling). It can be also used for client side event updates. 1. An action is performed by the user (event moving, resizing). 2. The events are updated on the client side and the change is immediately visible. 3. Event handler is fired and the details are sent to the server side. 4. The server-side event handler updates the database. Client-side event refresh is optional. Speed gains ----------- The Notify model allows a super-fast UI feedback. Nothing has to be loaded from the server side and only the changed rows are redrawn. While the same change may take **several seconds** using the traditional **refresh** model (server round-trip, events reloaded from a db, client-side reload) it will take only **a few milliseconds** with the **notify** model. Notify event queue ------------------ Depending on the NotifyCommit property value the client-side changes can be sent to the server side immediately (NotifyCommit="Immediate") or they can be queued on the client side (NotifyCommit="Queue"). The queued events must be sent manually using client-side API: dpc.queue.notify(); The "Notify" event model updates the client first and then notifies the server about the change. Compare this model with the traditional "Refresh" model where the change is first sent to the server, the server returns and updated event set and the client is refreshed. Server-side event handlers -------------------------- ### EventMove, EventResize Both event moving (EventMoveHandling="Notify") and event resizing (EventResizeHandling="Notify") fire the standard event handlers on the server side: * [EventMove](https://doc.daypilot.org/calendar/event-moving/ "Event Moving") * [EventResize](https://doc.daypilot.org/calendar/event-resizing/ "Event Resizing") Example (ASP.NET WebForms): protected void DayPilotCalendar1\_EventMove(object sender, EventMoveEventArgs e) { // update the database eventMove(e.Value, e.NewStart, e.NewEnd); // send a confirmation to the client DayPilotCalendar1.UpdateWithMessage("Event moved."); } If you call UpdateWithMessage() or Update() without the CallBackUpdateType specified DayPilot Calendar will detect the Notify mode and it will not send the updated event set to the client. It is possible to force client-side refresh using Update(CallBackUpdateType.EventsOnly) or Update(CallBackUpdateType.Full). * This might be necessary if the action is forbidden (i.e. the required action will not be stored and the events need to be reset to the original state). * Sometimes the change affects other events as well so they need to be updated. * You may want to update resource details (e.g. row summaries). ### EventAdd, EventRemove, EventUpdate Individual actions submitted using [DayPilot.Action.notify()](http://api.daypilot.org/daypilot-action-notify/)  invoke **EventAdd**, **EventRemove**, or **EventUpdate** event handlers (depending on action type). See also [Update Events without Reloading](https://doc.daypilot.org/calendar/update-events-without-reloading/ "Update Events without Reloading") ### Notify The [Notify event handler](https://doc.daypilot.org/calendar/notify-event-handler/ "Notify Event Handler")  is fired when the [action queue](https://doc.daypilot.org/calendar/notify-queue/ "Notify Queue")  is submitted using [DayPilot.Calendar.queue.notify()](http://api.daypilot.org/daypilot-calendar-queue-notify/) . Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Client-Side Update - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Client-Side Update](https://doc.daypilot.org/scheduler/client-side-update/ "Client-Side Update") * [Client-Side Event API](https://doc.daypilot.org/scheduler/client-side-event-api/ "Client-Side Event API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Client-Side Update ================== Call [update](https://api.daypilot.org/daypilot-scheduler-update/) () on the client side to update the Scheduler after changing the properties. For a server-side assisted update, please use [CommandCallBack](https://doc.daypilot.org/scheduler/commandcallback/ "CommandCallBack()")  (ASP.NET WebForms, ASP.NET MVC, Java versions). ### Changing a Date (Example) dps.startDate = "2025-05-01"; dps.update(); Remember to have the events preloaded or to load them manually using events.add(). Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Client-Side Event API - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Client-Side Event API](https://doc.daypilot.org/calendar/client-side-event-api/ "Client-Side Event API") * [Client-Side Update](https://doc.daypilot.org/calendar/client-side-update/ "Client-Side Update") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Client-Side Event API ===================== You can add, remove, and update events on the client side. ### Overview * [events.add](http://api.daypilot.org/daypilot-calendar-events-add/ "DayPilot.Calendar.events.add") (e, data) * [events.find](http://api.daypilot.org/daypilot-calendar-events-find/ "DayPilot.Calendar.events.find") (id) * [events.findRecurrent](http://api.daypilot.org/daypilot-calendar-events-findrecurrent/ "DayPilot.Calendar.events.findRecurrent") (masterId, time) * [events.remove](http://api.daypilot.org/daypilot-calendar-events-remove/ "DayPilot.Calendar.events.remove") (e, data) * [events.update](http://api.daypilot.org/daypilot-calendar-events-update/ "DayPilot.Calendar.events.update") (e, data) ### See also * [Update Events without Reloading](https://doc.daypilot.org/calendar/update-events-without-reloading/ "Update Events without Reloading") * [Notify Event Model](https://doc.daypilot.org/calendar/notify-event-model/ "Notify Event Model") * [Notify Event Handler](https://doc.daypilot.org/calendar/notify-event-handler/ "Notify Event Handler") * [Notify Queue](https://doc.daypilot.org/calendar/notify-queue/ "Notify Queue") JavaScript ---------- ### Event adding Events can be added to the [Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component")  using [events.add()](http://api.daypilot.org/daypilot-calendar-events-add/)  method. var e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event", resource:'E'}); dpc.events.add(e); ### Event updating Events can be updated using [events.update()](http://api.daypilot.org/daypilot-calendar-events-update/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-calendar-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-calendar-events-findrecurrent/) . var e = dpc.events.find('123'); dpc.text('New Event Name'); // update the event text dpc.client.innerHTML('New Event Name'); // update the event HTML dpc.events.update(e); ### Event removing Events can be removed using [events.remove()](http://api.daypilot.org/daypilot-calendar-events-remove/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-calendar-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-calendar-events-findrecurrent/) . var e = dpc.events.find('123'); dpc.events.remove(e); ASP.NET WebForms ---------------- ### Event adding Events can be added to the [Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component")  using [events.add()](http://api.daypilot.org/daypilot-calendar-events-add/)  method. var e = new DayPilot.Event({start:new DayPilot.Date(), end:(new DayPilot.Date()).addHours(5), value: DayPilot.guid(), text: "New Event", resource:'E'}); dpc.events.add(e).notify(); This example will add a new event called "New Event" and notify the server by firing **EventAdd** event. protected void DayPilotCalendar1\_EventAdd(object sender, EventAddEventArgs e) { // create the event in the database using custom method createEvent(e.Event.Value, e.Event.Start, e.Event.End, e.Event.Resource, e.Event.Text); // your method for updating the database // display a message to the user DayPilotCalendar1.UpdateWithMessage("Added."); } ### Event updating Events can be updated using [events.update()](http://api.daypilot.org/daypilot-calendar-events-update/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-calendar-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-calendar-events-findrecurrent/) . var e = dpc.events.find('123'); dpc.text('New Event Name'); // update the event text dpc.events.update(e).notify(); This example will find an event with id "123", update the text and displayed HTML, and notify the server by firing **EventUpdate** event. protected void DayPilotCalendar1\_EventUpdate(object sender, EventUpdateEventArgs e) { createEvent(e.Event.Value, e.Event.Start, e.Event.End, e.Event.Resource, e.Event.Text); // your method for updating the database // display a message to the user DayPilotCalendar1.UpdateWithMessage("Updated."); } ### Event removing Events can be removed using [events.remove()](http://api.daypilot.org/daypilot-calendar-events-remove/)  method. The object representing the event must be acquired using [events.find()](http://api.daypilot.org/daypilot-calendar-events-find/)  or [event.findRecurrent()](http://api.daypilot.org/daypilot-calendar-events-findrecurrent/) . var e = dpc.events.find('123'); dpc.events.remove(e).notify(); This example will find an event with id "123", remove it, and notify the server by firing **EventRemove** event. protected void DayPilotCalendar1\_EventRemove(object sender, EventRemoveEventArgs e) { removeEvent(e.Event.Value); // your method for updating the database // display a message to the user DayPilotCalendar1.UpdateWithMessage("Deleted."); } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Message Bar - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [Active Areas](https://doc.daypilot.org/month/active-areas/ "Active Areas") * [Bubble](https://doc.daypilot.org/month/bubble/ "Bubble") * [Context Menu](https://doc.daypilot.org/month/context-menu/ "Context Menu") * [Message Bar](https://doc.daypilot.org/month/message-bar/ "Message Bar") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Message Bar =========== ![monthly event calendar html5 message bar](https://cdn.doc.daypilot.org/page/image/ks4wpjia7vbtnklbytc6nsdbhe/monthly-event-calendar-html5-message-bar.png "monthly event calendar html5 message bar") The message bar now display status messages. It can be displayed using server-side or client-side code. ### Closing the Message Bar * It will close automatically after 5 seconds (configurable using MessageHideAfter property) * You can close it by clicking anywhere on the bar. ### Hover Message bar close timeout (see MessageHideAfter property) will be paused when you hold the mouse cursor over the message bar. The message bar will be hidden in 500ms after you move the mouse out. ### MessageHideAfter The **MessageHideAfter** property sets the default timeout for message bar hiding (in ms). The default value is 5000 (5 seconds). ### CSS Included in the [CSS theme](https://doc.daypilot.org/month/css-themes/ "CSS Themes") . JavaScript ---------- dp.message("Event moved"); ASP.NET WebForms ---------------- The message bar can be updated easily using a **single line of code** and **without any JavaScript** on the client side. Use the UpdateWithMessage() method: * UpdateWithMessage(string message) .aspx.cs protected void DayPilotMonth1\_EventResize(object sender, EventResizeEventArgs e) { // ... DayPilotMonth1.UpdateWithMessage("Event moved."); } ASP.NET MVC ----------- Use UpdateWithMessage(string). Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Arrangement Mode - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [All-Day Events](https://doc.daypilot.org/calendar/all-day-events/ "All-Day Events") * [Duration Bar](https://doc.daypilot.org/calendar/duration-bar/ "Duration Bar") * [Event Active Areas](https://doc.daypilot.org/calendar/event-active-areas/ "Event Active Areas") * [Event Arrangement Mode](https://doc.daypilot.org/calendar/event-arrangement-mode/ "Event Arrangement Mode") * [Event Bubble](https://doc.daypilot.org/calendar/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/calendar/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/calendar/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/calendar/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/calendar/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/calendar/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/calendar/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/calendar/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/calendar/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/calendar/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/calendar/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/calendar/event-filtering/ "Event Filtering") * [Event Loading](https://doc.daypilot.org/calendar/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/calendar/event-moving/ "Event Moving") * [Event Overlaps](https://doc.daypilot.org/calendar/event-overlaps/ "Event Overlaps") * [Event Resizing](https://doc.daypilot.org/calendar/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/calendar/event-resizing-customization/ "Event Resizing Customization") * [Event Selecting](https://doc.daypilot.org/calendar/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/calendar/event-sorting/ "Event Sorting") * [Event ToolTip](https://doc.daypilot.org/calendar/event-tooltip/ "Event ToolTip") * [Exact Event Duration](https://doc.daypilot.org/calendar/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/calendar/external-drag-and-drop/ "External Drag and Drop") * [Inline Event Editing](https://doc.daypilot.org/calendar/inline-event-editing/ "Inline Event Editing") * [Recurring Events](https://doc.daypilot.org/calendar/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/calendar/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Event Arrangement Mode ====================== The [JavaScript Calendar](https://javascript.daypilot.org/calendar/) component offers several modes of arranging concurrent events: * Cascade * SideBySide * Full The default mode is “Cascade” where the events partially overlap. You can change the event arrangement mode using the [eventArrangement](https://api.daypilot.org/daypilot-calendar-eventarrangement/)  property. Cascade ------- ![javascript calendar concurrent events cascade](https://cdn.doc.daypilot.org/page/image/yay5j7ejdfeihplccvjtksefvm/javascript-calendar-concurrent-events-cascade.png "javascript calendar concurrent events cascade") SideBySide ---------- ![javascript calendar concurrent events side by side](https://cdn.doc.daypilot.org/page/image/my2bt7coarav5f4hllic4nzuvm/javascript-calendar-concurrent-events-side-by-side.png "javascript calendar concurrent events side by side") Full ---- ![javascript calendar concurrent events full](https://cdn.doc.daypilot.org/page/image/6e3oqflmjraatm2tp4zjjzeo5a/javascript-calendar-concurrent-events-full.png "javascript calendar concurrent events full") JavaScript ----------
ASP.NET WebForms ---------------- ASP.NET MVC ----------- MVC View @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { // ... EventArrangement = ArrangementType.Cascade, // ... }) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Message Bar - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [Active Areas](https://doc.daypilot.org/calendar/active-areas/ "Active Areas") * [Bubble](https://doc.daypilot.org/calendar/bubble/ "Bubble") * [Context Menu](https://doc.daypilot.org/calendar/context-menu/ "Context Menu") * [Loading Label](https://doc.daypilot.org/calendar/loading-label/ "Loading Label") * [Message Bar](https://doc.daypilot.org/calendar/message-bar/ "Message Bar") * [Scroll Labels](https://doc.daypilot.org/calendar/scroll-labels/ "Scroll Labels") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Message Bar =========== ![event calendar html5 message bar](https://cdn.doc.daypilot.org/page/image/qrslhzmijrhxplzasu7jmnss6e/event-calendar-html5-message-bar.png "event calendar html5 message bar") The message bar now display status messages. It can be displayed using server-side or client-side code. ### Closing the Message Bar * It will close automatically after 5 seconds (configurable using MessageHideAfter property) * You can close it by clicking anywhere on the bar. ### Hover Message bar close timeout (see MessageHideAfter property) will be paused when you hold the mouse cursor over the message bar. The message bar will be hidden in 500ms after you move the mouse out. ### MessageHideAfter The **MessageHideAfter** property sets the default timeout for message bar hiding (in ms). The default value is 5000 (5 seconds). ### CSS Included in the [CSS theme](https://doc.daypilot.org/calendar/css-themes/ "CSS Themes") . JavaScript ---------- dp.message("Event moved"); ASP.NET WebForms ---------------- ![calendar message bar](https://cdn.doc.daypilot.org/page/image/byqquxkwv5ep3lvwfdd4cdwdbu/calendar-message-bar.png "calendar message bar") The message bar can be updated easily using a **single line of code** and **without any JavaScript** on the client side. Use the UpdateWithMessage() method: * UpdateWithMessage(string message) .aspx.cs protected void DayPilotCalendar1\_EventResize(object sender, EventResizeEventArgs e) { // ... DayPilotCalendar1.UpdateWithMessage("Event resized"); } ASP.NET MVC ----------- Use UpdateWithMessage(string). Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Active Areas - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [Active Areas](https://doc.daypilot.org/month/active-areas/ "Active Areas") * [Bubble](https://doc.daypilot.org/month/bubble/ "Bubble") * [Context Menu](https://doc.daypilot.org/month/context-menu/ "Context Menu") * [Message Bar](https://doc.daypilot.org/month/message-bar/ "Message Bar") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Active Areas ============ ![monthly event calendar html5 active areas](https://cdn.doc.daypilot.org/page/image/a5bh4iceavaqzbpwyn2hv35o2i/monthly-event-calendar-html5-active-areas.png "monthly event calendar html5 active areas") Active areas can be used to extend the event functionality and to add visual hints to the event and other elements. * You can define the dimension and position relative to the box. * Customize the active areas using custom HTML and styles. ### Supported elements * [event active areas](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas") * [cell active areas](https://doc.daypilot.org/month/cell-active-areas/ "Cell Active Areas") ### Actions * open a [context menu](https://doc.daypilot.org/month/context-menu/ "Context Menu") * display a [bubble](https://doc.daypilot.org/month/bubble/ "Bubble")  (through custom JavaScript) * [delete an event](https://doc.daypilot.org/month/event-deleting/ "Event Deleting")  (through custom JavaScript) * move handler (events only) * resize handler (events only) * run custom JavaScript Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # External Drag and Drop - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [All-Day Events](https://doc.daypilot.org/calendar/all-day-events/ "All-Day Events") * [Duration Bar](https://doc.daypilot.org/calendar/duration-bar/ "Duration Bar") * [Event Active Areas](https://doc.daypilot.org/calendar/event-active-areas/ "Event Active Areas") * [Event Arrangement Mode](https://doc.daypilot.org/calendar/event-arrangement-mode/ "Event Arrangement Mode") * [Event Bubble](https://doc.daypilot.org/calendar/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/calendar/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/calendar/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/calendar/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/calendar/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/calendar/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/calendar/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/calendar/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/calendar/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/calendar/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/calendar/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/calendar/event-filtering/ "Event Filtering") * [Event Loading](https://doc.daypilot.org/calendar/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/calendar/event-moving/ "Event Moving") * [Event Overlaps](https://doc.daypilot.org/calendar/event-overlaps/ "Event Overlaps") * [Event Resizing](https://doc.daypilot.org/calendar/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/calendar/event-resizing-customization/ "Event Resizing Customization") * [Event Selecting](https://doc.daypilot.org/calendar/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/calendar/event-sorting/ "Event Sorting") * [Event ToolTip](https://doc.daypilot.org/calendar/event-tooltip/ "Event ToolTip") * [Exact Event Duration](https://doc.daypilot.org/calendar/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/calendar/external-drag-and-drop/ "External Drag and Drop") * [Inline Event Editing](https://doc.daypilot.org/calendar/inline-event-editing/ "Inline Event Editing") * [Recurring Events](https://doc.daypilot.org/calendar/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/calendar/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") External Drag and Drop ====================== ![Drag External Items to the JavaScript Calendar as Events](https://cdn.doc.daypilot.org/page/image/ep2bf564vvardj3duyc4hs4weq/Drag+External+Items+to+the+JavaScript+Calendar+as+Events.png "Drag External Items to the JavaScript Calendar as Events") The [JavaScript Calendar](https://javascript.daypilot.org/calendar/) component supports drag & drop of items from an external source (from outside of the calendar control). This feature is useful for implementing the following scenario: * The calendar shows current time schedule. * Separate list of events that are not yet scheduled.  * The unscheduled events can be dragged to the calendar. ### Drag Source It is necessary to **activate the source elements** using the [DayPilot.Calendar.makeDraggable()](https://api.daypilot.org/daypilot-calendar-makedraggable/)  method:
External event
After dropping the object in the Calendar as an event, the standard [onEventMove](https://doc.daypilot.org/calendar/event-moving/ "Event Moving")  event is triggered. You can detect the external source by checking the `args.external` variable. This property is set to `true` is the event was dragged from an external source. onEventMove: args => { if (args.external) { console.log("External drag source detected"); } } ### See also * [DayPilot.Calendar.makeDraggable()](https://api.daypilot.org/daypilot-calendar-makedraggable/) ASP.NET WebForms ---------------- EventMoveJavaScript="if (external) { alert('External drag&drop detected.'); } dpc1.eventMoveCallBack(e, newStart, newEnd, oldColumn, newColumn);" ### Demo * [ASP.NET Event Calendar: External Drag & Drop Demo](https://aspnet.daypilot.org/demo/Calendar/ExternalDragDrop.aspx) ### See also * [Drag & drop from a TextBox or Grid](http://forums.daypilot.org/Topic.aspx/237/drag_and_drop_from_a_textbox_or_grid)  (DayPilot Forums) * [Drag & drop with dynamic events](http://forums.daypilot.org/Topic.aspx/187/dragdrop_with_dynamic_events)  (DayPilot Forums) * [Say we have drag & drop component ...](http://forums.daypilot.org/Topic.aspx/194/say_we_have_a_drag_and_drop_component_which_holds_certain_da)  (DayPilot Forums) * [How to prevent event overlapping](http://kb.daypilot.org/100394/how-to-prevent-event-overlapping/)  (KB) ASP.NET MVC ----------- External drag&drop can be detected using "external" variable: EventMoveJavaScript="if (external) { alert('external source detected'); } dpc.eventMoveCallBack(e, newStart, newEnd);" See also: * [DayPilot.Calendar.onEventMove](http://api.daypilot.org/daypilot-calendar-oneventmove/)  (client-side API) * [DayPilot.Calendar.eventMoveCallBack](http://api.daypilot.org/daypilot-calendar-eventmovecallback/)  (client-side API) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Rows per Month - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Navigator](https://doc.daypilot.org/navigator/ "Navigator - Date Picker") * [Appearance](https://doc.daypilot.org/navigator/appearance/ "Appearance") * [Orientation](https://doc.daypilot.org/navigator/orientation/ "Date Picker Orientation") * [Rows per Month](https://doc.daypilot.org/navigator/rows-per-month/ "Rows per Month") * [Week Numbers](https://doc.daypilot.org/navigator/week-numbers/ "Date Picker Week Numbers") * [Number of Months](https://doc.daypilot.org/navigator/months/ "Number of Months") * [Responsive Mode](https://doc.daypilot.org/navigator/responsive-mode/ "Responsive Date Picker Mode") * [CSS](https://doc.daypilot.org/navigator/css/ "Date Picker CSS") * [Days](https://doc.daypilot.org/navigator/days/ "Days") * [Events](https://doc.daypilot.org/navigator/events/ "Events") * [Frameworks](https://doc.daypilot.org/navigator/frameworks/ "Frameworks") * [Localization](https://doc.daypilot.org/navigator/localization/ "Localization") * [Navigation](https://doc.daypilot.org/navigator/navigation/ "Navigation") Rows per Month ============== By default, the Navigator date picker always displays six rows (weeks) per month. This is the maximum number of rows needed to show a full month of 31 days. * Each month has the same height. * Some months are shorter and may result in an empty row at the bottom. For the last month, the empty row will be filled with the appropriate days from the following month. You can also switch the date picker (**rowsPerMonth** property) to "Auto" mode which hides the empty row at the bottom. ### Six (default mode) ![navigator date picker rows per month six](https://cdn.doc.daypilot.org/page/image/7hp542vfevbujgqdcjmvqxuuie/navigator-date-picker-rows-per-month-six.png "navigator date picker rows per month six") ### Auto ![navigator date picker rows per month auto](https://cdn.doc.daypilot.org/page/image/7xfzwellorhdvobvszcips6pe4/navigator-date-picker-rows-per-month-auto.png "navigator date picker rows per month auto") JavaScript Example ------------------ In the JavaScript date picker component, use the [rowsPerMonth](https://api.daypilot.org/daypilot-navigator-rowspermonth/)  property: Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # 100% Height - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [100% Height](https://doc.daypilot.org/month/100-pct-height/ "100% Height") * [Height](https://doc.daypilot.org/month/height/ "Height") * [Width](https://doc.daypilot.org/month/width/ "Width") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") 100% Height =========== ![JavaScript Monthly Calendar 100 Percent Height](https://cdn.doc.daypilot.org/page/image/kssz4irgj5hb5npajh2iwkyn3y/JavaScript+Monthly+Calendar+100+Percent+Height.png "JavaScript Monthly Calendar 100 Percent Height") The [heightSpec](https://api.daypilot.org/daypilot-month-heightspec/) property can be set to `"Parent100Pct"`. This will set the total height of the [Monthly Calendar](https://javascript.daypilot.org/month/) to 100% of its parent element. Note that the height of the parent element must be set explicitly (e.g. using the [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) or [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) CSS properties). ### Related Topics * [Height](https://doc.daypilot.org/month/height/ "Height") JavaScript ----------
ASP.NET WebForms ---------------- ASP.NET MVC ----------- @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { BackendUrl = ResolveUrl("~/Month/Backend"), HeightSpec = HeightSpec.Parent100Pct, ... }) Java ----
Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Duration Bar - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Duration Bar ============ ### ![javascript html5 scheduler component event duration bar](https://cdn.doc.daypilot.org/page/image/utanrtygpzep3ezvvwi24537um/javascript-html5-scheduler-component-event-duration-bar.png "javascript html5 scheduler component event duration bar") The [JavaScript Scheduler](https://javascript.daypilot.org/scheduler/)  component displays a duration bar at the top of events. The default mode is to show the **real event duration**: * With the default [useEventBoxes](https://api.daypilot.org/daypilot-scheduler-useeventboxes/)  setting (`"Always"`), the event boxes are aligned with the Scheduler grid cells. * The dark part of the duration bar shows the real start and end within a cell. You can also set a different color of the duration bar for each event, depending on their **status or type**. You can change the duration bar to a **progress bar**. In this case the dark part of the duration bar displays progress defined as a percentage value. The duration bar can be **turned off**. You can hide the default duration and create a bar with **custom** logic/appearance using [event active areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") . Hiding the Duration Bar ----------------------- The duration bar ([progress bar](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete")  in PercentComplete mode) is enabled by default. You can disable it using [DurationBarVisible](http://api.daypilot.org/daypilot-scheduler-durationbarvisible/)  property. You can also disable it for certain events using [BeforeEventRender](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization")  event handler. ### JavaScript Example You can hide the duration/progress bar for selected events directly in the data source by adding .barHidden = true to event properties. See also [DayPilot.Event.data](http://api.daypilot.org/daypilot-event-data/) . dp.events.list = [\ {\ id: "1"\ start: "2023-01-01T09:00:00",\ end: "2023-01-01T13:00:00",\ text: "Event 1",\ resource: "B",\ barHidden: true\ }\ ]; Appearance ---------- The duration bar appearance is defined in the [CSS theme](https://doc.daypilot.org/scheduler/css-themes/ "CSS Themes") . You can modify the CSS to display the duration bar at a different position inside an event (e.g. at the bottom), use custom height, add margins, and set the background color. Example: /* outer box, full width */ .scheduler_green_event_bar { top: 3px; left: 4px; right: 4px; height: 2px; background-color: #C7D48D; } /* inner box, with varying start and width */ .scheduler_green_event_bar_inner { position: absolute; height: 2px; background-color: #6E8700; } Progress Bar Mode ----------------- You switch the duration bar mode to display [completed percentage](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete")  of the task. Custom Duration Bar Color ------------------------- The duration bar color can be set for each event individually using [BeforeEventRender](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization")  event handler. Tutorials --------- See also [How to Add Custom Progress Bar to React Scheduler Events](https://code.daypilot.org/10467/how-to-add-custom-progress-bar-to-react-scheduler-events)  for an example that adds a custom percentage progress bar to the bottom of Scheduler events (in addition to the standard duration bar). Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Percent Complete - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Percent Complete ================ ![scheduler percent complete](https://cdn.doc.daypilot.org/page/image/sqzu6ioph5c27iptg2nc7i4twm/scheduler-percent-complete.png "scheduler percent complete") You can use the duration bar as a progress bar or "percent complete" indicator. 1. Make sure the duration bar is enabled ([durationBarVisible](https://api.daypilot.org/daypilot-scheduler-durationbarvisible/)  property) 2. Set the duration bar mode to _"PercentComplete"_ ([durationBarMode](https://api.daypilot.org/daypilot-scheduler-durationbarmode/)  property) 3. Set the percentage in [onBeforeEventRender](https://api.daypilot.org/daypilot-scheduler-onbeforeeventrender/)  event handler (_args.data.complete_ property) JavaScript ----------
ASP.NET WebForms ---------------- .aspx .aspx.cs protected void DayPilotScheduler1\_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { int complete = (int) e.DataItem\["complete"\]; // assumes you have "complete" property in the data source item e.PercentComplete = complete; string cs = String.Format("{0}%", complete); e.Html = cs; } ### Demo * [http://www.daypilot.org/demo/Scheduler/PercentComplete.aspx](http://www.daypilot.org/demo/Scheduler/PercentComplete.aspx) ASP.NET MVC ----------- ![scheduler asp.net mvc task percent complete](https://cdn.doc.daypilot.org/page/image/ihmofojiavdthn4wwx2b2mamki/scheduler-asp.net-mvc-task-percent-complete.png "scheduler asp.net mvc task percent complete") View @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... DurationBarVisible = true, DurationBarMode = DurationBarMode.PercentComplete, }) Backend Controller protected override void OnBeforeEventRender(BeforeEventRenderArgs e) { int complete = (int) e.DataItem\["complete"\]; // assumes you have "complete" property in the data source item e.PercentComplete = complete; string cs = String.Format("{0}%", complete); e.Html = cs; } ### Demo * [http://mvc.daypilot.org/demo/Scheduler/PercentComplete](http://mvc.daypilot.org/demo/Scheduler/PercentComplete) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # 100% Height - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Height](https://doc.daypilot.org/calendar/height/ "Height") * [100% Height](https://doc.daypilot.org/calendar/100-pct-height/ "100% Height") * [Width](https://doc.daypilot.org/calendar/width/ "Width") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") 100% Height =========== The [heightSpec](https://api.daypilot.org/daypilot-calendar-heightspec/) property can be set to `"Parent100Pct"`. This will set the total Calendar height to 100% of its parent element. In order to fill the browser window with the Calendar control, the parent height must be set explicitly. 1\. The easiest way is to use `position: absolute` style in combination with `top` and `bottom` CSS properties: 2\. You can also define the parent element height using `height: 100%` style. In this case, don't forget to set the height of all parent elements (including `` and ``) explicitly as well: ### Related Topics * [Calendar Height](https://doc.daypilot.org/calendar/height/ "Height") JavaScript ---------- Example:
### Tutorial [![JavaScript Resource Scheduling Calendar Full Screen Layout](https://cdn.doc.daypilot.org/page/image/fhlhwrir3vefpet5owibffmuhm/JavaScript+Resource-Scheduling+Calendar+-+Full-Screen+Layout.png "JavaScript Resource Scheduling Calendar Full Screen Layout")](https://code.daypilot.org/40607/javascript-resource-scheduling-calendar-full-screen-layout) [JavaScript Resource-Scheduling Calendar: Full-Screen Layout](https://code.daypilot.org/40607/javascript-resource-scheduling-calendar-full-screen-layout) Use the 100% height mode of the calendar to avoid duplicate vertical scrollbars and keep headers fixed. Angular ------- Tutorial: * [Angular Calendar: Full Screen Layout](https://code.daypilot.org/58222/angular-calendar-full-screen-layout) ASP.NET WebForms ---------------- Example: ASP.NET MVC ----------- Example: @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), HeightSpec = HeightSpec.Parent100Pct, ... }) Java ---- Example:
Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Height - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Height](https://doc.daypilot.org/calendar/height/ "Height") * [100% Height](https://doc.daypilot.org/calendar/100-pct-height/ "100% Height") * [Width](https://doc.daypilot.org/calendar/width/ "Width") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Height ====== You can specify the height mode of the [JavaScript Calendar](https://javascript.daypilot.org/calendar/)  component using the [heightSpec](https://api.daypilot.org/daypilot-calendar-heightspec/)  property. Supported values: * _"BusinessHours"_ (default) * _"BusinessHoursNoScroll"_ * _"Fixed"_ * _"Full"_ * _"Parent100Pct"_ The open-source [DayPilot Lite](https://javascript.daypilot.org/open-source/)  version supports the following modes: * _"BusinessHours"_ (default) * _"BusinessHoursNoScroll"_ * _"Full"_ ### BusinessHours ![calendar heighspec businesshours](https://cdn.doc.daypilot.org/page/image/twgxp4ntg5exjjotr43spdf3yi/calendar-heighspec-businesshours.png "calendar heighspec businesshours") * **Height:** Calculated automatically to show the business hours range defined using _BusinessBeginsHour_ and _BusinessEndsHour_. * **Non-business hours:** visible * **Scrollbar:** visible ### BusinessHoursNoScroll ![calendar heighspec businesshoursnoscroll](https://cdn.doc.daypilot.org/page/image/luur2jjtcvhl7juxpatz5fnrgq/calendar-heighspec-businesshoursnoscroll.png "calendar heighspec businesshoursnoscroll") * **Height:** Calculated automatically to show the business hours range defined using _BusinessBeginsHour_ and_BusinessEndsHour_. * **Non-business hours:** hidden * **Scrollbar:** hidden ### Fixed ![calendar heighspec fixed](https://cdn.doc.daypilot.org/page/image/54j7bd5ltbdp7g6mc5jai7sl7y/calendar-heighspec-fixed.png "calendar heighspec fixed") * **Height:** Specified in Height property (pixels). * **Non-business hours:** visible * **Scrollbar:** visible ### Full ![calendar heighspec full](https://cdn.doc.daypilot.org/page/image/fu5yrfpxrrfbhnvcj5z5tmrha4/calendar-heighspec-full.png "calendar heighspec full") * **Height:** Calculated automatically to show all 24 hours of a day. * **Non-business hours:** visible * **Scrollbar:** hidden ### Parent100Pct ![calendar heighspec fixed](https://cdn.doc.daypilot.org/page/image/54j7bd5ltbdp7g6mc5jai7sl7y/calendar-heighspec-fixed.png "calendar heighspec fixed") * **Height:** 100% of the parent element. * **Non-business hours:** visible * **Scrollbar:** visible See also [100% height](https://doc.daypilot.org/calendar/100-pct-height/ "100% Height") . JavaScript ---------- Example:
Java (JSP) ----------
ASP.NET WebForms ---------------- ### Demo * [http://www.daypilot.org/demo/Calendar/ScrollingArea.aspx](http://www.daypilot.org/demo/Calendar/ScrollingArea.aspx) ASP.NET MVC ----------- @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { BackendUrl = ResolveUrl("~/Calendar/Backend"), ... HeightSpec = HeightSpec.BusinessHours, Height = 400 }) AngularJS ---------
Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Height - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [100% Height](https://doc.daypilot.org/month/100-pct-height/ "100% Height") * [Height](https://doc.daypilot.org/month/height/ "Height") * [Width](https://doc.daypilot.org/month/width/ "Width") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Height ====== ![JavaScript Monthly Calendar Height](https://cdn.doc.daypilot.org/page/image/rizxqhehuvf6nogemmhew63abq/JavaScript+Monthly+Calendar+Height.png "JavaScript Monthly Calendar Height") The monthly calendar supports several options for setting the component height. The mode can be set using the [heightSpec](https://api.daypilot.org/daypilot-month-heightspec/) property. Supported values: * Auto (default) * Fixed * Parent100Pct ### Auto * **Height:** Calculated automatically to show all weeks. * **Scrollbar:** hidden ### Fixed * **Height:** Specified in Height property (pixels). * **Scrollbar:** visible ### Parent100Pct * **Height:** 100% of the parent element. * **Scrollbar:** visible See also [100% height](https://doc.daypilot.org/calendar/100-pct-height/ "100% Height") . JavaScript ----------
ASP.NET WebForms ---------------- ASP.NET MVC ----------- @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { BackendUrl = ResolveUrl("~/Month/Backend"), ... HeightSpec = HeightSpec.BusinessHours, Height = 400 }) Java ----
Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Width - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Height](https://doc.daypilot.org/calendar/height/ "Height") * [100% Height](https://doc.daypilot.org/calendar/100-pct-height/ "100% Height") * [Width](https://doc.daypilot.org/calendar/width/ "Width") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Width ===== By default, the [JavaScript Calendar](https://javascript.daypilot.org/calendar/) component fills the available width. This behavior corresponds to `display:block` style. You can set a custom width using the [width](https://api.daypilot.org/daypilot-calendar-width/) property. It accepts a string in CSS format. See also [responsive column width](https://doc.daypilot.org/calendar/responsive-column-width/ "Responsive Column Width") . ### JavaScript Example
ASP.NET WebForms ---------------- ASP.NET MVC ----------- @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { BackendUrl = ResolveUrl("~/Calendar/Backend"), Width = "100%", ... }) Java ----
Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Width - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [100% Height](https://doc.daypilot.org/month/100-pct-height/ "100% Height") * [Height](https://doc.daypilot.org/month/height/ "Height") * [Width](https://doc.daypilot.org/month/width/ "Width") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Width ===== Width accepts an empty value (and it's the default value). This behavior corresponds to display:block style. You can use any value acceptable for **width** CSS style. ### JavaScript Example
### ASP.NET WebForms Example ### ASP.NET MVC Example @Html.DayPilotMonth("dps", new DayPilotMonthConfig { BackendUrl = ResolveUrl("~/Month/Backend"), Width = "100%", ... }) ### Java Example (JSP)
Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Deleting - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Event Deleting ============== Event deleting can be implemented using one of the following ways (or their combination): * built-in delete icon * [context menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * custom [active area](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas")  icon JavaScript Scheduler -------------------- ### 1\. Built-In Delete Icon ![javascript scheduler event delete icon](https://cdn.doc.daypilot.org/page/image/k6ytk66mzzbr3ic5fedlas3juq/javascript-scheduler-event-delete-icon.png "javascript scheduler event delete icon") The [JavaScript Scheduler](https://javascript.daypilot.org/scheduler/)  component includes a built-in delete icon. * The delete icon is not enabled by default. To enable it, use `eventDeleteHandling: "Update"`. See also the [eventDeleteHandling](https://api.daypilot.org/daypilot-scheduler-eventdeletehandling/)  property in the API documentation. * Clicking the icon will fire the [onEventDelete](https://api.daypilot.org/daypilot-scheduler-oneventdelete/)  event. In this event handler, you can cancel the default action by calling `args.preventDefault()`. * After the default action, the Scheduler will fire the [onEventDeleted](https://api.daypilot.org/daypilot-scheduler-oneventdeleted/)  event handler.
### 2\. Context Menu ![javascript scheduler event delete context menu](https://cdn.doc.daypilot.org/page/image/rhmg53io2nguhbxhcvckwzcvma/javascript-scheduler-event-delete-context-menu.png "javascript scheduler event delete context menu") The following example defines a context menu with a "Delete" item that removes the event from the Scheduler using the [events.remove()](https://api.daypilot.org/daypilot-scheduler-events-remove/)  method.
### 3\. Active Area This example will add an active area that will delete the event on click/tap. * The icon will be permanently visible on touch devices. On other devices, it will be visible on hover. (`visibility: "TouchVisible"`) * It uses the CSS from the default theme (`scheduler_default`) to display the delete icon. (`cssClass: "scheduler_default_event_delete"`) * Adding `action: "None"` ensures that the click/tap event will not bubble to the event box.
ASP.NET WebForms ---------------- ### 1\. Built-In Delete Icon Enable event deleting: Handle EventDelete event: protected void DayPilotScheduler1_EventDelete(object sender, EventDeleteEventArgs e) { DeleteEvent(e.Id); setDataSourceAndBind(); DayPilotScheduler1.UpdateWithMessage("Event deleted."); } ### 2\. Context Menu Create a context menu: Link it to the Scheduler: The items with Action = "CallBack" will fire EventMenuClick event on the server side: protected void DayPilotScheduler1_EventMenuClick(object sender, DayPilot.Web.Ui.Events.EventMenuClickEventArgs e) { // delete the event in the database setDataSourceAndBind(); DayPilotScheduler1.Update(); } ### 3\. Active Area You can also use active areas. protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.eventDeleteCallBack(e);")); } These sample classes (event\_action\_delete and event\_action\_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it. Clicking this active area will fire **EventDelete** handler on the server side using a callback. You can make the icon permanently visible by adding .Visible() call protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.eventDeleteCallBack(e);").Visible()); } ASP.NET MVC ----------- ### 1\. Built-In Delete Icon Enable event deleting using EventDeleteHandling property: @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { ... EventDeleteHandling = EventDeleteHandlingType.CallBack, }) Clicking the icon will fire EventDelete handler on the server side: protected override void OnEventDelete(EventDeleteArgs e) { new EventManager(Controller).EventDelete(e.Id); UpdateWithMessage("Event deleted."); } ### 2\. Context Menu You need to define the menu (from Demo/Views/Scheduler/ContextMenu.aspx): @Html.DayPilotMenu("menu", new DayPilotMenuConfig {   CssClassPrefix = "menu_default",   Items = new DayPilot.Web.Mvc.MenuItemCollection   {     new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "editEvent(e.value());"},     new DayPilot.Web.Mvc.MenuItem { Text = "Delete", Action = MenuItemAction.CallBack, Command = "Delete"}   } }) Link it to the Scheduler: @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { ... ContextMenu = "menu", The items with Action = MenuItemAction.CallBack will fire OnEventMenuClick on the server side: protected override void OnEventMenuClick(EventMenuClickArgs e) {   switch (e.Command)   {     case "Delete":       new EventManager(Controller).EventDelete(e.Id);       Update();       break;   } } ### 3\. Active Area You can also use active areas. Add the active area to the event using OnBeforeEventRender. protected override void OnBeforeEventRender(BeforeEventRenderArgs e) { e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.eventDeleteCallBack(e);")); } These sample classes (event\_action\_delete and event\_action\_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it. Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Creation - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Continuous Events](https://doc.daypilot.org/month/continuous-events/ "Continuous Events") * [Event Active Areas](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/month/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/month/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/month/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/month/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/month/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/month/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/month/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/month/event-deleting/ "Event Deleting") * [Event Drag Handles](https://doc.daypilot.org/month/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/month/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/month/event-filtering/ "Event Filtering") * [Event Height](https://doc.daypilot.org/month/event-height/ "Event Height") * [Event Loading](https://doc.daypilot.org/month/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/month/event-moving/ "Event Moving") * [Event Position](https://doc.daypilot.org/month/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/month/event-resizing/ "Event Resizing") * [Event Selecting](https://doc.daypilot.org/month/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/month/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/month/event-spacing/ "Event Spacing") * [Event ToolTip](https://doc.daypilot.org/month/event-tooltip/ "Event ToolTip") * [Recurring Events](https://doc.daypilot.org/month/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/month/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Event Creation ============== New events can be created by selecting time cells using drag and drop. This will fire the **onTimeRangeSelected** event. JavaScript ---------- ### Simple Prompt // event creation dp.onTimeRangeSelected = function (args) { var name = prompt("New event name:", "Event"); if (!name) return; var e = new DayPilot.Event({ start: args.start, end: args.end, id: DayPilot.guid(), text: name }); dp.events.add(e); dp.clearSelection(); dp.message("Created"); }; See also: * [DayPilot.Month.onTimeRangeSelect](http://api.daypilot.org/daypilot-month-ontimerangeselect/) * [DayPilot.Month.onTimeRangeSelected](http://api.daypilot.org/daypilot-month-ontimerangeselected/) ASP.NET. MVC ------------ ### Modal Dialog @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { BackendUrl = ResolveUrl("~/Month/Backend"), ... TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript, TimeRangeSelectedJavaScript = "timeRangeSelected(start, end)" }) The timeRangeSelected() function will open a modal dialog using [DayPilot.Modal](http://code.daypilot.org/81367/daypilot-modal) . After creating the new event in the database (in New which is a standalone page/view) the .closed event handler is called and the events in Scheduler are refreshed using [.commandCallBack()](https://doc.daypilot.org/month/commandcallback/ "CommandCallBack()") . protected override void OnCommand(CommandArgs e) { switch (e.Command) { case "refresh": UpdateWithMessage("Refreshed"); break; } } protected override void OnFinish() { // only load the data if an update was requested by an Update() call if (UpdateType == CallBackUpdateType.None) { return; } Events = new EventManager(Controller).FilteredData(VisibleStart, VisibleEnd).AsEnumerable(); // your data-loading method DataStartField = "start"; DataEndField = "end"; DataTextField = "text"; DataIdField = "id"; } ASP.NET WebForms ---------------- ### Modal Dialog The timeRangeSelected() function will open a modal dialog using [DayPilot.Modal](http://code.daypilot.org/81367/daypilot-modal) . After creating the new event in the database (in New.aspx which is a standalone page) the .closed event handler is called and the events in Scheduler are refreshed using [.commandCallBack()](https://doc.daypilot.org/month/commandcallback/ "CommandCallBack()") . protected void DayPilotMonth1\_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e) { switch (e.Command) { case "refresh": DayPilotMonth1.DataSource = loadData(); // your method DayPilotMonth1.DataBind(); DayPilotMonth1.Update(); break; } } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Day Header - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Day Header Click](https://doc.daypilot.org/month/day-header-click/ "Day Header Click") * [Day Header Customization](https://doc.daypilot.org/month/day-header-customization/ "Day Header Customization") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Day Header ========== * [Day Header Click](http://doc.daypilot.org/month/day-header-click/ "Day Header Click") * [Day Header Customization](http://doc.daypilot.org/month/day-header-customization/ "Day Header Customization") ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Creation - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Event Creation ============== New events can be created by selecting time cells by dragging (or clicking a single cell). This will fire the **onTimeRangeSelected** event. JavaScript Scheduler -------------------- ### Simple Prompt // event creating dp.onTimeRangeSelected = function (args) { var name = prompt("New event name:", "Event"); dp.clearSelection(); if (!name) return; var e = new DayPilot.Event({ start: args.start, end: args.end, id: DayPilot.guid(), resource: args.resource, text: name }); dp.events.add(e); dp.message("Created"); }; See also: * [DayPilot.Scheduler.onTimeRangeSelect](http://api.daypilot.org/daypilot-scheduler-ontimerangeselect/) * [DayPilot.Scheduler.onTimeRangeSelected](http://api.daypilot.org/daypilot-scheduler-ontimerangeselected/) ### Tutorial * [HTML5 Scheduler and Modal Dialog (jQuery)](https://code.daypilot.org/72248/html5-scheduler-and-modal-dialog-jquery) Angular Scheduler ----------------- ### Tutorial * [Angular Scheduler: Modal Dialog for Event Creation and Editing](https://code.daypilot.org/29513/angular-2-scheduler-modal-dialog-for-event-editing) ASP.NET WebForms ---------------- ### Modal Dialog using DayPilot.Modal The timeRangeSelected() function will open a modal dialog using [DayPilot.Modal](http://code.daypilot.org/81367/daypilot-modal) . After creating the new event in the database (in New.aspx which is a standalone page) the .closed event handler is called and the events in Scheduler are refreshed using [.commandCallBack()](https://doc.daypilot.org/scheduler/commandcallback/ "CommandCallBack()") . protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e) { switch (e.Command) { case "refresh": DayPilotScheduler1.DataSource = loadData(); // your method DayPilotScheduler1.DataBind(); DayPilotScheduler1.Update(); break; } } ### Modal Dialog using ModalPopupExtender See the [Scheduler and ModalPopupExtender tutorial](http://code.daypilot.org/75958/scheduler-and-modalpopupextender-asp-net-c-vb-net)  for more details on how to use the scheduler with ModalPopupExtender from Ajax Control Toolkit. ASP.NET MVC ----------- ### Modal Dialog @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript, TimeRangeSelectedJavaScript = "timeRangeSelected(start, end, resource)" }) The timeRangeSelected() function will open a modal dialog using [DayPilot.Modal](http://code.daypilot.org/81367/daypilot-modal) . After creating the new event in the database (in New which is a standalone page/view) the .closed event handler is called and the events in Scheduler are refreshed using [.commandCallBack()](https://doc.daypilot.org/scheduler/commandcallback/ "CommandCallBack()") . protected override void OnCommand(CommandArgs e) { switch (e.Command) { case "refresh": UpdateWithMessage("Refreshed"); break; } } protected override void OnFinish() { // only load the data if an update was requested by an Update() call if (UpdateType == CallBackUpdateType.None) { return; } Events = new EventManager(Controller).FilteredData(StartDate, EndDate).AsEnumerable(); // your data-loading method DataStartField = "start"; DataEndField = "end"; DataTextField = "text"; DataIdField = "id"; DataResourceField = "resource"; } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Deleting - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Continuous Events](https://doc.daypilot.org/month/continuous-events/ "Continuous Events") * [Event Active Areas](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/month/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/month/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/month/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/month/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/month/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/month/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/month/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/month/event-deleting/ "Event Deleting") * [Event Drag Handles](https://doc.daypilot.org/month/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/month/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/month/event-filtering/ "Event Filtering") * [Event Height](https://doc.daypilot.org/month/event-height/ "Event Height") * [Event Loading](https://doc.daypilot.org/month/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/month/event-moving/ "Event Moving") * [Event Position](https://doc.daypilot.org/month/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/month/event-resizing/ "Event Resizing") * [Event Selecting](https://doc.daypilot.org/month/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/month/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/month/event-spacing/ "Event Spacing") * [Event ToolTip](https://doc.daypilot.org/month/event-tooltip/ "Event ToolTip") * [Recurring Events](https://doc.daypilot.org/month/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/month/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Event Deleting ============== You can let the users delete the event using a built-in delete icon, using a [context menu](https://doc.daypilot.org/month/event-context-menu/ "Event Context Menu")  or using an [active area](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas")  icon. JavaScript ---------- ### Built-In Delete Icon The monthly calendar component includes a built-in support for a "delete" icon that displays on hover. The "delete" icon is disabled by default. You can enable it using _eventDeleteHandling_ property. The calendar will fire [onEventDelete](https://api.daypilot.org/daypilot-month-oneventdelete/)  and [onEventDeleted](https://api.daypilot.org/daypilot-month-oneventdeleted/)  events on click.
Demo: * [Monthly calendar event deleting demo](https://javascript.daypilot.org/demo/month/eventdeleting.html) ### Context Menu You can add a context menu to the monthly calendar events that will let users delete the event using a special menu item:
### Custom Delete Icon (Active Area) You can use [event active areas](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas")  to insert a custom icon at a custom location inside events. Active areas are only available in the Pro version.
ASP.NET WebForms ---------------- In the legacy CssOnly=false mode an integrated delete \[x\] icons is also available. ### Context Menu Create a context menu: Link it to the Scheduler: The items with Action = "CallBack" will fire EventMenuClick event on the server side: protected void DayPilotMonth1\_EventMenuClick(object sender, EventMenuClickEventArgs e) { // delete the event in the database setDataSourceAndBind(); DayPilotMonth1.Update(); } ### Active Area You can also use active areas. protected void DayPilotMonth1\_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event\_action\_delete").JavaScript("dpm.commandCallBack('delete', {id:e.value() });")); } These sample classes (event\_action\_delete and event\_action\_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it. ASP.NET MVC ----------- You can let the users delete the event using a **context menu** or using an **active area** icon. In the legacy CssOnly=false mode an integrated delete \[x\] icons is available. ### Context Menu You need to define the menu: @Html.DayPilotMenu("menu", new DayPilotMenuConfig {   Items = new DayPilot.Web.Mvc.MenuItemCollection   {     new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "editEvent(e.value());"},     new DayPilot.Web.Mvc.MenuItem { Text = "Delete", Action = MenuItemAction.CallBack, Command = "Delete"}   } }) Link it to the Calendar: @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { ... ContextMenu = "menu", The items with Action = MenuItemAction.CallBack will fire OnEventMenuClick on the server side: protected override void OnEventMenuClick(EventMenuClickArgs e) {   switch (e.Command)   {     case "Delete":       new EventManager(Controller).EventDelete(e.Id);       Update();       break;   } } ### Active Area You can also use active areas. Add the active area to the event using OnBeforeEventRender. protected override void OnBeforeEventRender(BeforeEventRenderArgs e) { e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event\_action\_delete").JavaScript("dpm.commandCallBack('delete', {id:e.id() });")); } protected override void OnCommand(CommandArgs e) { switch (e.Command) { case "delete": string id = (string) e.Data\["id"\]; new EventManager(Controller).EventDelete(id); Update(CallBackUpdateType.EventsOnly); break; } } These sample classes (event\_action\_delete and event\_action\_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it. Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Editing - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Continuous Events](https://doc.daypilot.org/month/continuous-events/ "Continuous Events") * [Event Active Areas](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/month/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/month/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/month/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/month/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/month/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/month/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/month/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/month/event-deleting/ "Event Deleting") * [Event Drag Handles](https://doc.daypilot.org/month/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/month/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/month/event-filtering/ "Event Filtering") * [Event Height](https://doc.daypilot.org/month/event-height/ "Event Height") * [Event Loading](https://doc.daypilot.org/month/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/month/event-moving/ "Event Moving") * [Event Position](https://doc.daypilot.org/month/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/month/event-resizing/ "Event Resizing") * [Event Selecting](https://doc.daypilot.org/month/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/month/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/month/event-spacing/ "Event Spacing") * [Event ToolTip](https://doc.daypilot.org/month/event-tooltip/ "Event ToolTip") * [Recurring Events](https://doc.daypilot.org/month/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/month/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Event Editing ============= Options: * Using a modal dialog (see below) **Note:** The Monthly Calendar doesn't support inline event editing. The modal dialog can be displayed in various ways: * [event click](https://doc.daypilot.org/month/event-click/ "Event Click") * double click * [event context menu](https://doc.daypilot.org/month/event-context-menu/ "Event Context Menu") * [event active area](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas") You can replace the built-in modal dialog with a custom solution. JavaScript ---------- ### Simple Prompt
ASP.NET WebForms ---------------- ### Modal Dialog The editEvent() function will open a modal dialog using [DayPilot.Modal](http://code.daypilot.org/81367/daypilot-modal) . After updating the event in the database (in Edit.aspx which is a standalone page) the .closed event handler is called and events in the Calendar are refreshed using [.commandCallBack()](https://doc.daypilot.org/month/commandcallback/ "CommandCallBack()") . protected void DayPilotMonth1\_Command(object sender, CommandEventArgs e) { switch (e.Command) { case "refresh": DayPilotMonth1.DataSource = loadData(); // your method DayPilotMonth1.DataBind(); DayPilotMonth1.Update(); break; } } ASP.NET MVC ----------- ### Modal Dialog Set EventClickHandling to JavaScript and open the dialog using EventClickJavaScript: @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { BackendUrl = ResolveUrl("~/Month/Backend"), ... EventClickHandling = EventClickHandlingType.JavaScript, EventClickJavaScript = "editEvent(e.id())" }) The editEvent() uses [DayPilot.Modal](http://code.daypilot.org/81367/daypilot-modal)  to open a special page: After updating the event in the database (in Edit.aspx which is a standalone page) the .closed event handler is called and events in the Calendar are refreshed using [.commandCallBack()](https://doc.daypilot.org/month/commandcallback/ "CommandCallBack()") . protected override void OnCommand(CommandArgs e) { switch (e.Command) { case "refresh": UpdateWithMessage("Refreshed"); break; } } protected override void OnFinish() { // only load the data if an update was requested by an Update() call if (UpdateType == CallBackUpdateType.None) { return; } Events = new EventManager(Controller).FilteredData(VisibleStart, VisibleEnd).AsEnumerable(); // your data-loading method DataStartField = "start"; DataEndField = "end"; DataTextField = "text"; DataIdField = "id"; } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Duration Bar - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [All-Day Events](https://doc.daypilot.org/calendar/all-day-events/ "All-Day Events") * [Duration Bar](https://doc.daypilot.org/calendar/duration-bar/ "Duration Bar") * [Event Active Areas](https://doc.daypilot.org/calendar/event-active-areas/ "Event Active Areas") * [Event Arrangement Mode](https://doc.daypilot.org/calendar/event-arrangement-mode/ "Event Arrangement Mode") * [Event Bubble](https://doc.daypilot.org/calendar/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/calendar/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/calendar/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/calendar/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/calendar/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/calendar/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/calendar/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/calendar/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/calendar/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/calendar/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/calendar/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/calendar/event-filtering/ "Event Filtering") * [Event Loading](https://doc.daypilot.org/calendar/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/calendar/event-moving/ "Event Moving") * [Event Overlaps](https://doc.daypilot.org/calendar/event-overlaps/ "Event Overlaps") * [Event Resizing](https://doc.daypilot.org/calendar/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/calendar/event-resizing-customization/ "Event Resizing Customization") * [Event Selecting](https://doc.daypilot.org/calendar/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/calendar/event-sorting/ "Event Sorting") * [Event ToolTip](https://doc.daypilot.org/calendar/event-tooltip/ "Event ToolTip") * [Exact Event Duration](https://doc.daypilot.org/calendar/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/calendar/external-drag-and-drop/ "External Drag and Drop") * [Inline Event Editing](https://doc.daypilot.org/calendar/inline-event-editing/ "Inline Event Editing") * [Recurring Events](https://doc.daypilot.org/calendar/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/calendar/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Duration Bar ============ ![html5 javascript event calendar duration bar](https://cdn.doc.daypilot.org/page/image/wdghljfxyfac5l6hunrik3uhjq/html5-javascript-event-calendar-duration-bar.png "html5 javascript event calendar duration bar") By default, the [JavaScript Calendar](https://javascript.daypilot.org/calendar/) component displays events with a color bar on the left side, serving two main purposes: 1. **It displays the actual event start and end times when event boxes are enabled.** With the default [useEventBoxes](https://doc.daypilot.org/calendar/exact-event-duration/ "Exact Event Duration") setting set to "Always", event boxes align with the calendar grid cells. For instance, with a [cellDuration](https://doc.daypilot.org/calendar/time-cell-duration/ "Time Cell Duration") value of 30, an event lasting 1 minute will fill the entire 30-minute cell. By default, the duration bar is enabled (controlled by the [durationBarVisible](http://api.daypilot.org/daypilot-calendar-durationbarvisible/) property). This bar shows the real event duration at the left side of the event box. 2. **It allows the customization of the duration bar color.** Use custom colors to highlight specific events or to display different event types or statuses. See also [event customization](https://doc.daypilot.org/calendar/event-customization/ "Event Customization") . ### Appearance The duration bar appearance is defined in the [CSS theme](https://doc.daypilot.org/calendar/css-themes/ "CSS Themes") . Example: /* outer duration bar box, uses full height, light blue */ .calendar_default_event_bar { top: 0px; bottom: 0px; left: 0px; width: 4px; background-color: #9dc8e8; } /* inner duration bar box, displays the duration, dark blue */ .calendar_default_event_bar_inner { position: absolute; width: 4px; background-color: #1066a8; } JavaScript ---------- Example - disabling the duration bar:
ASP.NET WebForms ---------------- DurationBarVisible="true" ### Disabling the duration bar ### Custom width (!CssOnly) ![duration bar width](https://cdn.doc.daypilot.org/page/image/dqkfxaxhlze37arwsgiaglsvny/duration-bar-width.png "duration bar width") This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ### Custom color (!CssOnly) This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ### Custom image (!CssOnly) ![tentative](https://cdn.doc.daypilot.org/page/image/7kr6l5b3sfh3vjiycrzwcymuua/tentative.png "tentative") This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ### Custom color - per event (!CssOnly) protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { if (e.Tag[0] == "2")   {    e.DurationBarColor = "red";   } } This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ### Custom image - per event (!CssOnly) ![tentative](https://cdn.doc.daypilot.org/page/image/xhd2vwbc6bgy7poeqau4ikduye/tentative.png "tentative") protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { if (e.Tag["status"] == "tentative")   {    e.DurationBarImageUrl = "tentative.png";   } } This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ASP.NET MVC ----------- ### Hiding the Duration Bar You can hide it using DurationBarVisible property: @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { // ... DurationBarVisible = false, // ... }) You can set individual duration bar colors to events using OnBeforeEventRender. ### Duration Bar Color (!CssOnly) You can set the duration bar color using **DurationBarColor** property: @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { // ... DurationBarColor = "red", // ... }) This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ### Duration Bar Image (!CssOnly) You can set the duration bar image using **DurationBarImageUrl** property: @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { // ... DurationBarImageUrl = ResolveUrl("~/Media/linked/tentative5x8.gif"), // ... }) This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . ### Duration Bar Width (!CssOnly) You can set the duration bar image using **DurationBarWidth** property: @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { // ... DurationBarWidth = 10, // ... }) This property is ignored in the [CssOnly mode](https://doc.daypilot.org/calendar/cssonly-mode/ "CssOnly Mode") . Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Editing - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Event Editing ============= Options: * [Inline editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * Using a modal dialog (see below) You can also open the modal dialog from the [event context menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") . JavaScript ---------- ### Modal Dialog See also the following tutorials on using the DayPilot modal dialog with the Scheduler to edit events: * [HTML5 Scheduler and Modal Dialog (jQuery, PHP)](https://code.daypilot.org/72248/html5-scheduler-and-modal-dialog-jquery) * [JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog](https://code.daypilot.org/60913/javascript-scheduler-edit-multiple-fields-modal-dialog) Quick example:
### Simple Prompt
Angular ------- ### Tutorial * [Angular Scheduler: Modal Dialog for Event Editing](https://code.daypilot.org/29513/angular-2-scheduler-modal-dialog-for-event-editing) ASP.NET WebForms ---------------- ### Modal Dialog using DayPilot.Modal The editEvent() function will open a modal dialog using [DayPilot.Modal](https://code.daypilot.org/81367/daypilot-modal) . After updating the event in the database (in Edit.aspx which is a standalone page) the .closed event handler is called and the events in Scheduler are refreshed using [.commandCallBack()](https://doc.daypilot.org/scheduler/commandcallback/ "CommandCallBack()") . protected void DayPilotScheduler1\_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e) { switch (e.Command) { case "refresh": DayPilotScheduler1.DataSource = loadData(); // your method DayPilotScheduler1.DataBind(); DayPilotScheduler1.Update(); break; } } ### Modal Dialog using ModalPopupExtender See the [Scheduler and ModalPopupExtender tutorial](https://code.daypilot.org/75958/scheduler-and-modalpopupextender-asp-net-c-vb-net)  for more details on how to use the scheduler with ModalPopupExtender from Ajax Control Toolkit. ASP.NET MVC ----------- ### Modal Dialog Set EventClickHandling to JavaScript and open the dialog using EventClickJavaScript: @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... EventClickHandling = EventClickHandlingType.JavaScript, EventClickJavaScript = "editEvent(e.id())" }) The editEvent() uses [DayPilot.Modal](https://code.daypilot.org/81367/daypilot-modal)  to open a special page: After updating the event in the database (in Edit.aspx which is a standalone page) the .closed event handler is called and the events in Scheduler are refreshed using [.commandCallBack()](https://doc.daypilot.org/scheduler/commandcallback/ "CommandCallBack()") . protected override void OnCommand(CommandArgs e) { switch (e.Command) { case "refresh": UpdateWithMessage("Refreshed"); break; } } protected override void OnFinish() { // only load the data if an update was requested by an Update() call if (UpdateType == CallBackUpdateType.None) { return; } Events = new EventManager(Controller).FilteredData(StartDate, EndDate).AsEnumerable(); // your data-loading method DataStartField = "start"; DataEndField = "end"; DataTextField = "text"; DataIdField = "id"; DataResourceField = "resource"; } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Inline Event Editing - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Inline Event Editing ==================== ![Inline Editing of JavaScript Scheduler Events](https://cdn.doc.daypilot.org/page/image/3dpv4k52rbghbi3tsjeyhta6xm/Inline+Editing+of+JavaScript+Scheduler+Events.png "Inline Editing of JavaScript Scheduler Events") The [JavaScript Scheduler](https://javascript.daypilot.org/scheduler/) component supports editing events using an input box that is displayed inline, at the event location. You can map the [event click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") event to trigger the inline editing mode or you can activate it programmatically using the [events.edit()](https://api.daypilot.org/daypilot-scheduler-events-edit/) method. JavaScript ---------- To map the click event to inline editing, set the [eventClickHandling](https://api.daypilot.org/daypilot-scheduler-eventclickhandling/) property to `"Edit"`. To save the new text value of the event to the database, use the [onEventEdit](https://api.daypilot.org/daypilot-scheduler-oneventedit/) or [onEventEdited](https://api.daypilot.org/daypilot-scheduler-oneventedited/) event handlers:
The following Scheduler configuration example lets you implement a **"create-and-edit"** feature. When you [select a time range](https://doc.daypilot.org/scheduler/time-range-selecting/ "Time Range Selecting") (e.g., by clicking a cell) it will immediately create a blank event there and activates the inline editing using the [events.edit()](https://api.daypilot.org/daypilot-scheduler-events-edit/) method: { onTimeRangeSelected: (args) => { dp.events.add({ start: args.start, end: args.end, id: DayPilot.guid(), resource: args.resource, text: "", tags: {justCreated: true} }); dp.clearSelection(); dp.events.edit(e); }, onEventEdit: (args) => { if (args.e.tag("justCreated")) { if (args.canceled || args.newText === "") { dp.events.remove(args.e); } args.e.data.tags.justCreated = false; } }, // ... } Note that `args.canceled` is available in `onEventEdit` and `onEventEdited` since version 8.1.1914. See also: * [DayPilot.Scheduler.eventClickHandling](https://api.daypilot.org/daypilot-scheduler-eventclickhandling/) * [DayPilot.Scheduler.onEventEdit](https://api.daypilot.org/daypilot-scheduler-oneventedit/) * [DayPilot.Scheduler.onEventEdited](https://api.daypilot.org/daypilot-scheduler-oneventedited/) Demo: * [Inline Editing of Scheduler Events (Demo)](https://javascript.daypilot.org/demo/scheduler/eventinlineediting.html) ASP.NET WebForms ---------------- Client side Server side protected void DayPilotScheduler1_EventEdit(object sender, DayPilot.Web.Ui.Events.EventEditEventArgs e) { UpdateEventText(e.Id, e.NewTest); // your method DayPilotScheduler1.DataSource = LoadData(); // your method DayPilotScheduler1.DataBind(); DayPilotScheduler1.Update(); } ASP.NET MVC ----------- Client side: @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig { BackendUrl = ResolveUrl("~/Scheduler/Backend"), ... EventClickHandling = EventClickHandlingType.Edit, EventEditHandling = EventEditHandlingType.CallBack }) Server side: protected override void OnEventEdit(EventEditArgs e) { new EventManager(Controller).UpdateText(e.Id, e.NewText); UpdateWithMessage("Event updated."); } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Position - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Continuous Events](https://doc.daypilot.org/month/continuous-events/ "Continuous Events") * [Event Active Areas](https://doc.daypilot.org/month/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/month/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/month/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/month/event-color/ "Event Color") * [Event Context Menu](https://doc.daypilot.org/month/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/month/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/month/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/month/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/month/event-deleting/ "Event Deleting") * [Event Drag Handles](https://doc.daypilot.org/month/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/month/event-editing/ "Event Editing") * [Event Filtering](https://doc.daypilot.org/month/event-filtering/ "Event Filtering") * [Event Height](https://doc.daypilot.org/month/event-height/ "Event Height") * [Event Loading](https://doc.daypilot.org/month/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/month/event-moving/ "Event Moving") * [Event Position](https://doc.daypilot.org/month/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/month/event-resizing/ "Event Resizing") * [Event Selecting](https://doc.daypilot.org/month/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/month/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/month/event-spacing/ "Event Spacing") * [Event ToolTip](https://doc.daypilot.org/month/event-tooltip/ "Event ToolTip") * [Recurring Events](https://doc.daypilot.org/month/recurring-events/ "Recurring Events") * [Update Events without Reloading](https://doc.daypilot.org/month/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") Event Position ============== It is possible to use a special mode where the user can select an exact position inside the target cell when moving the event (relative to other events in the target cell).  You can use this feature to manage priority ordering. ### Moving modes Default moving mode (moving to time cell) ![monthly calendar move to cell](https://cdn.doc.daypilot.org/page/image/q4it72dnhrawnklivdscrlolii/monthly-calendar-move-to-cell.png "monthly calendar move to cell") Moving to a position inside a cell ![monthly calendar move to position](https://cdn.doc.daypilot.org/page/image/33nn3cek2bglhbjymcm4wmgr7m/monthly-calendar-move-to-position.png "monthly calendar move to position") You can enable this mode by using **EventMoveToPosition** property. The selected position will be available in EventMove event handler as e.Position. You should store the position in a separate database field and use it for [event sorting](https://doc.daypilot.org/month/event-sorting/ "Event Sorting") . JavaScript ----------
ASP.NET WebForms ---------------- .aspx .aspx.cs protected void DayPilotMonth1\_EventMove(object sender, EventMoveEventArgs e) { // update the db here, reload events DayPilotMonth1.UpdateWithMessage("Event moved to position: " + e.Position); } ### Demo * [http://www.daypilot.org/demo/Month/EventMoveToPosition.aspx](http://www.daypilot.org/demo/Month/EventMoveToPosition.aspx) ASP.NET MVC ----------- The target position is available in OnEventMove handler as e.Position (starting at index 0). ### Example View @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { BackendUrl = ResolveUrl("~/Month/Backend"), ... EventMoveToPosition = true }) Backend Controller protected override void OnEventMove(EventMoveArgs e) { // update the db here, reload events UpdateWithMessage("Moved to position: " + e.Position); } ### Demo * [http://mvc.daypilot.org/demo/Month/EventMoveToPosition](http://mvc.daypilot.org/demo/Month/EventMoveToPosition) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Time Header - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Overnight Scheduling](https://doc.daypilot.org/calendar/overnight-scheduling/ "Overnight Scheduling") * [Scale](https://doc.daypilot.org/calendar/scale/ "Scale") * [Time Cell Duration](https://doc.daypilot.org/calendar/time-cell-duration/ "Time Cell Duration") * [Time Header Active Areas](https://doc.daypilot.org/calendar/time-header-active-areas/ "Time Header Active Areas") * [Time Header Cell Duration](https://doc.daypilot.org/calendar/time-header-cell-duration/ "Time Header Cell Duration") * [Time Header Column Width](https://doc.daypilot.org/calendar/time-header-column-width/ "Time Header Column Width") * [Time Header Customization](https://doc.daypilot.org/calendar/time-header-customization/ "Time Header Customization") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Time Header =========== ### Time Axis * [Scale](https://doc.daypilot.org/calendar/scale/ "Scale") * [Overnight Scheduling](http://doc.daypilot.org/calendar/overnight-scheduling/ "Overnight Scheduling") * [Time Cell Duration](http://doc.daypilot.org/calendar/time-cell-duration/ "Time Cell Duration") See also [HideFreeCells](https://doc.daypilot.org/calendar/hidefreecells/ "HideFreeCells") . ### Headers * [Time Header Active Areas](http://doc.daypilot.org/calendar/time-header-active-areas/ "Time Header Active Areas") * [Time Header Cell Duration](http://doc.daypilot.org/calendar/time-header-cell-duration/ "Time Header Cell Duration") * [Time Header Column Width](https://doc.daypilot.org/calendar/time-header-column-width/ "Time Header Column Width") * [Time Header Customization](http://doc.daypilot.org/calendar/time-header-customization/ "Time Header Customization") Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Columns - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Column Filtering](https://doc.daypilot.org/calendar/column-filtering/ "Column Filtering") * [Column Header Active Areas](https://doc.daypilot.org/calendar/column-header-active-areas/ "Column Header Active Areas") * [Column Header Bubble](https://doc.daypilot.org/calendar/column-header-bubble/ "Column Header Bubble") * [Column Header Click](https://doc.daypilot.org/calendar/column-header-click/ "Column Header Click") * [Column Header Customization](https://doc.daypilot.org/calendar/column-header-customization/ "Column Header Customization") * [Column Header Height](https://doc.daypilot.org/calendar/column-header-height/ "Column Header Height") * [Column Header Height Auto-Fit](https://doc.daypilot.org/calendar/column-header-height-auto-fit/ "Column Header Height Auto-Fit") * [Column Header Hierarchy](https://doc.daypilot.org/calendar/column-header-hierarchy/ "Column Header Hierarchy") * [Column Margin](https://doc.daypilot.org/calendar/column-margin/ "Column Margin") * [Column Moving](https://doc.daypilot.org/calendar/column-moving/ "Column Moving") * [Column Resizing](https://doc.daypilot.org/calendar/column-resizing/ "Column Resizing") * [Custom Column Widths](https://doc.daypilot.org/calendar/custom-column-widths/ "Custom Column Widths") * [Fixed Column Width](https://doc.daypilot.org/calendar/fixed-column-width/ "Fixed Column Width") * [Responsive Column Width](https://doc.daypilot.org/calendar/responsive-column-width/ "Responsive Column Width") * [Wildcard Column](https://doc.daypilot.org/calendar/wildcard-column/ "Wildcard Column") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Columns ======= * [Column Filtering](https://doc.daypilot.org/calendar/column-filtering/ "Column Filtering") * [Column Header Active Areas](https://doc.daypilot.org/calendar/column-header-active-areas/ "Column Header Active Areas") * [Column Header Bubble](https://doc.daypilot.org/calendar/column-header-bubble/ "Column Header Bubble") * [Column Header Click](https://doc.daypilot.org/calendar/column-header-click/ "Column Header Click") * [Column Header Customization](https://doc.daypilot.org/calendar/column-header-customization/ "Column Header Customization") * [Column Header Height](https://doc.daypilot.org/calendar/column-header-height/ "Column Header Height") * [Column Header Height Auto-Fit](https://doc.daypilot.org/calendar/column-header-height-auto-fit/ "Column Header Height Auto-Fit") * [Column Header Hierarchy](https://doc.daypilot.org/calendar/column-header-hierarchy/ "Column Header Hierarchy") * [Column Margin](https://doc.daypilot.org/calendar/column-margin/ "Column Margin") * [Column Moving using Drag and Drop](https://doc.daypilot.org/calendar/column-moving/ "Column Moving") * [Column Resizing using Drag and Drop](https://doc.daypilot.org/calendar/column-resizing/ "Column Resizing") * [Custom Column Widths](https://doc.daypilot.org/calendar/custom-column-widths/ "Custom Column Widths") * [Fixed Column Width](https://doc.daypilot.org/calendar/fixed-column-width/ "Fixed Column Width") * [Responsive Column Width](https://doc.daypilot.org/calendar/responsive-column-width/ "Responsive Column Width") * [Wildcard Column](https://doc.daypilot.org/calendar/wildcard-column/ "Wildcard Column") See also [view types](https://doc.daypilot.org/calendar/view-types/ "View Types") . ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Recurring Events - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Navigator](https://doc.daypilot.org/navigator/ "Navigator - Date Picker") * [Appearance](https://doc.daypilot.org/navigator/appearance/ "Appearance") * [CSS](https://doc.daypilot.org/navigator/css/ "Date Picker CSS") * [Days](https://doc.daypilot.org/navigator/days/ "Days") * [Events](https://doc.daypilot.org/navigator/events/ "Events") * [Highlighting Busy Days](https://doc.daypilot.org/navigator/highlighting-busy-days/ "Highlighting Busy Days") * [Recurring Events](https://doc.daypilot.org/navigator/recurring-events/ "Recurring Events") * [Frameworks](https://doc.daypilot.org/navigator/frameworks/ "Frameworks") * [Localization](https://doc.daypilot.org/navigator/localization/ "Localization") * [Navigation](https://doc.daypilot.org/navigator/navigation/ "Navigation") Recurring Events ================ ASP.NET WebForms ---------------- Recurring events are supported. Specify the field that stores the recurrence information using **DataRecurrenceField** property during data binding. Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Localization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [First Day of Week](https://doc.daypilot.org/scheduler/first-day-of-week/ "First Day of Week") * [Time Format](https://doc.daypilot.org/scheduler/time-format/ "Time Format") * [Header Date Format](https://doc.daypilot.org/scheduler/header-date-format/ "Header Date Format") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Localization ============ The locale/culture determines first day of week, month names, day of week names, time and date format and other properties. ### Adjusting individual properties Individual aspects of the locale can be adjusted separately using the following properties: * [Time format](https://doc.daypilot.org/scheduler/time-format/ "Time Format")  (12/24 clock for time headers) * [Header date format](https://doc.daypilot.org/scheduler/header-date-format/ "Header Date Format")  (row headers in [timesheet](https://doc.daypilot.org/scheduler/timesheet/ "Timesheet")  mode) * [First day of week](https://doc.daypilot.org/scheduler/first-day-of-week/ "First Day of Week")  (for CellGroupBy = Week) * [Loading label](https://doc.daypilot.org/scheduler/loading-label/ "Loading Label")  text/HTML * [Time header customization](https://doc.daypilot.org/scheduler/time-header-customization/ "Time Header Customization")  (custom time header HTML) JavaScript ---------- You can set the locale using [locale](http://api.daypilot.org/daypilot-scheduler-locale/)  property. This will affect all displayed date/time fields. The following locales are predefined. You can also override the predefined locale or define custom locale using [DayPilot.Locale.register()](https://api.daypilot.org/daypilot-locale-register/)  method. * ca-es * cs-cz * da-dk * de-at * de-ch * de-de * de-lu * en-au * en-ca * en-gb * en-us * es-es * es-mx * eu-es * fi-fi * fr-be * fr-ch * fr-fr * fr-lu * gl-es * it-it * it-ch * ja-jp * nb-no * nl-nl * nl-be * nn-no * pt-br * pl-pl * pt-pt * ru-ru * sk-sk * sv-se * uk-ua * zh-cn * zh-tw Example: dp.locale = "de-de"; dp.update(); See also: * [DayPilot.Locale](http://api.daypilot.org/daypilot-locale-class/) * [DayPilot.Scheduler.locale](http://api.daypilot.org/daypilot-scheduler-locale/) ASP.NET WebForms ---------------- DayPilot will adjust its appearance automatically depending on the Culture set for the current thread. The Culture can be set at one of the following places: 1\. In **web.config**, configuration/system.web/globalization element, culture attribute.                 2\. In **aspx** page header: <%@ Page Culture="en-US" %> 3\. In the code behind:  protected void Page_Load(object sender, EventArgs e)  {     Culture = new CultureInfo("da-DK");  } ASP.NET MVC ----------- DayPilot will adjust its appearance automatically depending on the Culture set for the current thread. The Culture can be set at one of the following places: 1\. In **web.config**, configuration/system.web/globalization element, culture attribute.                 2\. Use **Application\_BeginRequest** in Global.asax.cs protected void Application_BeginRequest(Object sender, EventArgs e) { Thread.CurrentThread.CurrentCulture = new CultureInfo("en-us"); } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Active Areas - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [Active Areas](https://doc.daypilot.org/calendar/active-areas/ "Active Areas") * [Bubble](https://doc.daypilot.org/calendar/bubble/ "Bubble") * [Context Menu](https://doc.daypilot.org/calendar/context-menu/ "Context Menu") * [Loading Label](https://doc.daypilot.org/calendar/loading-label/ "Loading Label") * [Message Bar](https://doc.daypilot.org/calendar/message-bar/ "Message Bar") * [Scroll Labels](https://doc.daypilot.org/calendar/scroll-labels/ "Scroll Labels") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Active Areas ============ ![event calendar html5 active areas](https://cdn.doc.daypilot.org/page/image/tfuu6iz3pzhdzds7ubtdotnsii/event-calendar-html5-active-areas.png "event calendar html5 active areas") Active areas can be used to extend the event functionality and to add visual hints to events and other elements. * You can define the dimension and position relative to the box. * Customize the active areas using custom HTML and styles. ### Supported elements * [event active areas](https://doc.daypilot.org/calendar/event-active-areas/ "Event Active Areas") * [time header active areas](https://doc.daypilot.org/calendar/time-header-active-areas/ "Time Header Active Areas") * [column header active areas](https://doc.daypilot.org/calendar/column-header-active-areas/ "Column Header Active Areas") ### Actions * open a [context menu](https://doc.daypilot.org/calendar/context-menu/ "Context Menu") * display a [bubble](https://doc.daypilot.org/calendar/bubble/ "Bubble")  (through custom JavaScript) * [delete an event](https://doc.daypilot.org/calendar/event-deleting/ "Event Deleting")  (through custom JavaScript) * move handler (events only) * resize handler (events only) * run custom JavaScript Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Position - Bubble | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Bubble](https://doc.daypilot.org/bubble/ "Bubble") * [Activation](https://doc.daypilot.org/bubble/activation/ "Activation") * [Animation](https://doc.daypilot.org/bubble/animation/ "Animation") * [CSS](https://doc.daypilot.org/bubble/css/ "CSS") * [Hide Timeout](https://doc.daypilot.org/bubble/hide-timeout/ "Hide Timeout") * [Loading Label](https://doc.daypilot.org/bubble/loading-label/ "Loading Label") * [Position](https://doc.daypilot.org/bubble/position/ "Position") * [Source Objects](https://doc.daypilot.org/bubble/source-objects/ "Source Objects") * [Width](https://doc.daypilot.org/bubble/width/ "Width") Position ======== ### Events For **event** targets the bubble can be displayed at one of the following positions (_position_ property): * _"Above"_ - above the source element, aligned to the upper-left corner; if there is not enough room above the element, it will be displayed below * _"Mouse"_ - at the current mouse position. ### Other elements All other elements will use the _"Mouse"_ position.  JavaScript Example ------------------ This example specifies a custom Bubble object that will be used for Scheduler event bubbles (see also the [DayPilot.Scheduler.bubble](https://api.daypilot.org/daypilot-scheduler-bubble/)  property). The DayPilot.Bubble object uses a custom [position](https://api.daypilot.org/daypilot-bubble-position/)  property value: const scheduler = new DayPilot.Scheduler({   bubble: new DayPilot.Bubble({     position: "Mouse"     // ..   }),   // .. }); scheduler.init(); Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Event Customization - Scheduler | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Scheduler](https://doc.daypilot.org/scheduler/ "Scheduler Component") * [Appearance](https://doc.daypilot.org/scheduler/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/scheduler/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/scheduler/controls/ "Controls") * [CSS](https://doc.daypilot.org/scheduler/css/ "CSS") * [Events](https://doc.daypilot.org/scheduler/events/ "Events") * [Concurrent Event Groups](https://doc.daypilot.org/scheduler/concurrent-event-groups/ "Concurrent Event Groups") * [Continuous Events](https://doc.daypilot.org/scheduler/continuous-events/ "Continuous Events") * [Drag and Drop between Two Schedulers](https://doc.daypilot.org/scheduler/drag-and-drop-between-two-schedulers/ "Drag and Drop between Two Schedulers") * [Duration Bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") * [Dynamic Event Loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/ "Dynamic Event Loading") * [Event Active Areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * [Event Bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") * [Event Click](https://doc.daypilot.org/scheduler/event-click/ "Event Click") * [Event Color](https://doc.daypilot.org/scheduler/event-color/ "Event Color") * [Event Containers](https://doc.daypilot.org/scheduler/event-containers/ "Event Containers") * [Event Context Menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * [Event Copying](https://doc.daypilot.org/scheduler/event-copying/ "Event Copying") * [Event Creation](https://doc.daypilot.org/scheduler/event-creation/ "Event Creation") * [Event Customization](https://doc.daypilot.org/scheduler/event-customization/ "Event Customization") * [Event Deleting](https://doc.daypilot.org/scheduler/event-deleting/ "Event Deleting") * [Event Double Click](https://doc.daypilot.org/scheduler/event-double-click/ "Event Double Click") * [Event Drag Handles](https://doc.daypilot.org/scheduler/event-drag-handles/ "Event Drag Handles") * [Event Editing](https://doc.daypilot.org/scheduler/event-editing/ "Event Editing") * [Event End Date/Time](https://doc.daypilot.org/scheduler/event-end-date-time/ "Event End Date/Time") * [Event Filtering](https://doc.daypilot.org/scheduler/event-filtering/ "Event Filtering") * [Event Icons](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") * [Event Loading](https://doc.daypilot.org/scheduler/event-loading/ "Event Loading") * [Event Moving](https://doc.daypilot.org/scheduler/event-moving/ "Event Moving") * [Event Moving Customization](https://doc.daypilot.org/scheduler/event-moving-customization/ "Event Moving Customization") * [Event Moving Indicators](https://doc.daypilot.org/scheduler/event-moving-indicators/ "Event Moving Indicators") * [Event Moving Validation](https://doc.daypilot.org/scheduler/event-moving-validation/ "Event Moving Validation") * [Event Multi-Moving](https://doc.daypilot.org/scheduler/event-multi-moving/ "Event Multi-Moving") * [Event Multi-Resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/ "Event Multi-Resizing") * [Event Multi-Selecting](https://doc.daypilot.org/scheduler/event-multi-selecting/ "Event Multi-Selecting") * [Event Overlaps](https://doc.daypilot.org/scheduler/event-overlaps/ "Event Overlaps") * [Event Phases](https://doc.daypilot.org/scheduler/event-phases/ "Event Phases") * [Event Position](https://doc.daypilot.org/scheduler/event-position/ "Event Position") * [Event Resizing](https://doc.daypilot.org/scheduler/event-resizing/ "Event Resizing") * [Event Resizing Customization](https://doc.daypilot.org/scheduler/event-resizing-customization/ "Event Resizing Customization") * [Event Resizing Validation](https://doc.daypilot.org/scheduler/event-resizing-validation/ "Event Resizing Validation") * [Event Selecting](https://doc.daypilot.org/scheduler/event-selecting/ "Event Selecting") * [Event Sorting](https://doc.daypilot.org/scheduler/event-sorting/ "Event Sorting") * [Event Spacing](https://doc.daypilot.org/scheduler/event-spacing/ "Event Spacing") * [Event Stacking Line Height](https://doc.daypilot.org/scheduler/event-stacking-line-height/ "Event Stacking Line Height") * [Event ToolTip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * [Event Types](https://doc.daypilot.org/scheduler/event-types/ "Event Types") * [Event Versions](https://doc.daypilot.org/scheduler/event-versions/ "Event Versions") * [Exact Event Duration](https://doc.daypilot.org/scheduler/exact-event-duration/ "Exact Event Duration") * [External Drag and Drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/ "External Drag and Drop") * [Floating Events](https://doc.daypilot.org/scheduler/floating-events/ "Floating Events") * [Inline Event Editing](https://doc.daypilot.org/scheduler/inline-event-editing/ "Inline Event Editing") * [Joint Events](https://doc.daypilot.org/scheduler/joint-events/ "Joint Events") * [Limit Event Moving](https://doc.daypilot.org/scheduler/limit-event-moving/ "Limit Event Moving") * [Percent Complete](https://doc.daypilot.org/scheduler/percent-complete/ "Percent Complete") * [Progressive Event Rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/ "Progressive Event Rendering") * [Recurring Events](https://doc.daypilot.org/scheduler/recurring-events/ "Recurring Events") * [Skipping Non-Business Hours](https://doc.daypilot.org/scheduler/skipping-non-business-hours/ "Skipping Non-Business Hours") * [Update Events without Reloading](https://doc.daypilot.org/scheduler/update-events-without-reloading/ "Update Events without Reloading") * [Export](https://doc.daypilot.org/scheduler/export/ "Export") * [Frameworks](https://doc.daypilot.org/scheduler/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/scheduler/grid/ "Grid") * [Keyboard](https://doc.daypilot.org/scheduler/keyboard/ "Keyboard") * [Links](https://doc.daypilot.org/scheduler/links/ "Dependency Links in the Scheduler Component") * [Localization](https://doc.daypilot.org/scheduler/localization/ "Localization") * [Milestones](https://doc.daypilot.org/scheduler/milestones/ "Milestones") * [Navigation](https://doc.daypilot.org/scheduler/navigation/ "Navigation") * [Performance](https://doc.daypilot.org/scheduler/performance/ "Performance") * [Rows](https://doc.daypilot.org/scheduler/rows/ "Rows") * [Server Side Integration](https://doc.daypilot.org/scheduler/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/scheduler/time-header/ "Time Header") * [Time Zones](https://doc.daypilot.org/scheduler/time-zones/ "Time Zones") * [Touch Devices](https://doc.daypilot.org/scheduler/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/scheduler/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") Event Customization =================== The Scheduler events can be customized using the [onBeforeEventRender](https://api.daypilot.org/daypilot-scheduler-onbeforeeventrender/) event handler. This event handler is called once for each event in the data set. You can customize the following properties: * text (HTML-encoded) * raw HTML * CSS class * background color * text color * duration bar visibility * color of the duration bar * icons You can also customize the behavior: * disable drag and drop (resizing, moving in specific direction) * disable click event * event-specific context menu * static bubble content * event-specific bubble object (with different bubble behavior and/or appearance) The **full list of customizable event properties** is listed in the event data object format description in the API docs: * [DayPilot.Event.data properties](https://api.daypilot.org/daypilot-event-data/) Example: Custom CSS Class ------------------------- ![JavaScript Scheduler Event Customization CSS Class](https://cdn.doc.daypilot.org/page/image/ngjy5lwpwralpph5637q25d2qy/JavaScript+Scheduler+Event+Customization+-+CSS+Class.png "JavaScript Scheduler Event Customization CSS Class") The `onBeforeEventRender` event handlers sets a custom CSS class: onBeforeEventRender: args => { args.data.cssClass = "rounded-event"; } This CSS overrides selected styles of the default theme (`scheduler_default`). It sets border radius, adds padding for the event content and hides the duration bar. .rounded-event { border-radius: 20px; } .rounded-event .scheduler_default_event_inner { border-radius: 20px; padding: 15px; background: #f39c12; color: white; border: 1px solid #f39c12; } .rounded-event .scheduler_default_event_bar { display: none; } Example: Custom Event Content (Raw HTML) ---------------------------------------- ![JavaScript Scheduler Event Customization HTML Content](https://cdn.doc.daypilot.org/page/image/wiqt5lh2nrb5zpsjeutibbtlwq/JavaScript+Scheduler+Event+Customization+HTML+Content.png "JavaScript Scheduler Event Customization HTML Content") This example uses the following settings: * It sets a global custom event height. * It configures the end date spec mode to 'date-only’. * It defines custom event content as raw HTML, using the `onBeforeEventRender` event. Please note that if you insert the value from `args.data.text` into the HTML, it must be encoded to [protect your application against XSS attacks](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") . eventHeight: 50, eventEndSpec: "Date", onBeforeEventRender: args => { const text = DayPilot.Util.escapeHtml(args.data.text); const start = new DayPilot.Date(args.data.start).toString("d/M/yyyy"); const end = new DayPilot.Date(args.data.end).toString("d/M/yyyy"); args.data.html = `${text}
${start} - ${end}`; }, Example: Event Types -------------------- ![JavaScript Scheduler Event Customization Types](https://cdn.doc.daypilot.org/page/image/lqbnyvf4gnbb5gprplrwjjfkhy/JavaScript+Scheduler+Event+Customization+Types.png "JavaScript Scheduler Event Customization Types") The appearance of an event can be customized based on its [type](https://doc.daypilot.org/scheduler/event-types/ "Event Types") or other properties. In this example, the event type is stored within the custom `type` property of the `tags` object. The `onBeforeEventRender` event specifies a unique [duration bar](https://doc.daypilot.org/scheduler/duration-bar/ "Duration Bar") color value (`barColor`) for each event type. onBeforeEventRender: args => { switch (args.data.tags.type) { case "important": args.data.barColor = "#e74c3c"; break; case "business": args.data.barColor = "#3498db"; break; case "personal": args.data.barColor = "#2ecc71"; break; case "vacation": args.data.barColor = "#f1c40f"; break; } } Event data: const events = [\ {\ id: 1,\ start: "2023-10-03",\ end: "2023-10-10",\ resource: "R2",\ text: "Event 1",\ tags: {\ type: "important"\ }\ },\ {\ id: 2,\ start: "2023-10-11",\ end: "2023-10-16",\ resource: "R2",\ text: "Event 2",\ tags: {\ type: "vacation"\ }\ },\ {\ id: 3,\ start: "2023-10-05",\ end: "2023-10-09",\ resource: "R4",\ text: "Event 3",\ tags: {\ type: "business"\ }\ },\ ]; dp.update({events}); Example: Event Icons -------------------- ![JavaScript Scheduler Event Customization Icons](https://cdn.doc.daypilot.org/page/image/wjovi7mosvg6dnuem2jh37yvwq/JavaScript+Scheduler+Event+Customization+Icons.png "JavaScript Scheduler Event Customization Icons") In this example, `onBeforeEventRender` is used to change the event bar color to light blue and to add a checkmark SVG [icon](https://doc.daypilot.org/scheduler/event-icons/ "Event Icons") to the event through an active area. [Active areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") can be used to insert special elements (such as text, icons, images) and to define specific behaviors for these elements, including context menus, drag handles, popup details, edit dialogs, and more. onBeforeEventRender: args => { args.data.barColor = "#3498db"; args.data.areas = [\ {\ right: 10,\ top: "calc(50% - 7px)",\ width: 18,\ height: 18,\ symbol: "icons/daypilot.svg#checkmark-2",\ backColor: "#999999",\ fontColor: "#ffffff",\ padding: 2,\ style: "border-radius: 50%"\ }\ ]; } Example: Pop-Up Bubble with Event Details ----------------------------------------- ![JavaScript Scheduler Event Customization Bubble Popup](https://cdn.doc.daypilot.org/page/image/r6fpu2zmlbhldbm5cbmkciggh4/JavaScript+Scheduler+Event+Customization+Bubble+Popup.png "JavaScript Scheduler Event Customization Bubble Popup") This example sets static content for an [event bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble") in the `onBeforeEventRender` event handler. If the `bubbleHtml` property is specified, the bubble will appear above the event when hovered over. onBeforeEventRender: args => { args.data.barColor = "#f1c40f"; const text = DayPilot.Util.escapeHtml(args.data.text); const start = new DayPilot.Date(args.data.start).toString("d/M/yyyy h:mm tt"); const end = new DayPilot.Date(args.data.end).toString("d/M/yyyy h:mm tt"); args.data.bubbleHtml = `${text}
Start: ${start}
End: ${end}`; } Tutorials --------- * [JavaScript Scheduler: Events as Drag and Drop Target](https://code.daypilot.org/12371/javascript-scheduler-events-as-drag-and-drop-target) * [JavaScript Scheduler: Event Types](https://code.daypilot.org/96153/javascript-scheduler-event-types) * [ASP.NET Core Shift Planning (Entity Framework, SQL Server)](https://code.daypilot.org/60141/asp-net-core-shift-planning) * [Tutorial: ASP.NET Core Hotel Room Booking App](https://code.daypilot.org/96705/asp-net-core-hotel-room-booking-app) List of Common Appearance Properties ------------------------------------ For a list of all event properties, please see [DayPilot.Event.data](https://api.daypilot.org/daypilot-event-data/)  in the API documentation. * `text` - event text (will be HTML-encoded automatically, see [XSS protection](https://doc.daypilot.org/scheduler/xss-protection/ "XSS Protection") ) * `html` - event HTML (if specified, it is used instead of the text) * `barColor` - CSS color of the duration bar * `barBackColor` - CSS color of the duration bar background * `barImageUrl` - image that will be used for the duration bar * `barHidden` - visibility of the duration/progress bar * `backColor` - CSS [color of the event](https://doc.daypilot.org/scheduler/event-color/ "Event Color")  background * `cssClass` - event CSS class * `backImage` - event background image * `backRepeat` - event background repeat style * `fontColor` - event font color List of Common Behavior Properties ---------------------------------- For a list of all event properties, please see [DayPilot.Event.data](https://api.daypilot.org/daypilot-event-data/)  in the API documentation. * `areas` - [active areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * `toolTip` - [event tool tip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * `bubbleHtml` - [event bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble")  HTML (the bubble content will not be loaded from the server if the BubbleHtml is set) * `contextMenu` - event-specific [context menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * `clickDisabled` - if set to true, disables event clicking * `resizeDisabled` - if set to true, disables event resizing * `moveDisabled` - if set to true, disables event moving * `moveVDisabled` - disables moving in vertical direction (changing a resource) * `moveHDisabled` - disables moving in horizontal direction (changing date/time) * `rightClickDisabled` - if set to true, disables event right clicking * `doubleClickDisabled` - if set to true, disables event double clicking Accessing Event Data -------------------- The `args.data` object holds a shallow copy of the data object from [events.list](https://api.daypilot.org/daypilot-scheduler-events-list/) . You should store custom event properties in `tags` field of the data object (to prevent name collisions). dp.events.list = [\ {\ start: "2025-03-15T00:00:00",\ end: "2025-03-17T00:00:00",\ id: "1",\ text: "Event 1",\ tags: { detail: "Detailed event description", type: "important" } \ }\ ]; dp.onBeforeEventRender = function(args) { args.data.cssClass = "test"; args.data.html = args.data.text + "
" + args.data.tags.detail; if (args.data.tags.type === "important") { args.data.barColor = "red"; } }; See also [DayPilot.Scheduler.onBeforeEventRender](http://api.daypilot.org/daypilot-scheduler-onbeforeeventrender/) . Vue Scheduler ------------- In the [Vue Scheduler](https://doc.daypilot.org/scheduler/vue-js/ "Vue") , it is possible to use Vue templates to specify the event content in addition to the `onBeforeEventRender` event handler. See also: * [How to Add Interactive Elements to Vue Scheduler Events Using Templates](https://code.daypilot.org/86986/vue-scheduler-templates) ASP.NET WebForms ---------------- Appearance properties: * Html - event HTML * DurationBarColor - CSS color of the duration bar * DurationBarBackColor - CSS color of the duration bar background * DurationBarImageUrl - image that will be used for the duration bar * DurationBarVisible - whether the duration/progress bar should be visible * BackgroundColor - CSS [color of the event](https://doc.daypilot.org/scheduler/event-color/ "Event Color")  background * CssClass - event CSS class * BackgroundImage - event background image * BackgroundRepeat - event background repeat style Behavior properties: * Areas - [active areas](https://doc.daypilot.org/scheduler/event-active-areas/ "Event Active Areas") * ToolTip - [event tool tip](https://doc.daypilot.org/scheduler/event-tooltip/ "Event ToolTip") * BubbleHtml - [event bubble](https://doc.daypilot.org/scheduler/event-bubble/ "Event Bubble")  HTML (the bubble content will not be loaded from the server if the BubbleHtml is set) * ContextMenuClientName - event-specific [context menu](https://doc.daypilot.org/scheduler/event-context-menu/ "Event Context Menu") * EventClickEnabled - if set to false, disables event clicking * EventResizeEnabled - if set to false, disables event resizing * EventMoveEnabled - if set to false, disables event moving * EventMoveVerticalEnabled  * EventMoveHorizontalEnabled  * EventRightClickEnabled - if set to false, disables event right clicking * EventDoubleClickEnabled - if set to false, disables event double clicking All Event\*Enabled properties can only **disable** an option that is globally enabled. ### Accessing event data object You can access the data source item using **e.DataItem** property. protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { // accessing the original object passed in DataSource collection object original = e.DataItem.Source; // accessing custom original object field to set BubbleHtml and BackgroundColor e.BubbleHtml = (string) e.DataItem["detail"]; e.BackgroundColor = (string) e.DataItem["color"]; // adding active areas for "delete" and "context menu" actions e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps_areas.commandCallBack('delete', {id:e.value() });")); e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_menu").ContextMenu("menu")); // modifying the event HTML (recurring events) if (e.Recurrent) { e.Html += " (R)"; } } Note that e.DataItem is only accessible if DayPilotScheduler.DataBind() has been called to reload the event data. If you have ViewState enabled the events will be accessible during PostBacks but e.DataItem will be null. In the Pro version, you can store selected data fields with the events using **DataTagFields** instead - these custom fields will be serialized to ViewState. The fields specified using DataTagFields will be accessible in the server-side event handlers (using e.Tag\[fieldName\]) and on the client side (e.tag(fieldName)\]. protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { e.BubbleHtml = e.Tag["detail"]; e.BackgroundColor = e.Tag["color"]; } Example: protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) { e.Html = "Custom Event Text"; } Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Time Header Cell Duration - Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Event Calendar](https://doc.daypilot.org/calendar/ "Event Calendar Component") * [Appearance](https://doc.daypilot.org/calendar/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/calendar/client-side-api/ "Client-Side API") * [Columns](https://doc.daypilot.org/calendar/columns/ "Columns") * [Controls](https://doc.daypilot.org/calendar/controls/ "Controls") * [CSS](https://doc.daypilot.org/calendar/css/ "CSS") * [Events](https://doc.daypilot.org/calendar/events/ "Events") * [Export](https://doc.daypilot.org/calendar/export/ "Export") * [Frameworks](https://doc.daypilot.org/calendar/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/calendar/grid/ "Grid") * [Localization](https://doc.daypilot.org/calendar/localization/ "Localization") * [Navigation](https://doc.daypilot.org/calendar/navigation/ "Navigation") * [Server Side Integration](https://doc.daypilot.org/calendar/server-side-integration/ "Server Side Integration") * [Time Header](https://doc.daypilot.org/calendar/time-header/ "Time Header") * [Overnight Scheduling](https://doc.daypilot.org/calendar/overnight-scheduling/ "Overnight Scheduling") * [Scale](https://doc.daypilot.org/calendar/scale/ "Scale") * [Time Cell Duration](https://doc.daypilot.org/calendar/time-cell-duration/ "Time Cell Duration") * [Time Header Active Areas](https://doc.daypilot.org/calendar/time-header-active-areas/ "Time Header Active Areas") * [Time Header Cell Duration](https://doc.daypilot.org/calendar/time-header-cell-duration/ "Time Header Cell Duration") * [Time Header Column Width](https://doc.daypilot.org/calendar/time-header-column-width/ "Time Header Column Width") * [Time Header Customization](https://doc.daypilot.org/calendar/time-header-customization/ "Time Header Customization") * [Touch Devices](https://doc.daypilot.org/calendar/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/calendar/view-types/ "View Types") * [XSS Protection](https://doc.daypilot.org/calendar/xss-protection/ "XSS Protection") Time Header Cell Duration ========================= ![JavaScript Calendar Time Header Cell Duration](https://cdn.doc.daypilot.org/page/image/juies56ck5g6bgbx27lvt7kb7m/JavaScript+Calendar+-+Time+Header+Cell+Duration.png "JavaScript Calendar Time Header Cell Duration") In the **Pro** version, you can use the following vertical time‑header units: * **Auto** (default): one‑hour units when the [scale](https://doc.daypilot.org/calendar/scale/ "Scale") value is under one hour, or a value that matches the current scale otherwise. * A custom number of minutes (any whole number ≥ 1). In the **Lite** version, you can set the time‑header unit to a specific number of minutes (1 – 60). The time‑header units do not have to match the [cell duration](https://doc.daypilot.org/calendar/time-cell-duration/ "Time Cell Duration") . You can adjust the unit length with the [timeHeaderCellDuration](https://api.daypilot.org/daypilot-calendar-timeheadercellduration/) property, and you can [customize](https://doc.daypilot.org/calendar/time-header-customization/ "Time Header Customization") the header cell content with the `onBeforeTimeHeaderRender` event handler. JavaScript ----------
ASP.NET WebForms ---------------- ### Demo * [http://www.daypilot.org/demo/Calendar/TimeHeaderCellDuration.aspx](http://www.daypilot.org/demo/Calendar/TimeHeaderCellDuration.aspx) ASP.NET MVC ----------- MVC View @Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { // ... TimeHeaderCellDuration = 30, // ... }) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Cell Stacking Mode - Monthly Event Calendar | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Monthly Event Calendar](https://doc.daypilot.org/month/ "Monthly Event Calendar Component") * [AJAX](https://doc.daypilot.org/month/ajax/ "AJAX") * [Appearance](https://doc.daypilot.org/month/appearance/ "Appearance") * [Client-Side API](https://doc.daypilot.org/month/client-side-api/ "Client-Side API") * [Controls](https://doc.daypilot.org/month/controls/ "Controls") * [CSS](https://doc.daypilot.org/month/css/ "CSS") * [Day Header](https://doc.daypilot.org/month/day-header/ "Day Header") * [Events](https://doc.daypilot.org/month/events/ "Events") * [Export](https://doc.daypilot.org/month/export/ "Export") * [Frameworks](https://doc.daypilot.org/month/frameworks/ "Frameworks") * [Grid](https://doc.daypilot.org/month/grid/ "Grid") * [Localization](https://doc.daypilot.org/month/localization/ "Localization") * [Navigation](https://doc.daypilot.org/month/navigation/ "Navigation") * [Touch Devices](https://doc.daypilot.org/month/touch-devices/ "Touch Devices") * [View Types](https://doc.daypilot.org/month/view-types/ "View Types") * [Cell Stacking Mode](https://doc.daypilot.org/month/cell-stacking-mode/ "Cell Stacking Mode") * [Month View](https://doc.daypilot.org/month/month-view/ "Month View") * [Weeks View](https://doc.daypilot.org/month/weeks-view/ "Weeks View") Cell Stacking Mode ================== **Cell stacking mode** is an alternative event ordering mode.  Stacking modes (**EventStackingMode** property): * Row (default) * Cell ### **Row** ![stacking mode row 453x204](https://cdn.doc.daypilot.org/page/image/mdejitm4ffge7lfkcukqlwq3na/stacking-mode-row-453x204.png "stacking mode row 453x204") In **row stacking mode**, multi-day events are supported and the row height is stretched according to number of events. ### **Cell** ![stacking mode cell 444x121](https://cdn.doc.daypilot.org/page/image/yhc4wp3dujg3tja2aj76d7jz6q/stacking-mode-cell-444x121.png "stacking mode cell 444x121") In **cell stacking mode**, only one-day events are supported, the row height is fixed. It's possible to set custom event ordering rules inside the day cells. ### **Comparison** | | EventStackingMode="Row" | EventStackingMode="Cell" | | --- | --- | --- | | Row height | Dynamic (so all events fit) | Fixed | | Scrollbar inside a day cell | No | Yes, if needed | | Multi-day events | Yes | No (end date is ignored) | | Event moving  allowed | Yes | Yes | | Event resizing allowed | Yes | No | JavaScript ----------
ASP.NET WebForms ---------------- ### Demo * [Cell Stacking Mode Demo](http://www.daypilot.org/demo/Month/CellStacking.aspx)  (DayPilot Pro for ASP.NET WebForms) ASP.NET MVC ----------- MVC View @Html.DayPilotMonth("dpm", new DayPilotMonthConfig { // ... EventStackingMode = StackingMode.Cell, // ... }) Availability ------------ Availability of this feature in DayPilot editions: | | Lite | Pro | | --- | --- | --- | | [DayPilot for JavaScript](https://javascript.daypilot.org/) | | | | [DayPilot for ASP.NET WebForms](https://www.daypilot.org/) | | | | [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) | | | | [DayPilot for Java](https://java.daypilot.org/) | | | ### Products * [DayPilot for JavaScript](https://javascript.daypilot.org/) * [DayPilot for ASP.NET WebForms](https://aspnet.daypilot.org/) * [DayPilot for ASP.NET MVC](https://mvc.daypilot.org/) * [DayPilot for Java](https://java.daypilot.org/) ### Resources * [Tutorials and Code Samples](https://code.daypilot.org/) * [Documentation](https://doc.daypilot.org/) * [API](https://api.daypilot.org/) * [Forums](https://forums.daypilot.org/) * [News](https://news.daypilot.org/) * [Knowledge Base](https://kb.daypilot.org/) ### Tools * [CSS Theme Designer](https://themes.daypilot.org/) * [UI Builder](https://builder.daypilot.org/) ### About Us * [Contact](https://www.daypilot.org/contact/) ### DayPilot Pro Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars. --- # Highlighting Busy Days - Navigator | DayPilot Documentation - Scheduling Components for JavaScript, Angular, React and Vue [![DayPilot](https://static.daypilot.org/img/logo/daypilot-logo-40x40.png)DayPilot](https://www.daypilot.org/) [Products](https://www.daypilot.org/products/) [Support](https://www.daypilot.org/support/) [DayPilot Documentation](https://doc.daypilot.org/) * [Home](https://doc.daypilot.org/) * [Navigator](https://doc.daypilot.org/navigator/ "Navigator - Date Picker") * [Appearance](https://doc.daypilot.org/navigator/appearance/ "Appearance") * [CSS](https://doc.daypilot.org/navigator/css/ "Date Picker CSS") * [Days](https://doc.daypilot.org/navigator/days/ "Days") * [Events](https://doc.daypilot.org/navigator/events/ "Events") * [Highlighting Busy Days](https://doc.daypilot.org/navigator/highlighting-busy-days/ "Highlighting Busy Days") * [Recurring Events](https://doc.daypilot.org/navigator/recurring-events/ "Recurring Events") * [Frameworks](https://doc.daypilot.org/navigator/frameworks/ "Frameworks") * [Localization](https://doc.daypilot.org/navigator/localization/ "Localization") * [Navigation](https://doc.daypilot.org/navigator/navigation/ "Navigation") Highlighting Busy Days ====================== ![javascript date picker with free busy highlighting open source](https://cdn.doc.daypilot.org/page/image/mbpz7y2txffvtlyoffscgcb66y/javascript-date-picker-with-free-busy-highlighting-open-source.png "javascript date picker with free busy highlighting open source") It is possible to show free/busy information in the Navigator date picker component. The busy days are marked with **\*\_busy** CSS class (see also [Navigator Theme CSS Classes](http://kb.daypilot.org/35228/list-of-css-classes-used-in-cssonly-mode-navigator/) ). JavaScript Date Picker ---------------------- You can load events using [events.list](http://api.daypilot.org/daypilot-navigator-events-list/)  array.  * The objects in the array use the same format as the main UI component (Calendar, Month, Scheduler). You can use the same data source for loading the busy data. * The only required fields are _start_ and _end_. Example