カテゴリー: javascript

fullcalendar.jsで予定が重なったときの表示順番を指定する

すごく優秀なfullcalendar.js。

元々の「fullcalendar.js」では予定が重なった場合に
タイトルを比較してどちらを左に出すのか決めているみたい。

これだと予定に色をつけた場合にタイトルで左右が
決まってしまうから同じ色の予定でも左右バラバラに
表示されて美しくない。

ということでfullcalendar.jsを変更。

function compareSlotSegs(seg1, seg2) {
    return seg1.start - seg2.start || // earlier start time goes first
        (seg2.end - seg2.start) - (seg1.end - seg1.start) || // tie? longer-duration goes first
        (seg1.event.title || '').localeCompare(seg2.event.title); // tie? alphabetically by title
}

もともと週表示では↑のようになっているので

function compareSlotSegs(seg1, seg2) {
    return seg1.start - seg2.start || // earlier start time goes first
        (seg2.end - seg2.start) - (seg1.end - seg1.start) || // tie? longer-duration goes first
        (seg1.event.color || '').localeCompare(seg2.event.color) ||
        (seg1.event.title || '').localeCompare(seg2.event.title); // tie? alphabetically by title
}

↑このように変更。
タイトルで比較する前にcolorプロパティで比較するのを追加。
登録順とかも気にする場合はidとかで比較するのもいいかも。

// A cmp function for determining which segments should appear higher up
function compareDaySegments(a, b) {
    return (b.rightCol - b.leftCol) - (a.rightCol - a.leftCol) || // put wider events first
        b.event.allDay - a.event.allDay || // if tie, put all-day events first (booleans cast to 0/1)
        a.event.start - b.event.start || // if a tie, sort by event start date
        (a.event.title || '').localeCompare(b.event.title) // if a tie, sort by event title
}

↑月表示側も

// A cmp function for determining which segments should appear higher up
function compareDaySegments(a, b) {
    return (b.rightCol - b.leftCol) - (a.rightCol - a.leftCol) || // put wider events first
        b.event.allDay - a.event.allDay || // if tie, put all-day events first (booleans cast to 0/1)
        a.event.start - b.event.start || // if a tie, sort by event start date
        (a.event.color || '').localeCompare(b.event.color) ||
        (a.event.title || '').localeCompare(b.event.title) // if a tie, sort by event title
}

↑同じ感じで修正

■参考URL

jQuery fullcalendar integration with PHP and MySQL

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

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

HTML5のwindow.postMessage()でクロスドメインでのiframe内から
親のwindowにメッセージを送る方法。

クロスドメインのページをiframeで読み込んだときに
iframe内のページ（長いページ）が遷移したら親ページもページの
上部に移動するようにしたくて調査した。

■参考サイト
window.postMessage

window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証

window.postMessage()の学習

上記のサイトを参考にして以下のようなコードを作成

■親ページ側に追加したjsのサンプル

$('#next_click').live('click', function(){
     var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
     if (typeof target != "undefined"){
         target.postMessage("page change", "*");
     }
});

上記でid:next_clickがクリックされたら親に「page chage」というメッセージが送られる。
※jQuery使用

■子ページ側に追加したjsのサンプル

$(function(){
        $(window).on("message", function(e){
        if (e.originalEvent.origin == 'http://許可するドメイン') {
            var data=e.originalEvent.data;
            if(data==='page change'){
                $('html,body').animate({scrollTop:0}, 400);
            }
        }
    });
})

上記で子でメッセージを受けとった際にページを上部まで移動させられる。
※jQuery使用
最初にあげた参考サイトではaddEventListenerを使っていたけど↑はjQueryで
イベントをセットしている。
jQueryを使う場合は「e.origin」や「e.data」でデータが取得できないので
「e.originalEvent.origin」や「e.originalEvent.data」でデータを取得する。
※eをconsole.dirすればわかる。

require.jsをつかってて、ちゃんと読めてるのか？
ってなったので手軽に確認する方法メモ。

// jqueryのバージョンを表示することで確認
console.log($.fn.jquery);
// jquery-uiのバージョンを表示することで確認
console.log($.ui.version);

これだけ。

jQueryと一緒にRequireJSを使ってみる

RequireJSをちゃんと使うべく勉強。
WEB+DB PRESS vol.69に
「RequireJSでらくらくモジュール管理」
というのがあったのでこれを参考にする。

まずはRequireJSのメリット3つ
□カプセル化されたモジュールの定義
AMD(Asynchronous Module Definition)モジュールと呼ばれるカプセル化された再利用性の高いモジュール定義が行える。
AMDはコールバック関数を使って定義するのでグローバル変数に頼らずに他のモジュールを呼び出せる

