change order of views in scheduler header

1 Answer 122 Views
Scheduler
Stuart
Top achievements
Rank 1
Stuart asked on 14 Nov 2022, 12:30 PM

Is there a way to change the order of the different views in the header, I edited the timeline view to show 2 weeks and want it to be displayed after "week" and before "month" but right now it's "day", "week", "month", "year" ,"bi-weekly". As you can see it's at the end which looks odd since I'd rather have it in order from smallest view to biggest.

Thanks

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Valentin Dragnev
Telerik team
answered on 17 Nov 2022, 10:01 AM

Hello Stuart,

Hope you are well. 

 

To change the order of the timeline view, you can use CSS. By selecting every item you have the possibility to reposition it in the desired place.

Here is an example that you can try:

CSS:

html body .RadScheduler .rsViews {
    display: flex;
    flex-direction: row;
}
html body .RadScheduler .rsViews li:nth-child(1){
    order: 1; 
}
html body .RadScheduler .rsViews li:nth-child(2){
    order: 2; 
}
html body .RadScheduler .rsViews li:nth-child(3){
    order: 4;
}
html body .RadScheduler .rsViews li:nth-child(4){
    order: 5; 
}
html body .RadScheduler .rsViews li:nth-child(5)
{
    order: 3;
}

For a better understanding of the CSS selectors and possibilities, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, and "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

Hope this was helpful. 

Regards,
Valentin Dragnev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
Stuart
Top achievements
Rank 1
Answers by
Valentin Dragnev
Telerik team
Share this question
or