1

我正在使用 angular js & angular-UI/UI-calendar。我想在视图更改（月、周等）时从其余 API 加载事件。在下一个/上一个按钮中，在页面加载时，一切正常。在视图开关上也可以使用 changeView 功能，但未设置数据。

请参阅此链接 - https://angular-ui.github.io/ui-calendar/

我被卡住了，请帮我解决问题所在。

这里我的代码，

$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];
4

1 回答 1

2

如果您想按周和月显示不同的布局或不同的事件。在按月日历中只想显示仅事件计数，而在周视图中也显示信息，那么这个可能会对您有所帮助。

$scope.calendarOptions = {
    contentHeight: 'auto',
    displayEventTime: false,
    themeSystem: 'standard',
    defaultView: 'agendaWeek',
    lazyFetching: false,
    eventSources: [monthEvents, weekEvents],
    header: {
        left: '',
        center: '',
        right: 'month,agendaWeek,prev,title,next'
    },
    buttonText: {
        month: 'Month',
        week: 'Week',
    },
    views: {
        agendaWeek: {
            titleFormat: "DD MMM",
            editable: true,
            eventDurationEditable: false
        },
        month: {
            titleFormat: "MMM YYYY",
            editable: false,
            selectable: true
        }
    },
    viewRender: function (view) {
        $('#fullcalendar').fullCalendar('removeEventSource', monthEvents);
        $('#fullcalendar').fullCalendar('removeEventSource', weekEvents);
        $('#fullcalendar').fullCalendar('refetchEvents');
        $scope.datewise_event_data = [];
        monthEvents = [];
        weekEvents = [];
        var obj = angular.copy($scope.filter);
        var calendar = $('#fullcalendar').fullCalendar('getCalendar');
        var view = calendar.view;
        if (!view) {
            $scope.setFlash('e', "Something Wrong In getting Data.Please Refresh Again");
            return false;
        }
        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") {
            $scope.completeEvents = [];
            weekEvents = [];
            weekly_calenderService.get_calender_week_wise_visits(obj).then(function (res) {
                if (res.data.flag) {
                    $scope.completeEvents = // Make Array here according to your need.
                    weekEvents = $scope.completeEvents;
                    $('#fullcalendar').fullCalendar('removeEventSource', monthEvents);
                    $('#fullcalendar').fullCalendar('addEventSource', weekEvents);
                    $('#fullcalendar').fullCalendar('refetchEvents');
                } else {
                    $scope.setFlash('e', res.data.message);
                }
            })
        } else {
            monthEvents = [];
            $scope.pendingEvents = [];
            weekly_calenderService.get_calender_month_wise_visits(obj).then(function (res) {
                if (res.data.flag) {
                    $scope.pendingEvents = // Make Array here according to your need.
                    monthEvents = $scope.pendingEvents;
                    $('#fullcalendar').fullCalendar('removeEventSource', weekEvents);
                    $('#fullcalendar').fullCalendar('addEventSource', monthEvents);
                    $('#fullcalendar').fullCalendar('refetchEvents');
                } else {
                    $('#fullcalendar').fullCalendar('removeEventSource');
                    $scope.setFlash('e', res.data.message);
                }
            })
        }
    },
    eventDrop: $scope.OnEventDrop,
    eventClick: $scope.OnEventClick,
    eventRender: function (event, element, view) {},
}

在 HTML 中

<div calendar="calendar" ui-calendar="calendarOptions" class="calendar" ng-model="eventSources" id="fullcalendar"></div>

我希望这个对你有帮助。

于 2021-08-11T03:43:24.093 回答