I almost copy the example but nothing happen, and no error message, too.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
<script src="./scheduler-1.1.2-trial/build/scheduler.umd.js"></script>
<script src="scheduler-1.1.2-trial/examples/vue/components/scheduler.js"></script>
<link id="bryntum-theme" rel="stylesheet" type="text/css" href="./scheduler-1.1.2-trial/build/scheduler.dark.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
html,
body,
#app{
height: 95%;
}
</style>
</head>
<body>
<div id="app">
<scheduler
ref="scheduler"
:time-ranges-feature="true"
:columns="columns"
:row-height=60
:bar-margin="barMargin"
:events="events"
:resources="resources"
:start-date="startDate"
:end-date="endDate"
:event-renderer="eventRenderer"
event-style="colored"
@eventselectionchange="onEventSelectionChange"
>
</scheduler>
</div>
<script src="scheduler-1.1.2-trial/examples/vue/components/scheduler.js"></script>
<script src="./javascripts/main.js"></script>
</body>
</html>var vm = new Vue({
el: '#app',
data : {
events : [],
resources : [],
timeRanges : true,
barMargin : 5,
startDate : new Date(2018, 1, 7, 8),
endDate : new Date(2018, 1, 7, 18),
selectedEvent : '',
columns: [
{ type:'tree', text: 'Task Name', field: 'name', width: 400}
]
},
methods : {
getData : function () {
var me = this;
me.$http.get('../resource/20181203.json').then(function (response) {
var data = response.data;
console.log("Get data...", data)
});
},
onEventSelectionChange : function (event) {
// Code to take action when an event is selected goes here
}
},
created: function () {
this.getData();
}
});