본문 바로가기

jQuery/FullCalendar

[FullCalendar] 구글 캘린더 hide / show 기능 추가하기 ※ 해당 예제는[FullCalendar] 풀 캘린더와 구글 캘린더 연동하기를 기반으로 작성되었습니다. 01. 풀 캘린더의 addEventSource, removeEventSource 기능을 사용하여 구글 캘린더 데이터를 숨기고 다시 불러오는 기능을 추가해 보자. calendar_google_choice.php 풀캘린더::구글캘린더 한국 공휴일 미국 공휴일 일본 공휴일 loading... 02. 출력결과는 아래와 같이 체크박스를 선택하는 것으로 해당 데이터를 캘린더에서 지웠다 다시 생성할 수 있다. 더보기
[FullCalendar] 풀 캘린더와 구글 캘린더 연동하기 01. 풀 캘린더에서 구글 캘린더의 데이터 값을 받아다 사용하기 위해서는 풀 캘린더에서 제공하는 gcal.js 라이브러리가 필요하다. 02. 구글 캘린더의 캘린더 세부정보에서 캘린더 주소를 복사해 오자. 03. 위에서 복사한 캘린더 주소를 사용하여 아래코드의 googleCalendarId에 기입하는 식으로 아래 코드를 작성해 보자. calendar_google.php 풀캘린더::구글캘린더 loading... 04. 출력결과는 아래와 같이 한국, 미국, 일본의 국가 휴일이 나타나는것을 확인 할 수 있다. 더보기
[FullCalendar] 전월, 익월 버튼 클릭시 날짜값 받아오기. 익월, 전월의 날자값을 받아와야 하는경우가 있다.FullClendar에서 '(익월)'버튼을 클릭하였을경우의해당월의 첫번째 값을 받아오는 예제이다. 01. 전월, 익월 버튼을 클릭하였을 경우 해당월의 날짜값을 받아오는 예제 calendar_month.php 풀캘린더 02. 출력결과① 상단 오른쪽 '' 버튼을 클릭하면 이전, 다음 달로 넘어가게된다. ② '>' 버튼을 클릭하였을때. 다음달의 첫번째 날의 값을 경고창으로 띄우는 것을 볼 수 있다. 더보기
[FullCalendar] eventClick 기능을 사용하여 클릭효과 생성 01. eventClick기능을 사용하면 선택한 이벤트에 클릭 기능을 추가할 수 있다. calendar_eventClick.php 풀캘린더 02. 등록한 이벤트를 클릭하면 아래와같은 순서로 작업이 진행될 것이다. ① 이벤트를 클릭하면 알림창이 뜬다. ② 위 알림창에서 확인 버튼을 클릭하면 지정한 URL의 팝업창이 나타날 것이다. 더보기
[FullCalendar] eventRender를 이용한 해당일에 이미지 나타내기 01. eventRender를 이용하여 FullCalendar의 특정날짜에 이미지를 추가하여 보자. 코드는 아래와 같다. calendar_images.php 풀캘린더 02. 출력결과 더보기