投稿

ラベル(calendar)が付いた投稿を表示しています

FullCalendarの導入からカレンダー毎の色指定まで

イメージ
2012年7月の拙サイト改装2回目時に既に導入している「 FullCalendar 」について、導入からGoogleカレンダーの複数読込み、カレンダー毎の色指定までをおさらい。基本的な流れはFullCalendarサイトの解説を踏襲。 デフォルト状態 下記改修を施した後 1. ダウンロード Downloadページ から「fullcalendar-1.5.3.zip」をダウンロードして解凍後、自サーバーへアップ。 2. fullcalendarのCSSとJSを読込む <head> タグ内に以下を記述。 <link rel="stylesheet" type="text/css" href=" fullcalendar.css " /> <script type="text/javascript" src=" fullcalendar.js "></script> <script type="text/javascript" src=" fullcalendar.min.js "></script> <script type="text/javascript" src=" gcal.js "></script> 赤字部分は各自の階層に合うように適宜変更。 3. FullCalendarにGoogleカレンダーを読込むためのjQueryを <head> タグ内に記述 必ず <script> タグで囲むこと。 <script type="text/javascript"> $(document).ready(function() { $(' #calendar ').fullCalendar({ // あとでここに色々追記 }) }); </script> 4. <body> タグ内のFullCalendarを挿入したい箇所にID属性を挿入 <...

HOMEページ改装・NEWSページ新設

HOMEページを改装し、新たにイベントカレンダー(文字・活版関連)を追加。googleカレンダーを、jQueryベースのAjax対応カレンダープラグイン「 FullCalendar 」を使用して読み込ませてみました。見た目はCSSとFullCalendar内のjQueryをカスタマイズしてこのサイトに合うようにしています。また、Tumblr APIで「線の博物館」と「文字の雑貨店」の画像を読み込み表示できるように改良。それに伴い、NEWSを新設した NEWSページ に移動しました。 Tumblr APIについては以下を参考にしました(ありがとうございます)。 Tumblr API – JSON 形式で Javascript で読み込み表示する | gutarin API | Tumblr ブログのフッター等にjQueryでTumblrに投稿した画像を表示する - かちびと.net I have added a event calendar of letters and letterpress on HOME page. I use the “ FullCalendar ” that is a jQuery plugin and uses AJAX to fetch events provided by Google Calendar on-the-fly. I customize the calendar style by modifying its CSS and FullCalendar's jQuery. And I have added Tumblr API to show images of “The Museum of Lines” and “The Moji Shop”. In addition to this, I have separated NEWS page from HOME page.