0
Je suis nouveau à la programmation alors j'ai suivi ce tutoriel http://www.mitechdev.com/2016/07/crud-operations-on-angular-ui-calendar.html, mais il n'actualise pas les données après l'envoi du formulaire. Les données nouvelles/modifiées/supprimées sont affichées après l'actualisation de la page. J'ai aussi essayé ".fullCalendar ('refetchEvents')" mais sans effet. Fondamentalement ce que je veux faire est quand je soumets le formulaire (fermant le modal) les données à afficher dans le calendrier. Merci d'avance.AngularJS UI-calendrier ne rafraîchit pas les événements sur le calendrier (actualiser manuellement le calendrier (F5))
Mise à jour - ici mon script:
<script>
var app = angular.module('myapp', ['ui.calendar', 'ui.bootstrap']);
app.controller('CalenderController', ['$scope', '$http', 'uiCalendarConfig', '$uibModal', function ($scope, $http, uiCalendarConfig, $uibModal) {
$scope.SelectedEvent = null;
var isFirstTime = true;
$scope.events = [];
$scope.eventSources = [$scope.events];
$scope.NewEvent = {};
//this function for get datetime from json date
function getDate(datetime) {
if (datetime != null) {
var mili = datetime.replace(/\/Date\((-?\d+)\)\//, '$1');
return new Date(parseInt(mili));
}
else {
return "";
}
}
// this function clears clender enents
function clearCalendar() {
if (uiCalendarConfig.calendars.myCalendar != null) {
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect');
}
}
//Load events from server to display on caledar
function populate() {
clearCalendar();
$http.get('/Test/GetEvents', {
cache: false,
params: {}
}).then(function (data) {
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function (value) {
$scope.events.push({
id: value.EventID,
title: value.Title,
description: value.Description,
start: new Date(parseInt(value.StartAt.substr(6))),
end: new Date(parseInt(value.EndAt.substr(6))),
allDay: value.IsFullDay,
stick: true
});
});
});
}
populate();
//UI- calendar configuration
$scope.uiConfig = {
calendar: {
//height: 450,
height: 650,
editable: true,
displayEventTime: true,
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'today prev,next'
},
timeFormat: {
month: ' ', // for hide on month view
agenda: 'h:mm t'
},
selectable: true,
selectHelper: true,
select: function (start, end) {
var fromDate = moment(start).format('YYYY/MM/DD LT');
var endDate = moment(end).format('YYYY/MM/DD LT');
$scope.NewEvent = {
EventID: 0,
StartAt: fromDate,
EndAt: endDate,
IsFullDay: false,
Title: '',
Description: ''
}
$scope.ShowModal();
},
eventClick: function (event) {
$scope.SelectedEvent = event;
var fromDate = moment(event.start).format('YYYY/MM/DD LT');
var endDate = moment(event.end).format('YYYY/MM/DD LT');
$scope.NewEvent = {
EventID: event.id,
StartAt: fromDate,
EndAt: endDate,
IsFullDay: false,
Title: event.title,
Description: event.description
}
$scope.ShowModal();
},
eventAfterAllRender: function() {
if ($scope.events.length > 0 && isFirstTime) {
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
isFirstTime = false;
}
}
}
};
//This function shows bootstrap modal dialog
$scope.ShowModal = function() {
$scope.option = {
templateUrl: 'modalContent.html',
controller: 'modalController',
backdrop: 'static',
resolve: {
NewEvent: function() {
return $scope.NewEvent;
}
}
};
//CRUD operations on Calendar starts here
var modal = $uibModal.open($scope.option);
modal.result.then(function (data) {
$scope.NewEvent = data.event;
switch (data.operation) {
case 'Save': //save
$http({
method: 'POST',
url: '/Test/SaveEvent',
data: $scope.NewEvent
}).then(function (response) {
if (response.data.status) {
populate();
}
})
break;
case 'Delete': //delete
$http({
method: 'POST',
url: '/Test/DeleteEvent',
data: { 'eventID': $scope.NewEvent.EventID }
}).then(function (response) {
if (response.data.status) {
populate();
}
})
break;
default:
break;
}
}, function() {
console.log('Modal dialog closed');
})
}
}])
app.controller('modalController', ['$scope', '$uibModalInstance', 'NewEvent', function ($scope, $uibModalInstance, NewEvent) {
$scope.NewEvent = NewEvent;
$scope.Message = "";
$scope.ok = function() {
if ($scope.NewEvent.Title.trim() != "") {
$uibModalInstance.close({ event: $scope.NewEvent, operation: 'Save' });
}
else {
$scope.Message = "Event title required!";
}
}
$scope.delete = function() {
$uibModalInstance.close({ event: $scope.NewEvent, operation: 'Delete' });
}
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
}
}])
</script>Update 2 (toujours la même chose):
<script>
var app = angular.module('myapp', ['ui.calendar', 'ui.bootstrap']);
app.controller('CalenderController', ['$scope', '$http', 'uiCalendarConfig', '$uibModal', function ($scope, $http, uiCalendarConfig, $uibModal) {
$scope.SelectedEvent = null;
var isFirstTime = true;
$scope.events = [];
$scope.eventSources = [$scope.events];
$scope.NewEvent = {};
//this function for get datetime from json date
function getDate(datetime) {
if (datetime != null) {
var mili = datetime.replace(/\/Date\((-?\d+)\)\//, '$1');
return new Date(parseInt(mili));
}
else {
return "";
}
}
//Test refresh events in calendar
/////////////////////////////////////////////////////////////////////////
function refreshCalendar() {
clearEvents();
clearCalendar();
//$timeout(function() {
// uiCalendarConfig.calendars.myCalendar.fullCalendar('rerenderEvents');
//});
//uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
//uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events);
//$scope.events.fullCalendar('refetchEvents');
uiCalendarConfig.calendars.myCalendar.fullCalendar('refetchEvents');
//uiCalendarConfig.calendars['myCalendar'].fullCalendar('refetchEvents');
//$scope.myCalendar.fullCalendar('refetchEvents');
//uiCalendarConfig.calendars.myCalendar.fullCalendar('refreshEvents');
//$scope.calendar.fullCalendar('refetchEvents');
//window.calendar.fullCalendar('referchEvents');
}
function clearEvents() {
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
}
// this function clears clender enents
function clearCalendar() {
if (uiCalendarConfig.calendars.myCalendar != null) {
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents');
//uiCalendarConfig.calendars.myCalendar.fullCalendar('refresh');
uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect');
}
}
//Load events from server to display on caledar
function populate() {
clearCalendar();
//debugger;
$http.get('/Test/GetEvents', {
cache: false,
params: {}
}).then(function (data) {
$scope.events.slice(0, $scope.events.length);
angular.forEach(data.data, function (value) {
$scope.events.push({
id: value.EventID,
title: value.Title,
description: value.Description,
start: new Date(parseInt(value.StartAt.substr(6))),
end: new Date(parseInt(value.EndAt.substr(6))),
allDay: value.IsFullDay,
stick: true
});
});
});
}
populate();
//UI- calendar configuration
$scope.uiConfig = {
calendar: {
//height: 450,
height: 650,
editable: true,
displayEventTime: true,
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'today prev,next'
},
timeFormat: {
month: ' ', // for hide on month view
agenda: 'h:mm t'
},
selectable: true,
selectHelper: true,
select: function (start, end) {
var fromDate = moment(start).format('YYYY/MM/DD LT');
var endDate = moment(end).format('YYYY/MM/DD LT');
$scope.NewEvent = {
EventID: 0,
StartAt: fromDate,
EndAt: endDate,
IsFullDay: false,
Title: '',
Description: ''
}
$scope.ShowModal();
},
eventClick: function (event) {
$scope.SelectedEvent = event;
var fromDate = moment(event.start).format('YYYY/MM/DD LT');
var endDate = moment(event.end).format('YYYY/MM/DD LT');
$scope.NewEvent = {
EventID: event.id,
StartAt: fromDate,
EndAt: endDate,
IsFullDay: false,
Title: event.title,
Description: event.description
}
$scope.ShowModal();
},
eventAfterAllRender: function() {
if ($scope.events.length > 0 && isFirstTime) {
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
isFirstTime = false;
}
}
}
};
//This function shows bootstrap modal dialog
$scope.ShowModal = function() {
$scope.option = {
templateUrl: 'modalContent.html',
controller: 'modalController',
backdrop: 'static',
resolve: {
NewEvent: function() {
return $scope.NewEvent;
}
}
};
//CRUD operations on Calendar starts here
var modal = $uibModal.open($scope.option);
modal.result.then(function (data) {
$scope.NewEvent = data.event;
//debugger;
switch (data.operation) {
case 'Save': //save
$http({
method: 'POST',
url: '/Test/SaveEvent',
data: $scope.NewEvent
}).then(function (response) {
if (response.data.status) {
populate();
refreshCalendar();
// //$scope.calendar.fullCalendar('render');
// //$scope.calendar.fullCalendar('refetchEvents');
}
})
break;
case 'Delete': //delete
$http({
method: 'POST',
url: '/Test/DeleteEvent',
data: { 'eventID': $scope.NewEvent.EventID }
}).then(function (response) {
if (response.data.status) {
populate();
}
})
break;
default:
break;
}
}, function() {
console.log('Modal dialog closed');
})
}
}])
app.controller('modalController', ['$scope', '$uibModalInstance', 'NewEvent', function ($scope, $uibModalInstance, NewEvent) {
$scope.NewEvent = NewEvent;
$scope.Message = "";
$scope.ok = function() {
if ($scope.NewEvent.Title.trim() != "") {
$uibModalInstance.close({ event: $scope.NewEvent, operation: 'Save' });
}
else {
$scope.Message = "Event title required!";
}
}
$scope.delete = function() {
$uibModalInstance.close({ event: $scope.NewEvent, operation: 'Delete' });
}
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
}
}])
</script>Follo également marier ce tutoriel: http://www.dotnetawesome.com/2016/05/part-2-crud-operation-on-fullcalender.html, mais avec le même problème.
Trouvé ce qui n'allait pas avec elle - ne supporte pas entièrement IE.
Il est toujours le même. Merci pour votre réponse! –
Comment insérer/mettre à jour/supprimer un événement? redimensionner/déposer? –
J'utilise le "Ajouter un script pour la fonctionnalité de calendrier" du tutoriel, il se trouve à la fin du code. Mon code est exactement comme le tutoriel. –