カテゴリー別アーカイブ: JavaScript

「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-2

前回「「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1」で基本的な導入方法をお伝えしましたが、今回は簡単なカスタマイズについてお伝えします。

ホームページ制作の多くは「和文」サイトのため、曜日などの表示も「和文」に合わせます。

修正前
06032

 

修正後
06031

?今回はhtmlのheadタグ内に直接scriptを記載しました。
(外部スクリプトを読み込んでいる場合はそちらに記載するほうがベターです)

もともとhead内に以下のscriptがデフォルトで記載されていましたので
$(‘#calendar’).fullCalendar({
ここの直下に以下を追加しました。

dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
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月'],
buttonText: {today: ‘今日’,},

これで和文表記となりました。
ちなみにデフォルトではhtmlのエンコード宣言がされていませんのでちゃんと宣言しましょう。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

 

 

 

 

 

「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1

プログラムは私の分野ではない…とずっと避け続けてきた新米コーダーです。
さて、プログラムはできなくてもいい…と思いながらも日々業務で対面せざるを得ない「JavaScript」。
1から覚えるのは大変だけれどライブラリーを使って試すくらいならできないことではない、ということで、今回は「FullCalendar.js」を使ってGoogleカレンダーをカスタマイズしてみました。

Googleカレンダーを自分のwebサイトに導入したものの、見た目が「THE Google」なので
デザイン的にはなんともお粗末…なんて思ったことはありませんか?
そんなときスバラシイ仕事をしてくれるのが「FullCalendar.js」。
こちらをちょっ書き足してあげることで「THE Google」デザインとはオサラバ~~~。
「JavaScript」わかりません…というあなたでも、きっと簡単に導入できますよ!

それでは作成方法を記載していきましょう。

その1:「FullCalendar.js」を入手
まず、「FullCalendar.js」を公式サイトからダウンロードして、解凍したら
自分のサーバーへアップしましょう。
その2:htmlファイルを作成
今回はGoogleカレンダーのデザインを「FullCalendar.js」のデフォルトデザインに変更します。
以下のような内容をhtmlファイルに書き込みましょう。
ただし、jsファイルやCSSファイルのパスはアップしたディレクトリによって違います。
今回は自作の(以下に記載した)htmlファイルをルートに、同階層に「fullcalendar」ディレクトリと「jquery」(ダウンロードしたファイル)をアップロードした場合の例になります。 
違う場所にアップロードした方は「link href…」のところのパスの書き方を変更してくださいね。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=’./fullcalendar/fullcalendar.css’ rel=’stylesheet’ />
<link href=’./fullcalendar/fullcalendar.print.css’ rel=’stylesheet’ media=’print’ />
<script src=’./jquery/jquery-1.9.1.min.js’></script>
<script src=’./jquery/jquery-ui-1.10.2.custom.min.js’></script>
<script src=’./fullcalendar/fullcalendar.min.js’></script>
<script src=’./fullcalendar/gcal.js’></script>
<script>

$(document).ready(function() {

$(‘#calendar’).fullCalendar({

// US Holidays
events: ‘ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。’,

eventClick: function(event) {
// opens events in a popup window
window.open(event.url, ‘gcalevent’, ‘width=700,height=600′);
return false;
},
loading: function(bool) {
if (bool) {
$(‘#loading’).show();
}else{
$(‘#loading’).hide();
}
}

});

});

</script>
<style>

body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: “Lucida Grande”,Helvetica,Arial,Verdana,sans-serif;
}

#loading {
position: absolute;
top: 5px;
right: 5px;
}

#calendar {
width: 500px;
height: 450px;
margin: 0 auto;
}

</style>
</head>
<body>
<div id=’loading’ style=’display:none’>loading…</div>
<div id=’calendar’></div>
</body>
</html>

 

以上の記載が終わったら、GoogleカレンダーのURLを入手します。
このURLは単純なURLではなく、カレンダーの設定から入手できるものです。
入手方法は以下の通り。
Googleアカウントにログイン後、カレンダーを開きます。

画面右端上のマークをクリック (↓の画像参照)sample1

カレンダータブをクリックし、自分のアカウントをクリックします。
sample1_02


以下の画面に遷移したら「共有設定を変更」

「カレンダーを一般公開」

「XMLをクリックでURLを入手」
sample3

入手したURLは、さきに紹介したhtmlファイルの
「ここにあなたのGoogleカレンダーから入手したURLを貼り付けます。」の欄に貼り付けます。
以上で終了!

また、今回はわかりやすくstyleをhtmlファイルに記載しましたが、
もちろんCSSに記載すればhtmlファイルはもっとスマートになりますね。
さらなるカスタマイズも可能ですが、それは又次回おつたえします~