Skip to main content

FullCalendar Integrate With Google Calendar API

สวัสดีครับ กลับมาพบกันอีกครั้งในบทความนี้จะขอแนะนำ การใช้งาน Fullcalendar โดยครั้งนี้จะเป็นการเชื่อมต่อกับ Google Calendar Api สำหรับนำข้อมูลที่บันทึกใน Google Calendar มาแสดงใน Fullcalendar ของเราครับ

สำหรับวิธีการสามารถดูได้จาก
https://fullcalendar.io/docs/google-calendar
หากใคร ดูแล้วยัง งง ๆ สามารถทำตามตัวอย่างบทความนี้ได้เลยครับ

สร้าง Google Calendar Key API

ก่อนอื่นไปที่ Google Developer Console  จากนั้นทำการสร้าง Project

ระบุชื่อโปรเจ็กต์ ที่ต้องการ (ตัวอย่างระบุชื่อว่า fullcalendar)
เมื่อสร้างโปรเจ็กต์ เรียบร้อยแล้ว จากนั้น คลิกที่ปุ่ม เปิดใช้ API และ บริการ

จากนั้นค้นหาคำว่า Google Calendar API

จากนั้นคลิก เปิดใช้

เมื่อเปิดใช้งาน Google Calendar API เรียบร้อยแล้ว จากนั้นคลิกที่ปุ่ม ข้อมูลรับรอง ด้านซ้ายมือดังภาพ
เมื่อสร้าง Key API เรียบร้อยแล้ว ให้ Copy ไว้ก่อนครับ เราจะนำ Key API ที่ได้นี้ ไปใส่ใน Code ของ Fullcalendar.html อีกครั้งครับ


เสร็จสิ้นขั้นตอนการสร้าง Google Calendar API Key ครับ ต่อไปเราจะมาตั้งค่าการ Shared ข้อมูล ใน Google Calendar กันต่อครับ

ตั้งค่า Google Calendar Settings and Sharing

ไปที่  Google Calendar
ในหัวข้อ My calendars ตรงเมนูด้านซ้ายมือ  คลิกที่ปุ่มที่มีจุด 3 จุด จะแสดงเมนู Popup ขึ้นมา คลิกเลือกที่ Settings and sharing.
ตรงหัวข้อ Access permissions เลือก Make available to public และ
เลือก See all event details
เสร็จสิ้นขั้นตอนการ ตั้งค่า Google Calendar

การเชื่อมต่อ Fullcalendar กับ Google Calendar

ตัวอย่าง Code ไฟล์ fullcalendar.html

เพิ่มเติมในส่วนของ Code ด้านบน
googleCalendarApiKey ให้ระบุ Google Calendar Key API ที่ เราได้ Copy ไว้ก่อนหน้านี้ครับ

ในส่วนของ events  ให้ระบุ Calendar ID โดยปกติจะเป็น Email ของเราครับ
หรือ สามารถตรวจสอบ Calendar ID ได้ที่ Google Calendar > Settings > Integrate Calendar

ทดสอบการทำงาน ทำการเพิ่มข้อมูลลงใน Google Calendar

จากนั้น ทดสอบการทำงานของไฟล์ fullcalendar.html
หากไม่มีข้อผิดพลาดจะเห็นว่ามีข้อมูลที่เราเพิ่มจาก Google Calendar มาแสดงใน Fullcalendar.html ของเราด้วย