カレンダーに予定を登録する方法が分かったので、外部HTMLのセレクトメニューから予定を追加できるようなテストアプリ制作に挑戦

目標としているイメージは、開催日時が複数あるイベントの申し込み画面。セレクトメニューから時間帯を選んで、「登録」ボタンを押したらカレンダー登録の処理に進むような流れを想定している。

さて、まずはこんな感じでHTMLを作成

post.html

<form action="https://script.google.com/macros/s/[ID]/exec" method="post" target="_blank">   <!-- methodはpostで -->

   <label>Let`s study GoogleAppsScript!
      <input type="hidden" name="event_title" value="Let`s study GoogleAppsScript!">
   </label><br/>   <!-- nameはこれにしないといけないルール -->

   <label>Study GAS,only this.
      <input type="hidden" name="event_description" value="Study GAS,only this.">
   </label><br/>   <!-- nameはこれにしないといけないルール -->

   <select name="event_schedule">   <!-- nameはこれにしないといけないルール -->
      <option value="2013/12/01/09:00,2013/12/01/12:00">9:00~12:00</option>
      <option value="2013/12/01/13:00,2013/12/01/16:00">13:00~16:00</option>
      <option value="2013/12/01/16:30,2013/12/01/19:30">16:30~19:30</option>
      <!-- valueは予定の開始日時、終了日時という順序で入力。new Dateできる書き方で -->
   </select>

   <input type="submit" value="予定を作成！">

</form>

ここでは選択肢の違いは時間だけだが、書き方のルールさえ守れば日付などを変えてもOK。input形式も何でもいい（今回はセレクトメニューから選べるようにしたが、イベントの申し込みを想定するなら申し込みが完了して日時が確定した後にカレンダーに登録する流れになりそう）。

これができたらいよいよスクリプトを書いていきたい。

insertEvent.gs

POSTデータを受け取るdoPost関数に処理を書いていく。内容を取り出すこと自体は簡単。
長くなってしまっているのはカレンダー登録用に情報を加工しているため（開始日時と終了日時を一つのnameに入れてしまっている都合上分解が必要）。

function doPost(e){  //このeの中にPOSTされてきた情報が入っている（オブジェクト形式）

//// 今回はe.parameterから各データを取り出している ////
  var event_title = e.parameter.event_title;
  var event_description = e.parameter.event_description;
  
  var event_schedule = e.parameter.event_schedule;  

//// ここからはevent_scheduleを","の前後で分割する処理 ////

  // 元の文字列から開始日時の部分だけを取り出す関数
  function getStart_point(){
    
    var start_point = new String();  // 空の文字列として宣言し・・・・
    
    for(var i=0;event_schedule[i]!=",";i++){
      start_point += event_schedule[i];  // ","まで一文字ずつ足していく
    }
    return start_point;  // 完成した文字列を返す
  }
  // 同じく終了日時の部分を取り出す関数
  function getEnd_point(){
    
    var end_point = new String();
    
    for(var i=getStart_point().length+1;i<event_schedule.length;i++){
    // iの初期値は上で取り出した文字数+1（この+1は","があるため）。
      end_point += event_schedule[i];
    }
    return end_point;  // 上に同じ
  }
  // 使いやすいようにそれぞれ変数にしてしまう  
  var start_point = getStart_point();
  var end_point = getEnd_point();

//// 出来上がった材料を使って予定登録の処理を行う（詳細は後述） ////  
  createSchedule(start_point,end_point,event_title,event_description);

}

HTML側で一つのnameに二つのvalueを入れられたら楽なのだが・・・・そんなことできるのだろうか？

ともあれ、これでいよいよ予定登録の処理に進める

function createSchedule(start,end,title,description){  // doPost内で作った材料が引数

//// 開始日時、終了日時をDateに変換 ////
var schedule_start = new Date(start);
var schedule_end = new Date(end);
  
//// 前の投稿を参考にして予定を登録する処理を書く・・・・２行だけだが ////  
  var cal = CalendarApp.getDefaultCalendar(); 
  
  cal.createEvent(title,schedule_start,schedule_end,{'description':description,'location':null});
  
}

できた。

あとは登録後のリダイレクトをどうにかしたい。
現時点ではHTMLのフォームで送信ボタンをしたら新規のウィンドウが開くようになっていて処理が終わったらもうそのウィンドウは自動的に閉じたいのだけれど、テンプレートを使ってもwindow.close()ができないみたいでちょっと困っている。