Implement Custom Timeline View

[Ève-Lyne]

Hi!

I would like to do this custom views for scheduler in vue.js.

How can I proceed ?

Thanks for your help !

[Ève-Lyne]

I would like to do this [custom views for scheduler][1] in vue.js.
How can I proceed ?

Thanks for your help !

EDIT:

I want 4 kendo-scheduler-view of type "timelineweek" where this props change : name, title, majorTick, columnWidth and dateHeaderTemplate

But I can't have more than one kendo-scheduler-view with a type "timelineweek".  So I would like to do a custom timeline view for each view I need. But I can't figure how to do it in Vue.js.


         <kendo-scheduler id="scheduler" :data-source="data.options.dataSource"
                         :date="data.options.date"
                         :messages="data.options.messages"
                         :height="600"
                         :timezone="'Etc/UTC'"
                         :currentTimeMarker="data.options.currentTimeMarker"
                         :resources="data.options.resources"
                         :group="data.options.group"
                         :footer="data.options.footer"
                         :majorTimeHeaderTemplate="data.options.majorTimeHeaderTemplate"
                         :toolbar="data.options.toolbar"
                         @change="onChange"
                         @edit="onEdit"
                         @add="onAdd"
                         @cancel="onCancel"
                         @dataBound="onDataBound"
                         @move="onMove"
                         @navigate="onNavigate"
                         @resize="onResize"
                         @save="onSave">
    
                <kendo-scheduler-view  type="timelineWeek"
                                    :name="data.customView.quarterly.title"  
                                    :title="data.customView.quarterly.title"  
                                    :selected="true"
                                    :selectedDateFormat="data.customView.selectedDateFormat"
                                    :selectedShortDateFormat="data.customView.selectedShortDateFormat"
                                    :dateHeaderTemplate="data.customView.quarterly.dateHeaderTemplate"
                                    :groupDate="false"
                                    :groupOrientation="'vertical'"
                                    :majorTick="data.customView.quarterly.majorTick"
                                    :columnWidth="data.customView.quarterly.columnWidth"
                                    />
    
    //Doen't work

    <kendo-scheduler-view  type="timelineWeek"
                                    :name="data.customView.month.title"  
                                    :title="data.customView.month.title"
    :selectedDateFormat="data.customView.selectedDateFormat"
                                    :selectedShortDateFormat="data.customView.selectedShortDateFormat"
                                    :dateHeaderTemplate="data.customView.month.dateHeaderTemplate"
                                    :groupDate="false"
                                    :groupOrientation="'vertical'"
                                    :majorTick="data.customView.month.majorTick"
                                    :columnWidth="data.customView.month.columnWidth"
                                    />
        </kendo-scheduler>


    <script>
        export default  {
            name: "scheduler",
            data() {
              return{
                data : {
                    options: {
                        date: new Date(),
                        majorTimeHeaderTemplate: "#=kendo.toString(date, 'h:mm')#",
                        footer: false,
                        showWorkHours: true,
                        currentTimeMarker: {
                            useLocalTimezone: true
                        },
                        group: {
                            resources: ["team"],
                            date: false              
                        },
                        dataSource: [
                            {
                                id: 1,
                                start: new Date("2018/05/22 08:00 AM"),
                                end: new Date("2018/05/22 09:00 AM"),
                                title: "Scie 1",
                                team: 2
                            },
                            {
                                id: 2,
                                start: new Date("2018/05/24 08:00 AM"),
                                end: new Date("2018/05/24 09:00 AM"),
                                title: "Horaire scie 1",
                                team: 2
                            },
                            {
                                id: 3,
                                start: new Date("2018/05/24 08:00 AM"),
                                end: new Date("2018/05/24 09:00 AM"),
                                title: "Séchoir 1000",
                                team: 3
                            }
                        ],
                        resources: [
                            {
                                field: "team",
                                title: "team",
                                name: "team",
                                dataColorField: "key",                   
                                dataSource: [
                                    { text: "Sciage", value: 1, key: "blue" },
                                    { text: "Horaire sciage", value: 2, key: "green" },
                                    { text: "Séchoir 1000", value: 3, key: "blue" },
                                    { text: "Horaire Séchoir 1000", value: 4, key: "green" },
                                    { text: "Séchoir 2000", value: 5, key: "blue" },
                                    { text: "Horaire Séchoir 2000", value: 6, key: "green" }
                                ]
                            }
                        ],
                        messages: { //traduction
                            today: "Aujourd'hui"
                        },
                    },
                    customView: {
                        selectedDateFormat: "{0:D} - {1:D}",
                        selectedShortDateFormat: "{0:d} - {1:d}",
                        quarterly: {
                            title : "quarterly",
                            dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span> ",
                            columnWidth: 40, //Largeur des colonnes à changer selon le majorTick
                            majorTick: 1440 //Minute
                        }
                    },
                    
                }
            };
            },
            methods: {
                onChange: function (ev) {
                    console.log("Event :: change");
                },
                onEdit: function (ev) {
                    console.log("Event :: edit");
                },
                onAdd: function (ev) {
                    console.log("Event :: add");
                },
                onCancel: function (ev) {
                    console.log("Event :: cancel");
                },
                onDataBound: function (ev) {
                    console.log("Event :: dataBound");
                },
                onMove: function (ev) {
                    console.log("Event :: move");
                },
                onNavigate: function (ev) {
                    console.log("Event :: navigate");
                },
                onResize: function (ev) {
                    console.log("Event :: resize");
                },
                onSave: function (ev) {
                    console.log("Event :: save");
                }
            }
        };
        </script>

[Plamen]

Hello,

I have created a sample with Kendo Vue Scheduler wrapper and a custom view. Please review it and let me know if you have further questions.

Regards,
Plamen
Progress Telerik

[Ève-Lyne]

Hello!

Thanks you so much! It works perfectly!

Have  a nice day!

[Steffen]

Hello, 

i am interested in the solution as well. 

Where can i find the sample?

Best regards

[Plamen]

Hi,

I have updated the post so the solution is again available in my previous reply.

Regards,
Plamen
Progress Telerik