概要

FullCalendar は高機能なカレンダーライブラリであり、qTip2 は柔軟なツールチップ表示を実現するプラグインです。これらを組み合わせることで、カレンダー上のイベントにマウスオーバーした際に、詳細情報をポップアップ表示する機能を実装できます。本解説では、FullCalendar の eventRender コールバックと qTip2 を利用した具体的な実装手順について説明します。

実装手順

1. ツールチップ用 HTML テンプレートの作成

まず、ツールチップ内に表示する情報の構造を定義した HTML 要素を準備します。この要素は初期状態では非表示にしておき、JavaScript 経由で qTip2 に渡します。

<div class="tooltip-template-container" id="calendar-tooltip-template">
    <div class="info-section">
        <div class="tooltip-time-display"></div>
        <div class="tooltip-team-name"></div>
        <div class="tooltip-subject"></div>
        <div class="tooltip-instructor"></div>
    </div>

    <div class="operation-menu">
        <a href="#" class="btn-view">詳細を見る</a>
        <a href="#" class="btn-copy">コピー</a>
        <a href="#" class="btn-edit">編集</a>
        <a href="#" class="btn-delete">削除</a>
    </div>
</div>

2. FullCalendar と qTip2 の連携設定

FullCalendar の初期化設定内で eventRender メソッドを使用し、各イベント要素に対して qTip2 をバインドします。イベントの開始・終了時刻やタイトルから情報を抽出し、事前に用意したテンプレートに埋め込みます。

const calendarContainer = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarContainer, {
    // その他のカレンダー設定...
    
    eventRender: function(renderInfo) {
        // 時刻のフォーマット補助関数
        const formatTime = (dateObj) => {
            const h = String(dateObj.getHours()).padStart(2, '0');
            const m = String(dateObj.getMinutes()).padStart(2, '0');
            return `${h}:${m}`;
        };

        const startDate = renderInfo.event.start;
        const endDate = renderInfo.event.end;
        const title = renderInfo.event.title;
        
        // タイトルを区切り文字で分割して情報を取得（データ構造に合わせて調整）
        const metaParts = title.split('，');
        
        // テンプレート要素の内容を更新
        const tooltipTemplate = $('#calendar-tooltip-template');
        tooltipTemplate.find('.tooltip-time-display').text(`時間：${formatTime(startDate)} - ${formatTime(endDate)}`);
        tooltipTemplate.find('.tooltip-team-name').text(metaParts[0] || '');
        tooltipTemplate.find('.tooltip-subject').text(metaParts[1] || '');
        tooltipTemplate.find('.tooltip-instructor').text(metaParts[2] || '');

        // qTip2 の初期化
        $(renderInfo.el).qtip({
            content: {
                text: tooltipTemplate.clone() // クローンして内容を使用
            },
            position: {
                my: 'bottom left',
                at: 'top left',
                viewport: $(window)
            },
            show: {
                solo: true,
                event: 'mouseenter'
            },
            hide: {
                fixed: true,
                delay: 500,
                event: 'mouseleave'
            },
            style: {
                classes: 'qtip-custom-calendar'
            }
        });
    }
});

3. ツールチップのスタイリング

表示されるツールチップの見た目を CSS で整えます。qTip2 が生成する要素クラスに対してスタイルを適用します。

.qtip-custom-calendar {
    width: 280px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    border-top: 4px solid #3498db;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: sans-serif;
}

.qtip-custom-calendar .qtip-tip {
    top: -6px !important;
}

.tooltip-template-container {
    display: none; /* 元要素は非表示 */
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

.info-section {
    color: #777;
    margin-bottom: 10px;
}

.operation-menu {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
    text-align: right;
}

.operation-menu a {
    color: #3498db;
    text-decoration: none;
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
}

.operation-menu a:hover {
    text-decoration: underline;
}