Examples to share some experience in using ui calendar in angular

This article brings you some experience of using ui calendar in angular (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

ui calendar is an angular instruction plug-in that encapsulates fullcalendar

Official address: http://angular-ui.github.io/ui-calendar/

I will not introduce the installation of fullcalendar and ui calendar packages. Download it from Baidu.

After the package is installed, add the path reference

This development environment angular1.x

Call

<p></p>

Configure parameters in the controller

/* config object */
$scope.uiConfig = {
　　calendar: {
　　　　height:..,//容器高度
　　　　editable:..,//是否可编辑
　　　　header: {
　　　　　　right: '',//右边操作按钮
　　　　　　center: 'title',
　　　　　　left: '',//左边操作按钮

　　　　},

　　}

};

$scope.eventSources = [$scope.events];

These are some basic configurations. Please configure others according to your needs.

Let’s talk about some of the problems I encountered during use. First, we must start with the requirements:

1. Product requirements : Daily events are to be sorted by field "x".

2. Filter the view data of different months according to the month.

First of all, let’s solve the first problem. Check whether fullcalendar has a sorting function. I spent a long time on Chinese Baidu, okay, gave up. . . Searching in English, I finally found that the new version of fullcalendar provides a sorting field, and the default is 'title'; so I reinstalled fullcalendar and manually set the sorting method: add a custom sorting field to the data set, such as {title:'111', sort:'22'}, and then add eventOrder:'sort' in $scope.urConfig.calendar. I'm very happy that the first problem is solved!

The second question is to view different month views based on time. Isn’t it enough to just throw the data sets of different months into eventSources? I tried it, uh, the view doesn't change. . . The English search journey began again. . .
Finally found a post, the method is as follows:

1. Inject uiCalendarConfig in the controller, and then uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);calendarMonth needs to be loaded and displayed month, but after calling uiCalendarConfig.calendars.myCalendar is undefined...

Solution:

$timeout(function(){

　　uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);

});

At this step, the basic functions required by the project have been implemented.

Start optimization:

1. Adjust the display interface to Chinese, add lang:'zh-cn' or locale:'zh-cn' in the configuration config, if it still doesn't work, please Upgrade your ui calendar package

2. The view loads very slowly, and the English search takes a long time. . . Complain about it. Haven’t Chinese people encountered this kind of problem? I can’t find it in Chinese searches. . . , finally saw a post:

Change $scope.eventSources = [$scope.events]; to $scope.eventSources = [],

$scope.events is returned and received through the request After uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', $scope.events); was loaded, I tried it. Nice, the slowness problem is solved. . . But a new problem is coming. The view will not clear my last data, which will cause duplicate data!

Finally changed to $scope.eventSources.push($scope.events); Although the problem was solved, the above problem was not solved. . . Expert guidance is welcome!

#The above are some of the problems I encountered during use. . . Hope this helps friends who have the same problem! Record it yourself for later use!

Related recommendations:

Examples detail the methods of value transfer and communication between different components in angular

Displayed in Angular4 Sample code of CSS style

Angular implementation of schedule function (can add and hide display content)Detailed explanation

The above is the detailed content of Examples to share some experience in using ui calendar in angular. For more information, please follow other related articles on the PHP Chinese website!