FullCalendar(달력) 플러그인 사용기
플러그인 주소
작업내용 - 호텔 홈페이지 제작중 관리자에 달력을 이용한 예약 확인 구현
- 기본틀은 Docs 참조
- 영문을 한글로 변환
- 추가 기능 버튼 구현 (남은방)
- 예약등록 및 예약완료로 구분 (남은 방이 0개일때 예약완료가 노출되는 방식)
- 방타입 별로 (VIP, Business) 구분
플러그인 선택조건
- IE 하위호환 여부
- jQuery 충돌문제
- 어느정도의 확장성 지원여부
플러그인을 검색하다보니 WP(워드프로세스) 관련 플러그인들이 대체적으로 쓸만하던데 그 외에는 사실 선택사항이 별로 없었다.
이슈사항 1
개발단의 이슈로 인해 플러그인의 년월일 이동 기능이 비동기 ajax 방식이 아닌 get 값을 통한 페이지 이동방식으로 구현해야 했는데 기존의 년,월,일 이동 버튼으론 하단의 예약 리스트 노출이 불가능했다.
이에대한 해결방안으로 기존 버튼들을 전부 주석처리하고 (쉽게말해서 달력 그 자체만 사용한셈..) 버튼들은 전부 함수로 구현했다.
이슈사항 2
년,월,일, 오늘날짜 버튼을 전부 직접 구현하다 보니 방갯수가 0인 날짜를 찾는게 문제가 됬다.
애초에 차감 방식을 Json 방식으로 하면 편할껄 급하게 처리해야되고 미숙한 부분이라 어거지로 PHP 로 낑겨넣었더니 해당 일자를 관리자페이지가 아닌 예약 계시판에서도 써먹을 방법이 없었다.....
결국 DB에서 뿌려준 데이터를 이용해서 어찌어찌 해결...은 한거 같은데 히스토리가 없다.
이슈사항 3
물론 타 프로젝트랑 겹쳤다지만 그래도 며칠동안 삽질해가면서 만들어논 페이지가 IE8 에서 안나온다.
클라이언트는 거짓말처럼 IE8을 사용중
부랴부랴 Support를 확인해보니 FullCalendar is compatible with:
- Firefox, Chrome, Safari, IE 8+
- jQuery 1.7.1+
- Moment 2.5.0+
분명 IE 8까지는 부분 지원을 하는데 문제가 되니 미천한 실력에 할 수 있는건 검색뿐.. header (...........text/plain..........) 설정도 건들여보고(템플릿이라 헤더하나 바꾸기도 너무 불편하다)
ajax가 문제인가 싶어(부동산작업시 있었던 ajax ie issue) cache도 만져봤으나 ajax 자체는 POST Man Api 로 확인해보니 문제없이 불러오므로 패스
jquery 버전이 문제인가 싶어 1.3(기존 템플릿이 이 버전을 사용중이었다.) -> 1.11.2 등...쓸만한 버전등으로 교체도 해봤지만 역시는 역시 문제해결에는 전혀 도움이 안됬다.
ie ,파폭, 크롬을 키고 console로 js 오류를 점검한다.....하면서도 이건 아닌거 같다 . 저번처럼 ie의 거지같은 js (사실은 정직한) 랜더링이 문제인거 같은데 당최 답이 없다 이럴땐 그냥 무조건 하나하나 지워보고 테스트 하는수밖에...
그래서 결론은?
events: [
{
title: 'Business : =$bus[$i]?>',
start: '=$date?>',
className : 'busClass',
textColor: '#000'
},
{
title: 'ccc',
start: '=$date?>',
className : 'none'
},
{
title: 'VIP : =$vip[$i]?>',
start: '=$date?>',
className : '=$classN2?>',
textColor: '=$txtColor2?>'
}, // <-----요놈
]
중괄호 {} 마지막의 저 콤마......였다.