現役WEBコーダーのコーディングテクニックをまとめていますので参考にしてみてください。JavaScript「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1コメントをどうぞプログラムは私の分野ではない...とずっと避け続けてきた新米コーダーです。プログラムはできなくてもいい...と思いながらも日々業務で対面せざるを得ない「JavaScript」。1から覚えるのは大変だけれどライブラリーを使って試すくらいならできないことではない、ということで、今回は「FullCalendar.js」を使ってGoogleカレンダーをカスタマイズしてみました。Google」なのでデザイン的にはなんともお粗末...なんて思ったことはありませんか?そんなときスバラシイ仕事をしてくれるのが「FullCalendar.js」。Google」デザインとはオサラバ~~~。「JavaScript」わかりません...というあなたでも、きっと簡単に導入できますよ!それでは作成方法を記載していきましょう。その1:「FullCalendar.js」を入手まず、「FullCalendar.js」を公式サイトからダウンロードして、解凍したら自分のサーバーへアップしましょう。今回はGoogleカレンダーのデザインを「FullCalendar.js」のデフォルトデザインに変更します。以下のような内容をhtmlファイルに書き込みましょう。jsファイルやCSSファイルのパスはアップしたディレクトリによって違います。今回は自作の(以下に記載した)htmlファイルをルートに、同階層に「fullcalendar」ディレクトリと「jquery」(ダウンロードしたファイル)をアップロードした場合の例になります。href...」のところのパスの書き方を変更してくださいね。‘ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。id=’calendar’></div></body></html>以上の記載が終わったら、GoogleカレンダーのURLを入手します。このURLは単純なURLではなく、カレンダーの設定から入手できるものです。入手方法は以下の通り。Googleアカウントにログイン後、カレンダーを開きます。(↓の画像参照)カレンダータブをクリックし、自分のアカウントをクリックします。入手したURLは、さきに紹介したhtmlファイルの「ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。」の欄に貼り付けます。以上で終了!また、今回はわかりやすくstyleをhtmlファイルに記載しましたが、もちろんCSSに記載すればhtmlファイルはもっとスマートになりますね。