[Fullcalendar] 구글캘린더 연동하기

#fullcalendar #달력 #구글캘린더

 

안녕하세요.

Gi-1의 개발일기입니다.

fullcalendar와 관련된 달력개발이 있다면, 간편하게 구글캘린더와 연동하여 사용할 수도 있습니다.

 

 

1. Fullcalendar

https://fullcalendar.io/

FullCalendar - JavaScript Event Calendar

fullcalendar 사이트에 접속하셔서 main.css / main.js / localeds-all.js를 다운받아 연결합니다.

example 파일도 참고할 때 도움이 되는 것 같습니다.

 

(저는 5.11.2버전입니다.)

 

2. 구글캘린더

구글캘린더에서는 당연히 구글아이디와 구글캘린더api키가 필요합니다.

구글캘린더 api키 를 검색하셔서 발급 / 복사해둡니다.

 

3. 연동

HTML

<div id="calendar"></div>

 

 

 

SCRIPT

 

 <script>

document.addEventListener('DOMContentLoaded', function() {

  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {

    googleCalendarApiKey: '구글 API 키',

    locale: 'ko',

    headerToolbar: {

        left : '',

        center: 'prev,title,next',

        right : '',

      },

    dayHeaderContent: function (date) {

      let weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

      return weekList[date.dow];

    },

    titleFormat: function (date) {

      year = date.date.year;

      month = date.date.month + 1;

      week = 'narrow';

      return year + "년 " + month + "월";

    },

    // contentHeight: 850,

    dayCellContent: ({dayNumberText}) => { //일 부분 텍스트 변경

      return dayNumberText.replace('일', '')

    },

    eventSources: [

    {

        googleCalendarId: '구글 ID',

      },

    ]

  });

  calendar.render();

});

</script>

 

headerToolbar 에서는 오늘, 다음달, 이전달 등을 표시할 수 있습니다.

locale : 'ko'는 한국어로 캘린더를 표시하기 위함입니다.

dayHeaderContent의 weeklist를 통해 요일만 영어로 변경할 수 있습니다.

titleFotmat을 이용하여 한국의 년/월을 표시할 수 있습니다.

daycellContent부분에 '일'을 제거하고싶다면 dayNumberText.replace('일','')dmf 이용하여 제거합니다.

[간단한 것들인데 써칭이 어려워서 찾는데 오래 걸리더군요... 필요하신분들에게 도움이 되었으면 좋겠습니다]

 

 

외 css적인 부분은 css로 수정이 가능하며 iframe으로 가져올 시 css수정이 먹히지 않습니다.

 

 

결과화면

 

title은 한국어 / 요일은 영어로 / 일자는 '일'을 제거한 모습입니다.

css는 디자인에 맞춰 수정하였습니다.

간단한 부분이고 script로 컨트롤이 가능하지만.. api딴에서 커버하는것이 좋을것같습니다.

 

일정을 클릭하면 로그인이 된 상태라면 수정도 가능합니다.

html 페이지 내에서 수정이 가능하게끔도 구현이 가능한것 같지만 저는 아직 성공하지못했네요.. 소스들이 구글에 많으니 참고해서 도전해보실분은 도전해보는것도.. 좋다고생각합니다.

저도 ajax와 script를 더 공부하여본 다음 html페이지 내에서 수정하게끔 작업하는 것도 올려보겠습니다.