メモ的ブログ: ★超入門編★Googleカレンダーと同期するFull Calendarを使ってみる!!

Googleカレンダーをホームページに表示したい!!でも見た目がイマイチなので、躊躇していました。

複数のサイトがあると一元管理できれば最高+理想=ベストです。

Googleカレンダーを更新するとホームページ上の予定も変更してくれる。

予定の曜日などが固定であれば、探せばなんとかなりますが、不定期な場合は、Googleカレンダー同期がベストです。

当方は、WEB屋でもなくプログラマーでもない、ただの素人ですので超初心者目線で説明(成長)していきましょう!!

というわけで前置きはさておき、設定方法について説明しましょう。

今回使用するのは"FullCalendar"というものJavaScriptやらを使用して表示さすようです。

※超有名ですので情報は多々ございます。

fullcalendar-2.1.1.zipをダウンロード

ダウンロードしたファイルを右クリックで"すべてを展開"

解凍したしたファイルを開きます

初心者の僕を迷わしたのは、ここです。ファイルがいっぱい。。。ここで最初の壁です。。。。

まずはサンプルをみるために、DEMOをクリック

今回使うファイルは"gcal"というファイルです。ダブルクリックするとブラウザで見られます。

デモページはこんな感じで、Googleカレンダーよりもシンプルで良い感じ!!

本題に戻り自分のカレンダーを同期できるようにしましょう!!

gcalのファイルを右クリックでメモ帳などで開くと

(メモ帳での開き方がわからない方は、右クリック>プログラムから開くを選択)

このようなHTMLになっているので青くしたところを後ほど利用します。

カレンダーの設定

・Googleカレンダーを開いて、右上の歯車をクリック

・設定>カレンダー>新しいカレンダーの順にクリック

今回はテスト用に新規のカレンダーを作るので既存のカレンダーを使う場合は、スキップです。

そして同期させたいカレンダーをクリック

下の方にある、カレンダーのアドレスの"XML"をクリック

アドレスがでてくるので、後でしようするので、コピペするなりどこかにメモです。

同期確認するために、仮にGoogleカレンダーに予定を入れておきます。

これでカレンダーの設定は終了です。

次はHTML編

gcalのファイルをメモ帳などで開きます。僕はFreeのTerapad使ってます。

訳の分からないHTMLが出現してきますが

httpsから始まる部分を先ほどメモったカレンダーアドレスを入力。

上書きするとアレなんで、好きなファイル名.htmlでgcalと同じファルダ内に保存してみましょう。

保存したファイルをブラウザで開けてみると、

あら不思議、無事に同期成功です。

簡潔に言うと

***************************************************************************

<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<link href='../fullcalendar.css' rel='stylesheet' />
	<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
	<script src='../lib/moment.min.js'></script>
	<script src='../lib/jquery.min.js'></script>
	<script src='../fullcalendar.min.js'></script>
	<script src='../gcal.js'></script>
	<script>

	$(document).ready(function() {

	$('#calendar').fullCalendar({

	// US Holidays
	events: 'ココにカレンダーのアドレス',

	eventClick: function(event) {
	// opens events in a popup window
	window.open(event.url, 'gcalevent', 'width=700,height=600');
	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>

*********************************************************************************

上の黄色の部分は、ファイルの保存場所によって変わってくるのでご注意を。

今回のケースではこのままでOKです。

次回は

カスタマイズ編です!!

メモ的ブログ