FullCalendarにGoogleカレンダーを読み込む方法

公開日: : JavaScript, jQuery

FullCalendarにGoogleカレンダーのイベントを読み込んでみました。

 

gcal.jsの読み込み

Goolgeカレンダーのイベントを読み込むには、jQueryとFullCalendarのjsファイルを指定した後にgcal.jsファイルを指定する必要があります。

 

Googleカレンダーの読み込み

eventSourcesに複数のカレンダーを読み込むことができます。
今回は公開されている「沖縄IT勉強会カレンダー」と「日本の祝日」を読み込んでみました。

「日本の祝日」の方では背景色などを変更して、「沖縄IT勉強会カレンダー」と見た目を変変えています。

 

Googleカレンダーを読み込むデモ

[CodePen height=700 show=result href=ewcuD user=iw3 ]

 

 

 

ad

関連記事

8937324062_e417d7866f_o

台湾の女子学生制服マップの写真を並べてみた

ロケットニュース24で絶賛されている台湾の女子学生の写真をjQuery Masonryプラグインを使

記事を読む

By: Bex Walton

閏年(うるうどし)を調べる関数

Wikipediaの情報を参考に閏年を判定する関数を作成してみました。   仕様 西

記事を読む

By: Gabriela Pinto

WebRTCのgetUserMediaでビデオ出力する方法

チャットワークのビデオ会議機能で使われている技術ということで調べてみました。 WebRTC(Web

記事を読む

By: Edwart Visser

jQuery UI のダイアログで jQuery Validation を使う方法

リアルタイムフォームバリデーションが行えるjQuery Validationを使ってみました。 発生

記事を読む

pics 006

JavaScriptからASP.NETのWebMethod(PageMethod)を呼び出す方法

ジェネリックハンドラー(.ashx)やWCFサービス(.svc)を試してみましたが、PageMeth

記事を読む

By: USAG- Humphreys

JavaScriptライブラリーのCDN利用、フォールバック対応しました

かぶめもで使用しているJavaScriptライブラリーのCDN利用、フォールバック対応を行いました。

記事を読む

Business Calendar & Schedule

FullCalendarの日本語化やオプションいろいろ

Google Calendarライクなカレンダーと噂のFullCalendarの使い勝手が知りたくて

記事を読む

ad

ad

By: cea +
24時を超えた時刻を入力できるテキストフィールドを作ってみた

時刻を入力するためのフィールドをVaadinのTextFieldを継承

By: GotCredit
Vaadin+Spring Bootでログイン画面を作成

Spring BootをベースにVaadinでログイン画面を作ってみま

lombok cant find ide
Spring Tool SuiteへLombokをインストールする方法

下記のURLから"lombok.jar"をダウンロードします。 ht

Spring Tool Suite
Spring Tool Suiteのインストールと日本語化

 Spring Tool Suiteのインストール 下記のURLから

spotlight -> terminal
ターミナルの起動方法

Spotlightから起動する "control"キーを押しな

→もっと見る

PAGE TOP ↑