Kendo scheduler css class names changed recently???

[Kumeri]

I am using the kendo- scheduler jquery component in my project. Recently I updated the version of the kendo library, I am currently using 

   "@progress/kendo-ui": "2021.1.330"

There were customization styles I have done on the component depending on the kendo styling class ex: "k-header", "k-scheduler-navigation", and many more... 

After the update many of my customization styles have lost, Are there any changes done to class names and element types or, element order or any other changes contained in the above update or any later update recently ???? 

[Ivan Zhekov]

Hello.

In an effort to reduce fragmentation in the themes and reuse parts of components, or entire components, we indeed changed the rendering of our scheduler. The change applied not only to Kendo UI for jQuery, but to the React, Vue and Blazor counterparts. Only Kendo UI for Angular is lagging behind, we'll fix that too.

In the case of our scheduler, we stopped using the generic "k-header" class and switched to toolbar based rendering. Where previously, you would have to use ".k-scheduler > .k-header" to target the header (toolbar), now you can use either ".k-scheduler-toolbar" or ".k-scheduler > .k-scheduler-toolbar", depending on the exact requirements.

There is an additional ".k-toolbar" class to account for all spacing and item distribution, as well as other styles applied to toolbar items.

Scheduler navigation and scheduler views are still there. The best way to describe the changes is with the following before and now snippets:

<!-- before -->
<div class="k-scheduler-toolbar k-header k-floatwrap">
    <ul class="k-scheduler-navigation k-reset">
        <li class="k-state-default k-header k-nav-today">
            <a class="k-link" href="#" role="button" title="Today">Today</a>
        </li>
        <li class="k-state-default k-header k-nav-prev">
            <a class="k-link" href="#" role="button" title="Previous" aria-label="Previous">
                <span class="k-icon k-i-arrow-60-left"></span>
            </a>
        </li>
        <li class="k-state-default k-header k-nav-next">
            <a class="k-link" href="#" role="button" title="Next" aria-label="Next">
                <span class="k-icon k-i-arrow-60-right"></span>
            </a>
        </li>
        <li class="k-state-default k-nav-current">
            <a class="k-link" href="#" role="button">
                <span class="k-icon k-i-calendar"></span>
                <span class="k-sm-date-format">6/24/2021</span>
                <span class="k-lg-date-format">Thursday, June 24, 2021</span>
            </a>
        </li>
    </ul>
    <ul class="k-scheduler-views k-reset">
        <li class="k-current-view">
            <span class="k-link" role="button"> Day </span>
        </li>
        <li class="k-state-selected">
            <span class="k-link" role="button"> Day </span>
        </li>
        <li>
            <span class="k-link" role="button"> Week </span>
        </li>
        <li>
            <span class="k-link" role="button"> Month </span>
        </li>
    </ul>
</div>


<!-- now -->
<div class="k-scheduler-toolbar k-toolbar">
    <span class="k-scheduler-navigation k-button-group">
        <button class="k-button k-nav-today" title="Today">
            <span class="k-button-text">Today</span>
        </button>
        <button class="k-button k-icon-button k-nav-prev" title="Previous" aria-label="Previous">
            <span class="k-icon k-i-arrow-60-left"></span>
        </button>
        <button class="k-button k-icon-button k-nav-next" title="Next" aria-label="Next">
            <span class="k-icon k-i-arrow-60-right"></span>
        </button>
    </span>

    <a role="button" href="#" class="k-nav-current">
        <span class="k-icon k-i-calendar"></span>
        <span class="k-sm-date-format">6/24/2021</span>
        <span class="k-lg-date-format">Thursday, June 24, 2021</span>
    </a>
    
    <span class="k-spacer k-toolbar-spacer"></span>
    
    <span class="k-scheduler-views-wrapper">
        <select class="k-dropdown k-views-dropdown">
            <option value="day">Day</option>
            <option value="week">Week</option>
            <option value="month">Month</option>
        </select>
        <span class="k-scheduler-views k-button-group">
            <button type="button" class="k-button k-view-day k-state-selected">Day</button>
            <button type="button" class="k-button k-view-week">Week</button>
            <button type="button" class="k-button k-view-month">Month</button>
        </span>
    </span>
</div>

While the change is significant it's actually pretty easy to migrate your styles from targeting the old rendering to targeting the new rendering.

Note: similar changes were applied to kendo editor and gantt.

Regards,
Ivan Zhekov
Progress Telerik