Google 캘린더 피드를 사용하여 웹 사이트에 예약 된 요일을 표시하는 읽기 전용 월 캘린더를 표시하고 싶습니다. Google 캘린더에 일정이있는 모든 요일은 웹 사이트 캘린더에 강조 표시된 날짜로 표시됩니다. JQuery UI Datepicker가이 작업을 잘 수행 할 수 있습니까? 아니면 더 간단한 달력이 있습니까?Google 캘린더 피드를 사용하는 간단한 캘린더 예약 디스플레이
jQuery UI datepicker 및 Google 캘린더 API V3 이벤트 목록 (api here으로 재생)을 사용했습니다. api 키를 비공개로 유지하기 때문에 작업 예제를 표시하지 않겠습니다. 이 정적 달력처럼 보이도록
나는 기본 (화살표) 커서로 날짜 선택기 인라인 스타일을 표시합니다. Google 캘린더는 json의 이벤트를 반환하고 "beforeShowDay"기능을 사용하여 datepicker의 관련 날짜에 적용합니다.
Google 캘린더 피드에 대해 알아야 할 몇 가지 사항이 있습니다.
모든 단일 이벤트가 모든 날짜를 반환하도록 "singleEvents = true"옵션을 사용했습니다.
"fields = items"옵션을 사용하여 요약 및 날짜와 같은 관련 데이터 만 반환하여 성능을 향상 시켰습니다.
반환 할 날짜 범위를 지정하기 위해 "timeMin"및 "timeMax"옵션을 사용했습니다 (오늘 날짜의 전후로 계산 된 날짜를 사용했습니다). Google은 해당 날짜가 "yyyy-mm-ddT00 : 00 : 00 + 00 : 00"과 같은 형식으로 표시 될 것으로 예상합니다.
반환 된 json에서 하루 종일 이벤트 날짜는 변수 "start.date"및 "end.date"에서 찾을 수 있지만 모든 하루 종일 이벤트의 경우 종료일은 다음 날입니다! 이벤트가 하루 종일이 아닌 경우 "start.dateTime"및 "end.dateTime"변수에서 날짜를 찾아야합니다.
Google의 V3 API를 사용하는 한 가지 이유는 V2와 달리 이벤트 색상 (colorId 변수)을 반환한다는 것입니다. 그러나 색상은 16 진수 값이 아니므로 변환해야하는 정수입니다. .