สวัสดีครับ กลับมาพบกันอีกครั้งในบทความนี้จะขอแนะนำ การใช้งาน 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.10.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.10.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.10.0/gcal.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listYear'
},
displayEventTime: false, // don't show the time column in list view
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'ADD Google Calendar Key API',//Add Key API
// US Holidays
events: 'your_email@gmail.com',//Add Calendar ID
eventClick: function(event) {
// opens events in a popup window
alert(event.title);
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#loading {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading'>loading...</div>
<div id='calendar'></div>
</body>
</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 ของเราด้วย
