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
0
![](/forums/images/avatarimages/default.gif)
È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>
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
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
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
![](/forums/images/avatarimages/default.gif)
È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
![](/forums/images/avatarimages/default.gif)
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
Hi,
I have updated the post so the solution is again available in my previous reply.
Regards,
Plamen
Progress Telerik
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