0

我正在使用角度 ui-calendar 来显示一系列叶子。此数据来自 REST 服务。我也可以向数据库添加休假。问题是当我向数据库添加休假详细信息时,它确实不会自动反映在日历中。如果我刷新页面,数据将被反映。基本上我想要做的是当我提交表单(关闭模式)时要在日历中显示的数据。提前谢谢你。以下是我的代码我的控制器

app.factory('calendarSer', ['$http', '$rootScope', 'uiCalendarConfig', function($http, $rootScope, uiCalendarConfig) {

    return {
        displayCalendar: function($scope) {

            $http.get("rest/leave/holidayList", {}).success(function(data, status, headers, config) {
                $scope.holidayList = data;
                $calendar = $('[ui-calendar]');
                var date = new Date(),
                    d = date.getDate(),
                    m = date.getMonth(),
                    y = date.getFullYear();
                $scope.changeView = function(view) {
                    $calendar.fullCalendar('changeView', view);
                };
                var m = null;
                if ($scope.selectable == "Yes") {
                    m = true;
                } else {
                    m = false;
                }
                /* config object */
                $scope.uiConfig = {
                    calendar: {
                        lang: 'da',

                        height: 400,
                        editable: true,
                        selectable: m,
                        header: {
                            left: 'month basicWeek basicDay',
                            center: 'title',
                            right: 'today prev,next'
                        },
                        eventClick: function(date, jsEvent, view) {
                            $scope.alertMessage = (date.title + ' was clicked ');
                            alert("clicked" + date.title);
                        },

                        select: function(start, end, allDay) {

                            var obj = {};
                            obj.startDate = start.toDate();
                            obj.endDate = moment(end - 1 * 24 * 3600 * 1000).format('YYYY-MM-DD');

                            $rootScope.selectionDate = obj;
                            $("#modal1").openModal();
                            //    calendar.fullCalendar('unselect');
                        },
                        dayRender: function(date, cell) {
                            var today = new Date();
                            today = moment(today).toDate();
                            var end = new Date();
                            end = moment(end).toDate();
                            end.setDate(today.getDate() + 7);
                            date = moment(date).toDate();
                            angular.forEach($scope.holidayList, function(value) {

                                if (((moment(value.holiday_date).format("YYYY-MM-DD")) == moment(date).format("YYYY-MM-DD"))) {
                                    cell.css("background-color", "#2bbbad");
                                    //$('.date').text('Today');
                                    cell.prepend("<span style=\"max-width:200px;word-wrap:break-word;margin-top:10px;\">" + value.description + "</span>");
                                    cell.prepend("<br>")
                                }
                            });
                        },
                        eventRender: $scope.eventRender,
                    }
                };
                console.log($scope.holidayList);
            }).error(function(data, status, headers, config) {
                alert("error from holidaylist");
            });

            $scope.events = [];
            $scope.eventSources = [$scope.events];
            $http.get($scope.url, {
                cache: true,
                params: {}
            }).then(function(data) {

                console.log(data);
                $scope.events.slice(0, $scope.events.length);
                angular.forEach(data.data, function(value) {

                    console.log(value.title);
                    if (value.approvalStatus == "Approved") {
                        var k = '#114727';
                    } else {
                        k = '#b20000'
                    }
                    $scope.events.push({
                        title: value.signum,
                        description: value.signum,
                        start: value.startDate,
                        end: value.endDate,
                        allDay: value.isHalfDay,
                        stick: true,
                        status: value.approvalStatus,
                        backgroundColor: k
                    });
                });
            });
        }
    }

}]);

g-包括

<div id="controllerid">
   <div class="row" >
      <div class="col s10 m10 l10">
         <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
      </div>
   </div>

<!-- Modal Structure -->
<div id="modal1" class="modal" ng-controller="MyAddController">
<div class="modal-content">
   <h4>Apply Leave</h4>
   <div class="row">
      <form class="col s12" id="form1">
         <div class="row modal-form-row">
            <div class="input-field col s6">
               <input id="num" type="text" class="validate" ng-model="test.num"> <label for="num">num</label>
            </div>
            <div class="input-field col s6">
               <input id="ename" type="text" class="validate" ng-model="test.title"> <label for="ename">Employee Name</label>
            </div>
         </div>
         <div class="row">
      <form class="col s12">
      <div class="row modal-form-row">
      <div class="input-field col s5">
      <input id="startDate" type="text" class="validate" value="{{selectionDate.startDate | date}}" readonly  >
      </div>
      <div class="input-field col s5">
      <input id="endDate" type="text" class="validate"  value="{{selectionDate.endDate | date}}" readonly>
      </div>
      <div class="input-field col s1">
      <p>
      <input type="checkbox" id="test6" ng-model="test.isHalfDay" /> <label for="test6">Half Day</label>
      </p>
      </div>
      </div>
      <div class="row">
      <div class="input-field col s12">
      <input id="description" type="text" class="validate" ng-model="test.description"> <label for="description">Description</label>
      </div>
      </div>
      </form>
      </div>
   </div>
   <div class="modal-footer">
      <button class="btn waves-effect waves-light" type="submit" ng-click="add()" name="action"> Submit <i class="material-icons right">send</i>
      </button>
   </div>
</div>
和我的添加控制器
app.controller("MyAddController", function($scope, $http,$rootScope,calendarSer) {
	$scope.test = {};
    $scope.add = function() {
    	$("#modal1").closeModal();
    	$scope.test1=$rootScope.selectionDate;
  
    	var jsonData = JSON.stringify($.extend({}, $scope.test, $scope.test1));
    	console.log(""+jsonData);
    	
    	$http({
    	    url: "rest/leave/create",
    	    method: "POST",
    	    data: jsonData,
    	    headers: {'Content-Type': 'application/json'}
        
        }).success(function(data, status, headers, config) {
            if (data) {
            	console.log("Entered in the add controller");
                $scope.data = data;
                $scope.url="rest/leave/list";
            	  $scope.selectable="Yes";
                calendarSer.displayCalendar($scope);
                $("#popupmodal").openModal();
                console.log("Exited in the add controller");
                
            }
        }).error(function(data, status, headers, config) {
            alert("error from create leave");
        })
    }
});

任何帮助,将不胜感激

4

1 回答 1

0

在运行“create”函数后的“success”函数中,您可以通过内置的“renderEvent”函数使用相同的数据简单地将事件添加到 fullCalendar。

像这样的东西(我不知道 Angular,所以您可能需要稍微调整一下以使您的日历元素进入上下文,但希望您理解这个想法)。我还假设它jsonData包含我们可以用于此的所有相关事件数据:

.success(function(data, status, headers, config) {
            if (data) {
                console.log("Entered in the add controller");
                $scope.data = data;
                //add the event to the calendar UI without refreshing the events
                $('[ui-calendar]').fullCalendar("renderEvent", 
                  {
                    start: jsonData.startDate,
                    end: jsonData.endDate,
                    title: jsonData.title
                  },
                  true //make it stick even when the view changes
               );
                $scope.url="rest/leave/list";
                $scope.selectable="Yes";
                calendarSer.displayCalendar($scope);
                $("#popupmodal").openModal();
                console.log("Exited in the add controller");
            }

您可能需要添加更多字段,或者您可能需要让 momentJS 解析 startDate / endDate 中的值,具体取决于这些字段输出的内容。

“renderEvent”方法可以在这里的 fullCalendar 文档中找到:https ://fullcalendar.io/docs/event_rendering/renderEvent/

于 2017-06-06T10:05:41.273 回答