常連

### 前提・実現したいこと
Googleカレンダーapiを使って、カレンダーから予定を取得したいです。

[こちら](https://techacademy.jp/magazine/25405)を参考に、Monacaを使って作っており、このサイトに載っているサンプルコードは正常に動作しました。

しかし私がしたいことはカレンダーから予定を取得することなので、サンプルコードのカレンダーIDを日本の休日のものから、自分のカレンダーIDに変更したところ、404エラーを出すようになりました。
(カレンダーIDは[Googleカレンダートップ](https://calendar.google.com/calendar/) > マイカレンダー > テスト用に新しく作成したカレンダーのオーバーフローメニュー(三つの点のアイコン) > 設定と共有 > カレンダーの統合 > カレンダーIDの手順で取得しました)

404エラーを出さないようにするためにはどのようにすればいいでしょうか？

### 試したこと
・apiに渡しているURLにアクセスしてみると以下のような結果になったため、ページが存在していないわけでは無さそうでした。
```
{
  "error": {
    "code": 403,
    "message": "The request is missing a valid API key.",
    "errors": [
      {
        "message": "The request is missing a valid API key.",
        "domain": "global",
        "reason": "forbidden"
      }
    ],
    "status": "PERMISSION_DENIED"
  }
}
```

・[apiのドキュメント](https://developers.google.com/calendar/v3/reference/events/list)の横にある「Try this API」の部分でソースコードで使用しているcalendarIDを使って試したところ、ちゃんと予定が取得できました。

・[エラー一覧の404の項目](https://developers.google.com/search/apis/indexing-api/v3/core-errors?hl=ja#NOT_FOUND)を確認しましたが、原因がよく分かりませんでした。

### 該当のソースコード

```HTML
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://apis.google.com/js/api.js"></script>
    <script>
      var calendar_api_key = 'xxxxxxxxxxxxxxxxx';
      var calendar_id = 'xxxxxxxxxxxxxxx@group.calendar.google.com';
      var event_url = 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(calendar_id) + '/events';

      function start() {
        console.log(event_url);
        gapi.client.init({
          'apiKey': calendar_api_key,
        }).then(function() {
          return gapi.client.request({
            'path': event_url
          })
        }).then(function(response) {
          let resultArea = document.getElementById('resultArea');
          let items = response.result.items;
          for(let i = 0; i < items.length; i++){
            console.log(items[i].summary + ' ' + items[i].start.dateTime);
          }
        }, function(reason) {
          console.log('reason: ' + reason.result.error.errors[0].reason);
          console.log('ErrorCode: ' + reason.result.error.code);
          console.log('Error: ' + reason.result.error.message);
        });
      };
      gapi.load('client', start);

    </script>
</head>
<body>
    <div id='resultArea'></div>  

</body>
</html>

```

**出力結果**
reason: notFound
ErrorCode: 404
Error: Not Found

### 環境
Monaca
使用言語：JavaScript

Google calendar apiで404になる

### 実現したいこと
GAS初心者です。
Googleスプレッドシートにリスト化した予定をGASを使ってGoogleカレンダーに登録したいです。
もし修正方法がわかる方がいましたら教えていただけますと幸いです。


### 前提
スプレッドシートでは、「D54:I154」のセルに「D列：タイトル」、「E列：日付」、「F列：開始」、「G列：終了」、「H列：ゲスト」、「I列：詳細（カレンダーのメモに記載したい内容）」をリスト化しています。
※リストが「D54:I154」と中途半端なセルになっているのは、他のセルでプルダウン方式で予定を入れ、その内容を「D54:I154」にまとめるように関数を組んでいるためです。


### 発生している問題・エラーメッセージ

```
エラーメッセージ
エラー	
Exception: The parameters (String,String,String,(class)) don't match the method signature for CalendarApp.Calendar.createEvent.
　(匿名) 　　　　　　  @ CreateSchedule.gs:19
CreateSchedules	@ CreateSchedule.gs:12

### 該当のソースコード
19行目　calendar.createEvent(title, start, end, {
12行目　schedules.forEach(function(schedule) {
を記載しています。

念のためにコードの全文載せておきます。↓
function CreateSchedules() {
  // スプレッドシートを取得する
  var sheet = SpreadsheetApp.getActiveSpreadsheet();

  // 予定の情報を取得する
  var schedules = sheet.getRange("D54:I154").getValues();

  // カレンダーを取得する
  var calendar = CalendarApp.getCalendarById("自分のGoogleアカウント");

  // 予定を追加する
  schedules.forEach(function(schedule) {
    var title = schedule[0];
    var start = schedule[1] + "T" + schedule[2];
    var end = schedule[1] + "T" + schedule[4];
    var guests = schedule[5];
    var description = schedule[6];

    calendar.createEvent(title, start, end, {
      guests: guests.split(","),
      description: description,
    });
  });
}

###  試したこと

同様な質問をされている方も多くおられて、そこの回答通りにソースを変更してみましたが変わらずエラーが出てしまいます。



Googleスプレッドシートにリスト化した予定をGASを使ってGoogleカレンダーに登録

Google SpreadSheet のDATEVALUE関数のように
日付からシリアル値を出す方法を教えてください。

色んな記事を見たのですが時間込みでのシリアル変換をしていて、
2022/01/01の日付だけの変換例は見当たりませんでした。

よろしくお願いします。

```GAS
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 開始日の取得
    var dts = sheet.getRange(6,11).getValues();
    var dt = new Date(dts);
```

GASで、日付をシリアル値に変換する方法について

### 実現したいこと

Googleフォームから送信した内容で
スプレッドシートに反映された回答内容から
GASを使って、Googleカレンダーへ予定を作成する

### 前提
一度実装ができたので、フォームの入力形式を少々変更し再度実装に挑んでいる最中でした。

### 発生している問題・エラーメッセージ
やはり９行目でエラーが出ます、、、

### 該当のソースコード
今実装中のコード
function createEvent(e) {
//エラー防止のため、以下の5行を追加
if (e === undefined) {
console.log('このスクリプトは、エディタから実行できません。');
console.log('フォームに回答してみてください。');
return;
}
const items = [];
const itemResponses = e.response.getItemResponses();
for (const itemResponse of itemResponses) {
items.push(itemResponse.getResponse());
}
let [ abouttime, YYYY, MM, DD, hoursS, minutesS, hoursE, minutesE] = items;
let id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@group.calendar.google.com';
let calendar = CalendarApp.getCalendarById(id);
let title = abouttime;
let startTime = new Date(YYYY + MM + DD + hoursS + minutesS);
let endTime = new Date(YYYY + MM + DD + hoursE + minutesE);
// ▼勤務内容
// 送信日時: ${timestamp}
// 勤務日: ${YYYY}/${MM}/${DD}
// 開始時間: ${hoursS}:${minutesS}
// 終了時間: ${hoursE}:${minutesE}
// 時間帯: ${abouttime}`;

calendar.createEvent(title, startTime, endTime);
}



Googleフォームから送信した内容で スプレッドシートに反映された回答内容から GASを使って、Googleカレンダーへ予定を作成する

Googleカレンダーに入力される情報をスプレッドシートへの自動で蓄積されるようにしたいです。

スクリプト実行ボタンを使わず完全自動化させたいです。GASを使用するのかと思いますが、完全初心者で全くわかりません。プログラムを書かなくても実行できるなはそれでも良いです……。

Googleカレンダーに入力される情報をスプレッドシートへの自動で蓄積されるようにしたいです。

### 前提・実現したいこと

FullCalendarでgoogleCalendarを読み込んで、床屋さんの予約状況・定休日を表示しています。
その際、「予約不可」「定休日」「残りわずか」などを色分けして、ぱっと見でわかりやすくしたいと思いますが、イベントタイトルを判別して背景色を変更することは可能でしょうか。
イベント名を判別して個別にクラス名をつけたらいいのかと思い、調べて記述してみたんですが動作しません。
ご教授いただけると幸いです。

### 試してみたソースコード

```Java Script
eventRender: function (event, element) {
    element.addClass("fc-" + event.title.replace(/\s+/g, "_"));
}
```

### 現状の記述

<script src='/js/main.min.js'></script>
<script src='/js/ja.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      dayCellContent: function(e) {
        e.dayNumberText = e.dayNumberText.replace('日', '');
      },
      initialView: 'timeGridWeek',
      nowIndicator: true,
      headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek'
      },
      locale: 'ja',
      firstDay: 1,
      views: {
        timeGridWeek: {
          slotMinTime: '09:00:00',
          slotMaxTime: '20:00:00'
        }
      },
      height: 'auto',
      navLinks: false, // can click day/week names to navigate views
      selectable: false,
      selectMirror: false,
      dayMaxEvents: true, // allow "more" link when too many events
      displayEventTime: true, // don't show the time column in list view
      slotLabelFormat: {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: false,
        meridiem: 'short'
      },
      googleCalendarApiKey: 'APIキー',
      events: 'カレンダーID',
      eventClick: function(arg) {
        // opens events in a popup window
        //window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');
        arg.jsEvent.preventDefault() // don't navigate in main tab
      },
      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      },
      eventRender: function (event, element) {
      	element.addClass("fc-" + event.title.replace(/\s+/g, "_"));
      }
    });
    calendar.render();
  });
