This is a migrated thread and some comments may be shown as answers.

Implement Custom Timeline View

5 Answers 100 Views
This is a migrated thread and some comments may be shown as answers.
Ève-Lyne
Top achievements
Rank 1
Ève-Lyne asked on 23 May 2018, 01:12 PM

Hi!

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

How can I proceed ?

Thanks for your help !

5 Answers, 1 is accepted

Sort by
0
Ève-Lyne
Top achievements
Rank 1
answered on 23 May 2018, 06:10 PM
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>



0
Plamen
Telerik team
answered on 25 May 2018, 11:16 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ève-Lyne
Top achievements
Rank 1
answered on 25 May 2018, 12:56 PM

Hello!

Thanks you so much! It works perfectly!

Have  a nice day!

0
Steffen
Top achievements
Rank 1
answered on 11 Mar 2019, 02:29 PM

Hello, 

i am interested in the solution as well. 

Where can i find the sample?

Best regards

0
Plamen
Telerik team
answered on 12 Mar 2019, 08:17 AM
Hi,

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

Regards,
Plamen
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Ève-Lyne
Top achievements
Rank 1
Answers by
Ève-Lyne
Top achievements
Rank 1
Plamen
Telerik team
Steffen
Top achievements
Rank 1
Share this question
or