Convert calendar to VueJS component

Update to FullCalendar 3.1.0 as well.
This commit is contained in:
Frederic Guillot 2016-11-15 21:24:25 -05:00
parent 94cd5869bf
commit e2a867166b
No known key found for this signature in database
GPG Key ID: 92D77191BA7FBC99
10 changed files with 168 additions and 840 deletions

View File

@ -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'),
)));
}

View File

@ -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>

View File

@ -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

View File

@ -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');
});
}
});
}
});

View File

@ -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

View File

@ -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",

View File

@ -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',