UNPKG

@progress/kendo-ui

Version:

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

56 lines (42 loc) 2.22 kB
'use strict'; const { applyClassReplacementsCss } = require('../_shared.cjs'); module.exports = function transformer(fileInfo) { if (!/\.(css|scss|sass|less)$/i.test(fileInfo.path)) { return undefined; } if (!fileInfo.source.includes('k-event-actions')) { return undefined; } const updated = applyClassReplacementsCss(fileInfo.source); return updated !== fileInfo.source ? updated : undefined; }; module.exports.aiInstructions = `The Scheduler event element structure was overhauled in Kendo UI 2026 Q3. The \`.k-event-actions\` wrapper class has been removed and replaced with specific semantic classes. ## What Changed The \`.k-event-actions\` span that previously wrapped recurrence icons and the delete button has been removed. In its place: - Recurrence indicators now use \`.k-event-recurrence-icon\` - Multi-day continuation arrows now use \`.k-event-continuation\` - The delete action is no longer rendered in the static event markup ## CSS Migration Before: .k-event .k-event-actions { display: flex; gap: 4px; } .k-event .k-event-actions .k-icon { font-size: 12px; } .k-scheduler .k-event-actions { position: absolute; top: 2px; right: 2px; } After: .k-event .k-event-recurrence-icon { display: flex; gap: 4px; } .k-event .k-event-recurrence-icon .k-icon { font-size: 12px; } .k-scheduler .k-event-recurrence-icon { position: absolute; top: 2px; right: 2px; } ## Additional Context The event element now uses \`display: flex\` with \`overflow: visible\` and CSS Container Queries (\`container-type: size\`). The title element renders before the time element (order reversed from previous versions). If your custom CSS relied on the DOM order of title vs time, you may need to adjust. The new event 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>`;