I'm new to programming so I followed this tutorial http://www.mitechdev.com/2016/07/crud-operations-on-angular-ui-calendar.html, but it doesn't refresh the data after submitting the form. The new/modified/deleted data it's displayed after I refresh the page. I also tried ".fullCalendar( 'refetchEvents' )" but with no effect. Basically what I want to do is when I submit the form (closing the modal) the data to be displayed in the calendar. Thank you in advance.
Update - my script here:
<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 (still the same thing):
<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>Also followed this tutorial: http://www.dotnetawesome.com/2016/05/part-2-crud-operation-on-fullcalender.html, but with the same issue.
Found out what was wrong with it - doesn't entirely support IE.
