Kendo UI Scheduler, Agenda View columns

Question

in the Agenda view for the Kendo-UI scheduler, it displays "Date, Time, Event" columns. I also have an extra column that displays a different attribute of the event I am displaying.

What I want to accomplish is to switch the positioning of the extra column with the "Date" column. I had found a few things, such as kendo grid reordering and also using css to change placement in the scheduler, but neither method seems applicable to my situation. The css in particular was using float left/right, but that messes up the columns instead.

Below are links to the images of my issue as well as the classes they are assigned on the scheduler.

AgendaCols

classInfo

Also, as a bonus, I'd like to know if I can add a title in the orange part of the first picture, since it's currently blank while the other three each have a title that is built-in.

Thanks for your time,

Alpr

Answer 1

when triggering navigation event, this solved my issue (this.schedule is what my kendo scheduler is declared as):

navigate(event: any) {
    if (event != null) {
          ...omitted...
        if (event.view == "agenda") { 
            this.schedule.options.group.date = true; 
        } else { 
            this.schedule.options.group.date = false; 
        }
        ...omitted...
    };
};

Answer 2

You can specify date: true specifically for the Agenda view by specifying this in the scheduler's options object:

views: [{
    type: "agenda",
    group: {
        date: true
    }
}, "week", "day"]

Notice that the group's date: true setting is inside the agenda entry in the views array.