Convert calendar to VueJS component
Update to FullCalendar 3.1.0 as well.
This commit is contained in:
parent
94cd5869bf
commit
e2a867166b
|
|
@ -29,7 +29,6 @@ class CalendarController extends BaseController
|
|||
'project' => $project,
|
||||
'title' => $project['name'],
|
||||
'description' => $this->helper->projectHeader->getDescription($project),
|
||||
'check_interval' => $this->configModel->get('board_private_refresh_interval'),
|
||||
)));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<section id="main">
|
||||
<?= $this->projectHeader->render($project, 'CalendarController', 'show') ?>
|
||||
<div id="calendar"
|
||||
data-save-url="<?= $this->url->href('CalendarController', 'save', array('project_id' => $project['id'])) ?>"
|
||||
data-check-url="<?= $this->url->href('CalendarController', 'project', array('project_id' => $project['id'])) ?>"
|
||||
data-check-interval="<?= $check_interval ?>"
|
||||
>
|
||||
</div>
|
||||
<calendar save-url="<?= $this->url->href('CalendarController', 'save', array('project_id' => $project['id'])) ?>"
|
||||
check-url="<?= $this->url->href('CalendarController', 'project', array('project_id' => $project['id'])) ?>">
|
||||
</calendar>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,2 @@
|
|||
<div id="calendar"
|
||||
data-check-url="<?= $this->url->href('CalendarController', 'user', array('user_id' => $user['id'])) ?>"
|
||||
data-save-url="<?= $this->url->href('CalendarController', 'save') ?>"
|
||||
>
|
||||
</div>
|
||||
<calendar check-url="<?= $this->url->href('CalendarController', 'user', array('user_id' => $user['id'])) ?>"
|
||||
save-url="<?= $this->url->href('CalendarController', 'save') ?>"></calendar>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,50 @@
|
|||
Vue.component('calendar', {
|
||||
props: ['saveUrl', 'checkUrl'],
|
||||
template: '<div id="calendar"></div>',
|
||||
ready: function() {
|
||||
var self = this;
|
||||
var calendar = $('#calendar');
|
||||
|
||||
calendar.fullCalendar({
|
||||
locale: $("body").data("js-lang"),
|
||||
editable: true,
|
||||
eventLimit: true,
|
||||
defaultView: "month",
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
eventDrop: function(event) {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
url: self.saveUrl,
|
||||
contentType: "application/json",
|
||||
type: "POST",
|
||||
processData: false,
|
||||
data: JSON.stringify({
|
||||
"task_id": event.id,
|
||||
"date_due": event.start.format()
|
||||
})
|
||||
});
|
||||
},
|
||||
viewRender: function() {
|
||||
var url = self.checkUrl;
|
||||
var params = {
|
||||
"start": calendar.fullCalendar('getView').start.format(),
|
||||
"end": calendar.fullCalendar('getView').end.format()
|
||||
};
|
||||
|
||||
for (var key in params) {
|
||||
url += "&" + key + "=" + params[key];
|
||||
}
|
||||
|
||||
$.getJSON(url, function(events) {
|
||||
calendar.fullCalendar('removeEvents');
|
||||
calendar.fullCalendar('addEventSource', events);
|
||||
calendar.fullCalendar('rerenderEvents');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
Kanboard.Calendar = function(app) {
|
||||
this.app = app;
|
||||
};
|
||||
|
||||
Kanboard.Calendar.prototype.execute = function() {
|
||||
var calendar = $('#calendar');
|
||||
|
||||
if (calendar.length == 1) {
|
||||
this.show(calendar);
|
||||
}
|
||||
};
|
||||
|
||||
Kanboard.Calendar.prototype.show = function(calendar) {
|
||||
calendar.fullCalendar({
|
||||
lang: $("body").data("js-lang"),
|
||||
editable: true,
|
||||
eventLimit: true,
|
||||
defaultView: "month",
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay'
|
||||
},
|
||||
eventDrop: function(event) {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
url: calendar.data("save-url"),
|
||||
contentType: "application/json",
|
||||
type: "POST",
|
||||
processData: false,
|
||||
data: JSON.stringify({
|
||||
"task_id": event.id,
|
||||
"date_due": event.start.format()
|
||||
})
|
||||
});
|
||||
},
|
||||
viewRender: function() {
|
||||
var url = calendar.data("check-url");
|
||||
var params = {
|
||||
"start": calendar.fullCalendar('getView').start.format(),
|
||||
"end": calendar.fullCalendar('getView').end.format()
|
||||
};
|
||||
|
||||
for (var key in params) {
|
||||
url += "&" + key + "=" + params[key];
|
||||
}
|
||||
|
||||
$.getJSON(url, function(events) {
|
||||
calendar.fullCalendar('removeEvents');
|
||||
calendar.fullCalendar('addEventSource', events);
|
||||
calendar.fullCalendar('rerenderEvents');
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"jquery": "^2.2.3",
|
||||
"fullcalendar": "^2.9.1",
|
||||
"fullcalendar": "^3.0.1",
|
||||
"chosen": "^1.5.1",
|
||||
"c3": "^0.4.11",
|
||||
"jquery-ui": "^1.11.4",
|
||||
|
|
|
|||
|
|
@ -42,9 +42,9 @@ var vendor = {
|
|||
'bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.min.js',
|
||||
'bower_components/chosen/chosen.jquery.js',
|
||||
'bower_components/select2/dist/js/select2.min.js',
|
||||
'bower_components/moment/min/moment-with-locales.min.js',
|
||||
'bower_components/moment/min/moment.min.js',
|
||||
'bower_components/fullcalendar/dist/fullcalendar.min.js',
|
||||
'bower_components/fullcalendar/dist/lang-all.js',
|
||||
'bower_components/fullcalendar/dist/locale-all.js',
|
||||
'bower_components/mousetrap/mousetrap.min.js',
|
||||
'bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js',
|
||||
'bower_components/d3/d3.min.js',
|
||||
|
|
|
|||
Loading…
Reference in New Issue