I'm using angular js & angular-UI/UI-calendar. I want to load events from the rest API when the view is changed (month, week, etc.) In the next/previous button, on page load, everything works fine.Also works changeView function on view switch but data not set.
Refer this Link - https://angular-ui.github.io/ui-calendar/
I am stuck,Please help me out with what's going wrong.
Here My code,
$scope.eventsF = function (start, end, timezone, callback) {
console.log('eventsF');
var obj = angular.copy($scope.filter);
var calendar = $('#calendar').fullCalendar('getCalendar');
var view = calendar.view;
if (!view) {
$scope.setFlash('e', "Something Wrong In getting Data.Please Refresh Again");
return false;
}
console.log(view);
obj.view_name = view.name;
obj.start_date = moment(view.intervalStart._d).format('YYYY-MM-DD');
obj.end_date = moment(view.intervalEnd._d).subtract(1, "days").format("YYYY-MM-DD");
if (view.name == "agendaWeek") {
weekly_calenderService.get_calender_week_wise_visits(obj).then(function (res) {
$scope.mainEvents = [];
if (res.data.flag) {
$scope.pendingEvents = [];
$scope.completeEvents = [];
$scope.missEvents = [];
$scope.savedEvents = [];
var calEvents = [];
_.each(res.data.data, function (nw) {
if (nw.status == 0) {
var date = nw.target_date.split('-');
var in_time = nw.target_intime.split(':');
var out_time = nw.target_outtime.split(':');
} else {
var date = nw.visit_date.split('-');
var in_time = nw.visit_intime.split(':');
var out_time = nw.visit_outtime.split(':');
}
if (nw.status == 0) {
$scope.pendingEvents.push({
title: nw.patient.first + ' ' + nw.patient.last,
event_info: nw,
start: new Date(date[0], (date[1] * 1) - 1, date[2], in_time[0], in_time[1]),
end: new Date(date[0], (date[1] * 1) - 1, date[2], out_time[0], out_time[1]),
className: 'calender-week-badge bg-primary',
allDay: false,
status: 0,
view: obj.view_name
});
}
if (nw.status == 1 || nw.status == 3 || nw.status == 4) {
$scope.completeEvents.push({
title: nw.patient.first + ' ' + nw.patient.last,
event_info: nw,
start: new Date(date[0], (date[1] * 1) - 1, date[2], in_time[0], in_time[1]),
end: new Date(date[0], (date[1] * 1) - 1, date[2], out_time[0], out_time[1]),
className: 'calender-week-badge bg-success',
allDay: false,
status: 1,
view: obj.view_name
});
}
if (nw.status == 2) {
$scope.missEvents.push({
title: nw.patient.first + ' ' + nw.patient.last,
event_info: nw,
start: new Date(date[0], (date[1] * 1) - 1, date[2], in_time[0], in_time[1]),
end: new Date(date[0], (date[1] * 1) - 1, date[2], out_time[0], out_time[1]),
className: 'calender-week-badge bg-danger',
allDay: false,
status: 2,
view: obj.view_name
});
}
if (nw.status == 5) {
$scope.savedEvents.push({
title: nw.patient.first + ' ' + nw.patient.last,
event_info: nw,
start: new Date(date[0], (date[1] * 1) - 1, date[2], in_time[0], in_time[1]),
end: new Date(date[0], (date[1] * 1) - 1, date[2], out_time[0], out_time[1]),
className: 'calender-week-badge bg-warning',
allDay: false,
status: 5,
view: obj.view_name
});
}
})
$scope.mainEvents = $scope.pendingEvents.concat($scope.completeEvents, $scope.missEvents, $scope.savedEvents);
callback($scope.mainEvents);
} else {
$scope.datewise_event_data = [];
$scope.mainEvents = [];
$scope.eventInfoStatus = -1;
$scope.setFlash('e', res.data.message);
}
})
} else {
weekly_calenderService.get_calender_month_wise_visits(obj).then(function (res) {
if (res.data.flag) {
$scope.mainEvents = [];
$scope.pendingEvents = [];
$scope.completeEvents = [];
$scope.missEvents = [];
$scope.savedEvents = [];
_.each(res.data.data, function (nw) {
var date = nw.date.split('-');
if (nw.pending > 0) {
$scope.pendingEvents.push({
title: nw.pending,
event_info: nw,
start: new Date((date[0] * 1), (date[1] * 1) - 1, (date[2] * 1)),
className: 'calender-month-badge bg-primary',
allDay: false,
status: 0,
date: nw.date,
view: obj.view_name
});
}
if (nw.complete > 0) {
$scope.completeEvents.push({
title: nw.complete,
event_info: nw,
start: new Date((date[0] * 1), (date[1] * 1) - 1, (date[2] * 1), 0, 0),
className: 'calender-month-badge bg-success',
allDay: false,
status: 1,
date: nw.date,
view: obj.view_name
});
}
if (nw.missed > 0) {
$scope.missEvents.push({
title: nw.missed,
event_info: nw,
start: new Date((date[0] * 1), (date[1] * 1) - 1, (date[2] * 1)),
className: 'calender-month-badge bg-danger',
allDay: false,
status: 2,
date: nw.date,
view: obj.view_name
});
}
if (nw.saved > 0) {
$scope.savedEvents.push({
title: nw.saved,
event_info: nw,
start: new Date((date[0] * 1), (date[1] * 1) - 1, (date[2] * 1)),
className: 'calender-month-badge bg-warning',
allDay: false,
status: 5,
date: nw.date,
view: obj.view_name
});
}
})
$scope.mainEvents = $scope.pendingEvents.concat($scope.completeEvents, $scope.missEvents, $scope.savedEvents);
callback($scope.mainEvents);
} else {
$scope.datewise_event_data = [];
$scope.mainEvents = [];
$scope.eventInfoStatus = -1;
$scope.setFlash('e', res.data.message);
}
})
}
}
$scope.changeView = function (view, calendar) {
console.log('chnageview');
$timeout(function () {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
$scope.eventsF;
}, true);
};
$scope.renderCalender = function (calendar) {
if (uiCalendarConfig.calendars[calendar]) {
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
};
$scope.calendarOptions = {
height: 500,
displayEventTime: false,
themeSystem: 'standard',
header: {
left: '',
center: '',
right: 'prev,title,next'
},
buttonText: {
month: 'Month',
week: 'Week',
},
views: {
agendaWeek: {
titleFormat: "DD MMM",
editable: true,
},
month: {
titleFormat: "MMM YYYY",
editable: false,
}
},
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
console.log(event);
if (event.event_info.status == 0) {
var start_date = event.start.toISOString();
var end_date = event.end.toISOString();
var obj = angular.copy({
target_date: moment(start_date).format("YYYY-MM-DD"),
target_intime: moment(start_date).format("HH:mm"),
target_outtime: moment(end_date).format("HH:mm"),
id: event.event_info.id
})
weekly_calenderService.change_calender_visit_datetime(obj).then(function (res) {
if (res.data.flag) {
} else {
revertFunc();
$scope.setFlash('e', res.data.message);
}
})
} else {
return false;
}
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
},
eventClick: function (event) {
if (event.view == 'month') {
var obj = angular.copy({
date: event.date,
status: event.status
})
weekly_calenderService.get_calender_datewise_visits(obj).then(function (res) {
if (res.data.flag) {
$scope.datewise_event_data = res.data.data;
$scope.eventInfoStatus = event.status;
console.log($scope.eventInfoStatus);
} else {
$scope.datewise_event_data = [];
$scope.setFlash('e', res.data.message);
}
})
} else {
return false;
}
},
eventRender: function (event, element, view) {
// console.log('test1');
// $compile(element)($scope);
},
}
$scope.eventSources = [$scope.mainEvents, $scope.eventsF];
