สร้าง Google Apps ด้วย html file เก็บข้อมูลใน Sheet ลงใน Google Calendar
สิ่งที่ต้องมี
- Google calendar
- Google Sheet
- html file
อันดับแรกไปที่ปฏิทินของเราครับ
ไปที่เมนูตั้งค่า รูปฟันเฟือง
ต่อมาไปที่ตั้งค่าปฏิทิน ถ้าอยากสร้างปฏิทินใหม่ก็ได้ หรือ ให้ sync ลง ปฏิทินหลักของเราเลยก็ได้
คัดลอกรหัสปฏิทินไว้ ครับ
ขั้นตอนต่อไป ให้ไปสร้าง Google Sheet ครับ
สร้างประมาณนี้นะครับ สำหรับปฏิทินกิจกรรม
ขั้นตอนต่อไป ไปที่ เมนู เครื่องมือ --> โปรแกรมแก้ไขสคริป
นำ Code ต่อไปนี้ไปใส่ใน Code.gs
Google Script Code.gs
function doGet(e){
var op = e.parameter.action;
var ss = SpreadsheetApp.openByUrl("#ลิงค์GoogleSheet#");
var sheet = ss.getSheetByName("#ชื่อSheet#");
if(op == "insert")
return insert_value2(e,sheet);
}
function insert_value2(request,sheet){
//ส่วนนี้คือ Parameter จาก html file
var name = request.parameter.name;
var day = request.parameter.day;
var startdate = request.parameter.startdate;
var enddate = request.parameter.enddate;
//จบ Parameter จาก html file
// จัดการข้อมูลลงใน Google Sheet
var rowData = sheet.appendRow([new Date(),name,day,startdate,enddate]);
meetingRoomBooking() //รัน Function ส่งค่าลงปฏิทิน
return ContentService
.createTextOutput(request.parameter.callback+"("+result+")")
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
function meetingRoomBooking() { //Function ส่งค่าลงปฏิทิน
//Set data from Spread Sheet
var spreadSheetID = "#IDGoogleSheet จาก URL#";
//https://docs.google.com/spreadsheets/d/xxxxxx1MjfYVL4BxP0Oj52c9xxNiE5ehVxxxEX1kQb-5mZ-6Etxb19Ts/edit#gid=0
//ID = xxxxxx1MjfYVL4BxP0Oj52c9xxNiE5ehVxxxEX1kQb-5mZ-6Etxb19Ts
var ss = SpreadsheetApp.openById(spreadSheetID);
var sheet = ss.getActiveSheet();
var lastRow = sheet.getLastRow();
var lastColumn = sheet.getLastColumn();
//Set data for Google Calendar
var name = sheet.getRange(lastRow, 2).getValue();
var Title = sheet.getRange(lastRow, 3).getValue();
var startDate = new Date(sheet.getRange(lastRow, 4).getValue());
var endDate = new Date(sheet.getRange(lastRow, 5).getValue());
//Creates a calendar event using the submitted data
var calendar = CalendarApp.getCalendarById("#ID ปฏิทิน#");
var titles = (Title + ' ' + 'โดย.' + name);
var descriptions = (Title + ' ' + 'โดย.' + name);
calendar.createEvent(titles, startDate, endDate, {description: descriptions});
}
เลือกตามนี้เลยครับ
พอกด อัปเดท ระบบจะถามตรวจสอบสิทธิในการเขียนลง Google Sheet และ Calendar ครับ ให้ทำการตอบให้ผ่านไปครับ
เลือกขั้นสูง
กด อนุญาต
เสร็จแล้วจะได้ URL APP
คัดลอกมาใส่ใน html file ที่เราจะสร้างขึ้นตาม Code นี้เลย
บันทึกเป็น .html เช่น add_calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>เพิ่มปฏิทินพัฒฯยุทธ์</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Favicon Icon -->
<link rel="icon" type="image/png" href="assets/img/favcion.png" />
<link rel="icon" href="assets/img/favcion.png" type="images/x-icon"/>
<script>
var script_url = "#URLลิงค์ของ Google Script ที่แปลงเป็นเว็บ#";
function insert_value2(){
var name = $("#name").val();
var day = $("#day").val();
var startdate = $("#startdate").val();
var enddate = $("#enddate").val();
var url = script_url+"?callback=ctrl&name="+name+"&day="+day+"&startdate="+startdate+"&enddate="+enddate+"&action=insert";
var request = jQuery.ajax({
crossDomain: true,url: url,method: "GET",dataType: "jsonp"
});
document.getElementById("name").value="";
document.getElementById("day").value="";
document.getElementById("startdate").value="";
document.getElementById("enddate").value="";
}
</script>
</head>
<body>
<div class="w3-container w3-card w3-theme">
<h1>บันทึกกิจกรรมปฏิทินกลุ่มงานพัฒนายุทธ์</h1>
</div>
<div class="w3-container w3-card">
<hr>
<div class="w3-cell-row">
<form>
<label for="fname">ผู้เพิ่ม * (กรอกรายชื่อผู้ทำกิจกรรมมีหลายคนใช้ , คอมม่า)</label>
<input type="text" id="name" name="name" placeholder="Your name.." class="w3-input">
<label for="lname">เรื่องกิจกรรม *(เรื่อง/กิจกรรม/สถานที่)</label>
<input type="text" id="day" name="day" placeholder="กิจกรรมและสถานที่" class="w3-input">
<label for="lname">วันที่เริ่มต้น *</label>
<input type="datetime-local" id="startdate" name="startdate" class="w3-input">
<label for="lname">วันที่สิ้นสุด *</label>
<input type="datetime-local" id="enddate" name="enddate" class="w3-input">
<hr>
<input type = "button" id="b1" onClick="insert_value2()" value = "ส่งการแจ้งเตือน" class="w3-btn w3-block w3-blue"></input>
</form>
</div>
<hr>
</div>
<div class="w3-container">
<h3>By Ioffer Butsart</h3>
</div>
</body>
เมื่อกดบันทึก ระบบก็จะเพิ่มข้อมูลใน Google Sheet
พอไปดูใน Google Calendar ก็จะมีข้อมูลขึ้นมาทันทีครับ
ส่วนบทความนี้ก็เสร็จสิ้นครับ บทความถัดไปมีโอกาสจะมาเขียนเรื่องแจ้ง Line Notify จาก Google Calendar ครับ
สร้าง Google Apps ด้วย html file เก็บข้อมูลใน Sheet ลงใน Google Calendar
Reviewed by IOffer
on
กันยายน 28, 2563
Rating:
Reviewed by IOffer
on
กันยายน 28, 2563
Rating:
ไม่มีความคิดเห็น:
แสดงความคิดเห็น