</script>

### 補足情報（FW/ツールのバージョンなど）
FullCalendarのバージョンはv5.6.0です。

FullCalendarでイベント名ごとに背景色を変えたい

## やりたいこと
ReactでGoogle Calender APIを実装しようとしています。
こちらのサイトを参考にしました。
[JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】 \| TechAcademyマガジン](https://techacademy.jp/magazine/25405)
このサイトと同じように、画面に日本の祝日一覧をテキストで表示させたいです。
```App.js
import { Component } from 'react';
import * as React from 'react';

import './App.css';

require('https://apis.google.com/js/api.js')

function App() {
        
    const API_KEY = '/*自分のAPIキー*/'
    const CALENDAR_ID = 'ja.japanese#holiday@group.v.calendar.google.com';

    function start() {
      gapi.client.init({
        'apiKey': API_KEY,
      }).then(function() {
        return gapi.client.request({
          'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events'
        })
      }).then(function(response) {
        let resultArea = document.getElementById('resultArea');
        let items = response.result.items;
        for(let i = 0; i < items.length; i++){
          resultArea.insertAdjacentHTML('beforeend', items[i].summary + items[i].start.date + '<br>');
        }
      }, function(reason) {
        console.log('Error: ' + reason.result.error.message);
      });
    };

    gapi.load('client', start);

    

  return (
    <div className="App">
      {<button onClick={() => gapi.load('client', start)}>Events</button> }
    </div>
  );
}

export default App;
```
## 困っていること
https://apis.google.com/js/api.js を読み込む必要があるのですが、うまく読み込めていないせいか
```エラー
'gapi' is not defined
```
というエラーが出ます。
## 試したこと
[React 外部ライブラリ読み込み方法 \- Qiita](https://qiita.com/syukan3/items/9daf01f3ff3ae107d66a)
上のコードの通り、require('https://apis.google.com/js/api.js') を追加してみましたが、変わりませんでした。

[Reactで、<script>でインポートするタイプのスクリプトをJSX内部で使う方法](https://teratail.com/questions/367580)
こちらにある通り、public/index.html内に<script src="https://apis.google.com/js/api.js"></script>を記述しましたが、変わりませんでした。
```index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
  <title>React App</title>

</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  
</body>

<script src="https://apis.google.com/js/api.js"></script>
</html>
```
プログラミング初心者です。至らないところが多々あると思いますが、お答えいただけると幸いです。よろしくお願いします。


Reactで外部のjsファイルを読み込めない

![イメージ説明](66865bfa70f29f93bf1670e6fc89172c.png)

### 前提・実現したいこと

google apps script を使用してgoogleカレンダーにシフトを登録、色分けをしようとしています。
シフトは登録できたのですがシフトごとの色分け（日勤は赤、入りは青のように）ができません。

### 調べて実行したこと

シフトに色を付けようと次のコードを実行してみたのですが、すべてのシフトに同じ色がついてしまいました。

```
function sampleCode() {
  var color = ORANGE;
  CalendarApp.getDefaultCalendar().setColor(color);
}
```

### 現在のコード
```
function executeInPosting() {
  //==========================================================
  // 設定箇所
  //==========================================================
  var CALENDAR_ID = '@gmail.com';
  var SHIFT1 = '日勤';
  var SHIFT2 = '入り';
  var SHIFT3 = '明け';
  var SHIFT4 = '休み';
  
  var YEAR_COLUMN = 'B';
  var MONTH_COLUMN = 'C';
  var SHIFT1_COLUMN = 'D';
  var SHIFT2_COLUMN = 'E';
  var SHIFT3_COLUMN = 'F';
  var SHIFT4_COLUMN = 'G';
  //----------------------------------------------------------
  
  var sheet = SpreadsheetApp.getActiveSheet();
  bottom = sheet.getLastRow();
  
  var year = sheet.getRange(YEAR_COLUMN + bottom).getValue();
  var month = sheet.getRange(MONTH_COLUMN + bottom).getValue();
  var shift1 = sheet.getRange(SHIFT1_COLUMN + bottom).getValue();
  var shift2 = sheet.getRange(SHIFT2_COLUMN + bottom).getValue();
  var shift3 = sheet.getRange(SHIFT3_COLUMN + bottom).getValue();
  var shift4 = sheet.getRange(SHIFT4_COLUMN + bottom).getValue();
  
  var shift1List = String(shift1).split(',');
  var shift2List = String(shift2).split(',');
  var shift3List = String(shift3).split(',');
  var shift4List = String(shift4).split(',');
  
  // シフト1を登録
  for (var i = 0; i < shift1List.length; i++) {
    var dateStr = year + '/' + month + '/' + shift1List[i];
    Logger.log(dateStr);
    var date = new Date(dateStr);
    Logger.log(date);
    createEvent(CALENDAR_ID, SHIFT1, date,);
    Logger.log('createEvent() is done.');
  }
  
  // シフト2を登録
  for (var i = 0; i < shift2List.length; i++) {
    var dateStr = year + '/' + month + '/' + shift2List[i];
    Logger.log(dateStr);
    var date = new Date(dateStr);
    Logger.log(date);
    createEvent(CALENDAR_ID, SHIFT2, date);
    Logger.log('createEvent() is done.');
  }
  
  // シフト3を登録
  for (var i = 0; i < shift3List.length; i++) {
    var dateStr = year + '/' + month + '/' + shift3List[i];
    Logger.log(dateStr);
    var date = new Date(dateStr);
    Logger.log(date);
    createEvent(CALENDAR_ID, SHIFT3, date);
    Logger.log('createEvent() is done.');
  }
  
  // シフト4を登録
  for (var i = 0; i < shift4List.length; i++) {
    var dateStr = year + '/' + month + '/' + shift4List[i];
    Logger.log(dateStr);
    var date = new Date(dateStr);
    Logger.log(date);
    createEvent(CALENDAR_ID, SHIFT4, date);
    Logger.log('createEvent() is done.');
  }
  
}

// カレンダーに終日のイベントを作成
function createEvent(calendarId, title, date) {
  var calendar = CalendarApp.getCalendarById(calendarId);
  calendar.createAllDayEvent(title, date);
}

```

Google カレンダー