googleカレンダーを並べて表示

予定管理にgoogleカレンダーを使用している方は多いと思います。googleカレンダーには共有機能があるのですが、使っているでしょうか?

1つ目は、googleアカウントに共有先からの共有urlを取得して、了承する方法があります。

2つ目は、webに埋め込む形で表示する方法です。

しかし、カレンダー数が増えてくると管理が難しく、表示が重なってきます。これを解決するのに、いろいろなソフトが存在しています。けど、ソフト導入はコストもかかりますしね。

googleカレンダーだけでやろうとすれば、必要なカレンダーのチェックを外したりするとできるのですが、手数が多く必要になる。また、色で違いはでるのですが、どれがどの色なのか正直わかりにくいこともあります。そこで、

めっちゃ雑ですが、個別のカレンダーを並べて表示する方法を紹介します。予定が多い場合にちょっと見やすくなると思います。webに埋め込む形を並べているだけですけど、では、、、

データは下記から、コピーしてもらえば、OKです。

グーグルカレンダーを並べて表示_スプレッドシート

コピー方法は、ここ(googleカレンダーの予定を一括で削除する方法)を参考に。

並べて表示の使用方法は、ツールバーのhtml作成のhtml作成をクリックするだけ。

クリックすると、googleドライブ内にtestdata.htmlのファイルが作成され、それをブラウザで開くだけ。

html作成をクリック
googleドライブ マイドライブ
testdata.html

印刷すれば、この画面を印刷できます。

なんでかわかりませんが、個別で見たほうがわかりやすいこともあるんですよね。不思議ですよね。

内容的にはこんな感じです。

ツールのGASのコードは下記の通りです。練習なんでかなり雑ですよね。

var testArray = [];
var Cal_len ='';
var clist = '';

function onOpen(){

  var myMenu=[
    {name:"html作成", functionName:"testhtml"}
  ];
  
  SpreadsheetApp.getActiveSpreadsheet().addMenu("html作成", myMenu) ;

}

function testhtml() {

  calendar();
  template_top();  
  
  //選択されたカレンダーのIDを取得
  for(j = 0; j < Cal_len-3; j++) {
    var a='<iframe src="https://calendar.google.com/calendar/embed?';
    var b='height=350&amp;wkst=1&amp;';
    var c='bgcolor=%23ffffff&amp;ctz=Asia%2FTokyo&amp;';
    var d='src='+clist.getRange(j+3, 2).getValue();
    var e='&amp;src=amEuamFwYW5lc2UjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20';
    var f='&amp;color=%233F51B5&amp;';
    var g='mode=WEEK&amp;showTz=0&amp;showCalendars=0&amp;showTitle=1"';
    var h='style="border-width:0" width="800" height="350"';
    var i='frameborder="0" scrolling="no"></iframe>';
    var k = a + b + c + d + e + f + g + h + i ; 
    testArray.push(k)
  }
    
  template_end();

  DriveApp.createFile('testdata.html',testArray.join("\n"), MimeType.PLAIN_TEXT);

}


function calendar(){
  //関数「GetCalendarList()」と同じ(カレンダー一覧は毎回読み込まないといけないので、ここでも実行)
  clist = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('カレンダ');
  
  //削除されたカレンダーが残らないように、一度カレンダーの一覧を削除
  clist.getRange(1, 1, clist.getLastRow() + 1, 2).clearContent();
  Utilities.sleep(1000);
  //一覧が白紙になった上で、再度最新のカレンダー一覧を取得、作成
  var calendars = CalendarApp.getAllCalendars();
  var range = clist.getRange(1, 1, calendars.length + 1, 2);
  var d = 0 ;
  range.getCell(1, 1).setValue('カレンダ');
  for(i = 0; i <= calendars.length - 1; i++) {
    range.getCell(d + 2, 1).setValue(calendars[i].getName());
    range.getCell(d + 2, 2).setValue(calendars[i].getId());
    d = d + 1;
  }
  Cal_len = calendars.length;
}

function template_top(){
 
  testArray.push("<html>");
  testArray.push("<head>");
  testArray.push("</head>");
  testArray.push("<body>");
  
}

function template_end(){
 
  testArray.push("</body>");
  testArray.push("</html>");
  
}

1~3行目は、グローバル変数で、個別関数間でデータを使いたい場合に設定するといいみたい。

function onOpenは、スプレッドシートを開いたときに実行する関数(関数名で固定)。

メニューバーにhtml作成を追加するだけ。

Mymenuの配列に増やしていけば、html作成にサブメニューを追加できる。

function testhtmlは、htmlファイルを作成する関数。

calendar()関数は、自分のアカウントのカレンダーリストを取得する関数で、カレンダシートにリストを書き出す。

template_top(),tenplate_end()関数はhtmlファイルの最低限のデータを記載する関数で、cssを追加したりもできると思う。

20行目以降は、カレンダー毎のweb埋め込み情報を追記するコード。中身は、googleカレンダー共有のカスタマイズを参考にしてください。高さや幅、色等を設定しています。どのカレンダーにも休日が表示されるように追加しています。srcが2つあるのはそのためです。

で、37行目にhtmlファイルを作成しているだけです。

htmlファイルや配列の書き出しにちょっと苦労しましたけど、これでテキストを書き出す方法がわかったので良かったです。次はJSONの使い方を試したいと思います。

データを表示させたりする場合は、htmlが使いやすいと思いますね。mapも使えるし。けど、細かい設定をやろうと思うとちょっと大変ですよね。

ウェブデザイナーって重要だと感じますね。

クラウドワークスで参考になりそうなデータを探して遊んでみたいと思います。稼げる技術を持ちたいものです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中