アトリエコハク

アトリエコハク

兵庫県但馬のホームページ制作アトリエ

>
>
  • ウェブデザイン

Jquery FullCalendarをgoogle カレンダーと同期する。

スポンサーリンク

Jqueryのカレンダー。現在Fullcalendarを使うお仕事をしています。
使い方を勉強しましたのでちょっと書き留めておきます。
googleカレンダーの味気ない見た目をお好みにカスタマイズできるとっても便利なプラグインです。
では使い方を見て行きましょう。
まずはこちらからfullcalendarをダウンロード。http://fullcalendar.io/download/
そして<head>から</head>の間に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- full calendar -->
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
<!-- /full calendar -->

<body>部分にはこちらを記述。
google カレンダーのapiキーと、公開するカレンダーのカレンダーIDが必要になりますので事前に準備しておきます。
公開したいカレンダーの公開設定を一般公開にするのも忘れずに。

<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'ここにapiキーを入力',
events:{
googleCalendarId: 'ここにカレンダーのIDの入力'
},
titleFormat: { // タイトル部分に表示される日付のフォーマット
month: 'YYYY年M月',
day: "YYYY年M月d日'('ddd')'"
},
timeFormat: 'H:mm',// カレンダー内のイベントに表示される時間のフォーマット
// カレンダーの月、日付、曜日のフォーマット
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
});
});
</script>

以上!簡単!
google chromeのデベロッパーツール等を見ながらcssで見た目をカスタマイズしちゃって下さい!

スポンサーリンク