각도에서 UI 캘린더를 사용한 경험을 공유하는 예
- 小云云원래의
- 2017-12-28 10:21:302631검색
이 글에서는 각도에서 UI 캘린더를 사용해 본 경험을 소개합니다(권장). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
ui 캘린더는 fullcalendar를 캡슐화한 각도 명령 플러그인입니다
공식 주소: http://angular-ui.github.io/ui-calendar/
fullcalendar 및 ui 설치에 대해서는 소개하지 않겠습니다. 달력 패키지. 바이두에서 다운로드하세요.
패키지를 설치한 후 경로 참조를 추가하세요
이 개발 환경은 angle1을 사용하면서 겪은 몇 가지 문제에 대해 먼저 요구 사항부터 시작해야 합니다.
1 제품 요구 사항: 일일 이벤트를 정렬해야 합니다. 필드 "x"로.
2. 월별로 다른 달의 보기 데이터를 필터링합니다.
먼저 첫 번째 문제를 해결해 보겠습니다. fullcalendar에 정렬 기능이 있는지 확인하십시오. 중국 바이두에서 오랜 시간을 보냈습니다. . . 영어로 검색한 결과 마침내 새 버전의 fullcalendar가 정렬 필드를 제공하고 기본값은 'title'이라는 것을 알았습니다. 그래서 fullcalendar를 다시 설치하고 정렬 방법을 수동으로 설정했습니다. 데이터 세트에 사용자 정의 정렬 필드를 추가합니다. title:'111', sort:'22'}를 추가한 다음 $scope.urConfig.calendar에 eventOrder:'sort'를 추가하세요. 첫 번째 문제가 해결되어 매우 기쁩니다.
두 번째 질문, 시간에 따라 다양한 월별 보기를 보려면 서로 다른 월의 데이터 세트를 eventSources에 던지는 것만으로도 충분하지 않을까요? 시도해 봤는데, 어, 관점은 변하지 않습니다. . . 영어 검색 여행이 다시 시작되었습니다. . .
마지막으로 게시물을 찾았는데 방법은 다음과 같습니다.1. 컨트롤러에 uiCalendarConfig를 삽입한 다음 uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', CalendarMonth);calendarMonth는 로드해야 하는 달입니다. 표시되지만 uiCalendarConfig를 호출하면 Calendars.myCalendar가 정의되지 않습니다...
해결책:
<p ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"></p>
이 시점에서 프로젝트에 필요한 기본 기능이 구현되었습니다.
최적화 시작:
1. 디스플레이 인터페이스를 중국어로 조정하고 구성 구성에 lang:'zh-cn' 또는 locale:'zh-cn'을 추가합니다. 그래도 작동하지 않으면 UI 캘린더를 업그레이드하세요. package
2. 뷰 로딩이 매우 느리고, 영문 검색도 오래 걸립니다. . . 그것에 대해 불평하십시오. 중국 사람들은 이런 문제를 겪지 않았나요? 중국어 검색에서는 찾을 수 없습니다. . . , 마침내 게시물을 보았습니다:
$scope.eventSources = [$scope.events];를 $scope.eventSources = []로 변경하면
$scope.events는 uiCalendarConfig.calendars.myCalendar.fullCalendar를 수신한 후 요청을 통해 반환됩니다. ('addEventSource', $scope.events) 로드하고 사용해 보세요. 좋습니다. 속도 저하 문제가 해결되었습니다. . . 하지만 새로운 문제가 발생하고 있습니다. 보기에서 마지막 데이터가 지워지지 않아 데이터가 중복될 수 있습니다.
결국 $scope.eventSources.push($scope.events);로 변경되었습니다. 문제는 해결되었으나 위의 문제는 해결되지 않았습니다. . . 전문가의 지도를 환영합니다!
위 내용은 제가 사용하면서 겪은 문제 중 일부입니다. . . 같은 문제를 겪고 있는 친구들에게 도움이 되길 바랍니다! 나중에 사용할 수 있도록 직접 녹음해 보세요!
관련 권장 사항:
Angular의 다양한 구성 요소 간 값 전송 및 통신 방법에 대한 자세한 예
Angular4에서 CSS 스타일을 표시하기 위한 샘플 코드
Angular는 일정 기능을 구현합니다(디스플레이 콘텐츠를 추가하고 숨길 수 있음). ) 자세한 설명
위 내용은 각도에서 UI 캘린더를 사용한 경험을 공유하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!