Build Better Vue Apps
Faster

new Vue({
 el: '#vueapp',
 template: ` <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :timezone="'Etc/UTC'">
      <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
    </kendo-scheduler>`,
 data: {
  date: new Date('2018/6/6'),
  localDataSource: [{
    id: 1,
    start: new Date("2018/6/6 08:00 AM"),
    end: new Date("2018/6/6 09:00 AM"),
    title: "Interview"
   },
   {
    id: 2,
    start: new Date("2018/6/6 08:00 AM"),
    end: new Date("2018/6/6 09:00 AM"),
    title: "Meeting"
   }
  ]
 }
})

 new Vue({
  el: '#vueapp',
  template: `<kendo-chart
                :title-text="'Gross domestic product growth /GDP annual %/'"
                :legend-position="'bottom'"
                :legend-position="'horizontal'"
                :series-defaults-type="'area'"
                :series="series"
                :category-axis-categories="categories">
        </kendo-chart>`,
  data: {
   date: new Date('2018/6/6'),
   series: [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
   }, {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
   }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
   }, {
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
   }],
   categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
  }
 })

new Vue({
 el: '#vueapp',
 template: ` <kendo-editor :resizable-content="true"
                 :resizable-toolbar="true"
                 :value="htmlText"
                 style="height:280px"
                 rows="10"
                 cols="30">
    </kendo-editor>`,
 data() {
  return {
   htmlText: "<p>Some sample text.</p>"
  }
 }
})