□ネストした依存関係の自動解決
依存関係が多段にネストしていても利用するモジュールを呼べば自動でRequireJSが依存を解決してくれる。

□非同期読み込みと最適化ツールによるパフォーマンスの向上
非同期に読み込むことでレンダリングのブロックを回避できる。
最適化ツールが用意されている（今回の実験ではやらない）

ではとりあえず書いてみる。
元々記事に記載されていたコードをjQueryを使った
バージョンに書き換えてみる。

RequireJSはここのページの「Sample RequireJS 2.1.2 + jQuery 1.8.2 project」をおとしてくる
※2012/12/07時点です。
ここから先のサンプルコードで使っている「require-jquery.js」は
解凍したフォルダの中の
jquery-require-sample\webapp\scripts\require-jquery.js
を使っています。

■ファイルの構成

.
|– js
| |– component.js
| |– config.js
| |– counter.js
| |– maxheight.js
| |– page.js
| |– require-jquery.js
| |– require.js
| `– util.js
`– page.html

require.jsとrequire-jquery.jsの両方があるけど
jquery使う場合はrequire-jquery.jsがいいらしい。
ただrequire-jquery.jsはrequire.jsとjquery.jsを
連結しただけのものらしい。
でもこうすることでjqueryのプラグインが非同期で
ロードされる前に本体がロードされていることを保障
できるってことらしい。

■page.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- 現在の時刻を表示する -->
        <h1 id="label"></h1>
        <div id="clock"></div>
        <hr /><!-- 単純なjqueryプラグインの実験↓ -->
        <label>一番大きいdivの高さ</label>
        <p id="height"></p>
        <hr /><!-- 複数のライブラリ中でjqueryプラグンが呼び出されたときの実験↓ -->
        <label>呼び出された回数</label>
        <p id="count"></p>
        <script>
            var require = {
                // キャッシュの防止
                urlArgs: 'bust=' + (new Date()).getTime()
            };
        </script>
        <script src="js/require-jquery.js" data-main="js/page" async></script>
    </body>
</html>

■js/config.js

define(function() {
    return {
        label: '現在の時刻',
        format: '%Y/%m/%d %H:%M:%S'
    };
})

■js/util.js

define(function() {
    function pad2(num){
        return ('0' + num).slice(-2);
    }

    function formatDate(date, formatStr) {
        return formatStr.
            replace('%Y', date.getFullYear()).
            replace('%m', pad2(date.getMonth() + 1)).
            replace('%d', pad2(date.getDate())).
            replace('%H', pad2(date.getHours())).
            replace('%M', pad2(date.getMinutes())).
            replace('%S', pad2(date.getSeconds()));
    }

    return {
        formatDate: formatDate
    };
});

■js/component.js

define(['jquery', 'config', 'util', 'counter'], function($, config, util) {
    function display($elem){
        $elem.text(util.formatDate(new Date(), config.format));
    }

    function render($elem) {
        display($elem);
        setInterval(function() {
                $(this).counter();
                display($elem);
            }, 1000);
    }

    return {
        render: render
    };
});

■js/page.js

require(['jquery', 'config', 'component', 'maxheight', 'counter'], function($, config, clock) {
    // configのラベルを表示(config依存)
    $('#label').text(config.label);

    // 現在の時刻を表示(component依存)
    clock.render($('#clock'));

    // ここから下はおまけの実験
    // ページ内のdiv要素で最も高いもののheightを返してみる(maxheight依存)
    $('#height').text($('div').maxHeight());

    // 5秒に1回たまったカウントを表示(counter依存)
    setInterval(function() {
        $('#count').countDisplay();
    }, 5000);
});

■js/maxheight.js

define(['jquery'], function($) {
    $.fn.maxHeight=function(){
        var max = 0;
        this.each(function() {
            max = Math.max( max, $(this).height() );
        });
        return max;
    };
});

■js/counter.js

define(['jquery'], function($) {
    var count=0;
    $.fn.counter=function(){
        count++;
    };
    $.fn.countDisplay=function(){
        this.text(count);
    }

});

■実際にうごかした画面。。。

実際に書いてみると以外に簡単に使えるんだなという印象。
自作したライブラリはとりあえずdefineで囲めばいいっぽいし。
defineで囲みたくない場合はshim設定で利用すれば擬似的に
モジュールで使えるということらしい。

後は今回でいうpage.jsの中でKAYACのURL dispatcher的な
ものを使えばよりいい感じになるのかもしれない。

そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め）

■参考URL

JavaScriptを分割&非同期で読み込めるRequireJS

RequireJS 2.0による依存関係の明示、フォールバック、複数バージョンの混在

勉強会資料シェア Getting Started with RequireJS

java-ja.js #2 RequireJS実践編

jQueryのプラグインをつくってみよう