Kendo scheduler css class names changed recently???

1 Answer 13 Views
Scheduler Styling
Kumeri
Top achievements
Rank 1
Veteran
Kumeri asked on 28 Apr 2021, 12:24 PM

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 ???? 

1 Answer, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 30 Apr 2021, 01:11 PM

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

    Тhe web is about to get a bit better! 

    The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

    Tags
    Scheduler Styling
    Asked by
    Kumeri
    Top achievements
    Rank 1
    Veteran
    Answers by
    Ivan Zhekov
    Telerik team
    Share this question
    or