@progress/kendo-ui/migrations/2026-3-811/manual-instructions.cjs

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

'use strict';

module.exports = {
  description: `Scheduler Enhanced Rendering — Manual Upgrade Instructions for Kendo UI 2026 Q3

The Scheduler component received a major rendering overhaul in 2026 Q3. While CSS class renames and deprecated Window options are handled automatically by the codemods, the following structural changes require manual review and intervention.`,

  sections: [
    {
      title: 'Toolbar Markup Changed',
      description: 'The Scheduler toolbar was restructured with new element order, flat fillMode buttons, and responsive behavior.',
      details: `The toolbar now uses fillMode="flat" for all navigation buttons. The element order has changed:
- A "New Event" primary button was added
- "Today" is now a standalone flat button (previously part of the nav ButtonGroup)
- Prev/Next are a separate ButtonGroup with fillMode="flat"
- The view switcher remains a SegmentedControl at full width but collapses to a MenuButton at narrower widths
- Responsive levels 0–3 progressively hide elements as width decreases

If you have custom CSS that targets the toolbar navigation ButtonGroup with solid fill (.k-button-solid within .k-scheduler-toolbar), update it to target flat-styled buttons (.k-button-flat).`,
      migration: [
        'Search for custom CSS selectors targeting .k-scheduler-toolbar .k-button-group or .k-scheduler-toolbar .k-button-solid',
        'Update fillMode references: .k-button-solid → .k-button-flat for toolbar navigation buttons',
        'If you hide or reorder toolbar elements via CSS, verify the new DOM order matches your expectations',
        'If you style the view switcher, account for the MenuButton fallback at narrow widths (.k-menu-button)',
        'Test responsive behavior at various widths — elements hide progressively at breakpoints',
      ],
    },
    {
      title: 'Event Element Structure Changed',
      description: 'The internal event DOM structure now uses flex layout with CSS Container Queries.',
      details: `Key structural changes:
- Container uses "container-type: size" for CSS Container Queries
- Title renders BEFORE time (order reversed from previous versions)
- .k-event-actions wrapper removed (handled by codemod → .k-event-recurrence-icon)
- Delete action no longer rendered in static markup (appears on hover/interaction)
- Multi-day events use .k-event-continuation spans with directional chevron icons
- Layout changed from "overflow: hidden" to "display: flex; overflow: visible"

New structure:
  <div class="k-event" style="container-type: size">
    <div>
      <div class="k-event-template k-event-title">Title</div>
      <div class="k-event-template k-event-time">
        <span class="k-event-recurrence-icon">...</span>
        10:00 AM - 10:30 AM
      </div>
    </div>
    <span class="k-event-recurrence-icon">...</span>
    <span class="k-resize-handle k-resize-n"></span>
    <span class="k-resize-handle k-resize-s"></span>
  </div>`,
      migration: [
        'If custom CSS uses "overflow: hidden" on .k-event, remove it (now uses flex with overflow: visible)',
        'If custom CSS or templates assume time renders before title, update the order',
        'If jQuery code traverses .k-event children expecting .k-event-actions as first/last child, update the traversal',
        'If you target the delete button inside events (.k-event .k-link.k-event-delete), it is no longer in static DOM — appears on hover via event handler',
        'If using custom event templates, review them for compatibility with the new flex container layout',
        'If styling multi-day events, add rules for .k-event-continuation spans',
        'If using @container queries elsewhere, verify no conflicts with the event container-type: size',
      ],
    },
    {
      title: 'Header Cell Markup Changed',
      description: 'Day/Week view header cells now render two separate elements instead of a single combined span.',
      details: `Before:
  <th class="k-scheduler-cell k-heading-cell">
    <span class="k-link k-nav-day">Mon 6/13</span>
  </th>

After:
  <th class="k-scheduler-cell k-heading-cell">
    <span class="k-scheduler-date-day">Mon</span>
    <span class="k-link k-nav-day">13</span>
  </th>

The day name and date number are now separate elements. The .k-nav-day span now contains only the date number.`,
      migration: [
        'If CSS targets .k-nav-day and expects it to contain day name + number (e.g., "Mon 6/13"), update to account for split elements',
        'If using content-based styling (e.g., min-width on .k-nav-day for the combined text), adjust widths',
        'Add styling for the new .k-scheduler-date-day element if needed',
        'If JavaScript reads .k-nav-day text content to parse dates, update parsing logic to read from both spans or use the Scheduler API instead',
      ],
    },
    {
      title: 'Edit Dialog Uses Dialog Instead of Window',
      description: 'The Scheduler edit dialog switched from Window to Dialog component. Quick create/edit uses Popover.',
      details: `The full edit experience changed:
- Full edit: Window → Dialog (centered, not draggable, not resizable)
- Quick create/edit: Dialog → Popover (no overlay, anchored to event)
- Form labels now use icons instead of text
- Date/time section uses .k-scheduler-edit-form-row wrappers instead of direct grid children
- Grid layout changed from 5 columns to 3 columns (2.5fr 1fr min-content)
- All-day toggle uses Switch component instead of checkbox
- Actions use .k-popover-actions class (quick edit) or Dialog action buttons (full edit)

jQuery API: The "window" option in editable still works but now configures a Dialog.
ASP.NET: WindowBuilder replaced by DialogBuilder (method name preserved for compat).`,
      migration: [
        'Remove any draggable/resizable/pinned/position/appendTo options from editable.window config (handled by codemod)',
        'If custom CSS targets .k-window within the scheduler edit context, change to .k-dialog',
        'If custom CSS targets .k-window-titlebar, change to .k-dialog-titlebar',
        'If custom CSS targets .k-window-content, change to .k-dialog-content',
        'If custom CSS targets .k-window-actions (title bar buttons), change to .k-dialog-actions',
        'Update any JavaScript that calls .data("kendoWindow") on the edit dialog — it is now .data("kendoDialog")',
        'If customizing the quick edit form, update CSS from .k-scheduler-edit-form grid to account for .k-scheduler-edit-form-row wrappers',
        'If styling the all-day toggle, target .k-switch instead of .k-checkbox',
        'If styling form labels, they now contain icon elements instead of text',
        'Review .k-scheduler-datetime-grid selectors — layout changed to 3 columns with .k-scheduler-datetime-label separators',
        'For ASP.NET wrappers: replace WindowBuilder options (Draggable, Resizable, Pinned, AppendTo, LoadContentFrom, Position, Actions with Minimize/Maximize) with DialogBuilder options (Modal, Size, Closable, ButtonLayout)',
      ],
    },
    {
      title: 'Month View "More Events" Tooltip Replaced with Popover',
      description: 'The overflow indicator popup is now a Popover component with different structure.',
      details: `Class renames are handled by the codemod, but structural differences require manual review:

Old tooltip structure:
  <div class="k-tooltip k-scheduler-tooltip">
    <div class="k-tooltip-title">June 13</div>
    <div class="k-tooltip-events-container">
      <div class="k-tooltip-events">
        <div class="k-tooltip-event">...</div>
      </div>
    </div>
  </div>

New popover structure:
  <div class="k-popover k-scheduler-popover">
    <div class="k-popover-header">June 13</div>
    <div class="k-popover-body">
      <div class="k-popover-events">
        <div class="k-popover-event">...</div>
      </div>
    </div>
    <div class="k-popover-callout"></div>
  </div>

Key differences beyond class names:
- Popover has a .k-popover-body wrapper (tooltip had direct content)
- Popover has a .k-popover-callout element (arrow pointing to trigger)
- No overlay behind the popover
- The events container wrapper (.k-tooltip-events-container) is flattened into .k-popover-events directly`,
      migration: [
        'If custom CSS targets .k-tooltip-events-container as a separate wrapper, note it maps to .k-popover-events (same element as .k-tooltip-events)',
        'If styling the tooltip arrow/pointer, update to target .k-popover-callout instead',
        'If adding a background overlay when the tooltip shows, remove it — Popover does not use overlays',
        'If custom JavaScript creates or destroys the tooltip via .data("kendoTooltip"), it is now .data("kendoPopover")',
        'If reading events from the popup DOM, account for the .k-popover-body wrapper between header and events',
        'If using CSS to position the tooltip, the Popover handles its own anchoring — remove manual positioning',
      ],
    },
  ],

  affectedComponents: ['Scheduler'],

  backwardsCompatibilityLink: 'https://docs.telerik.com/kendo-ui/backwards-compatibility/2026-backward-compatibility#kendo-ui-2026-q3',
};