小粋空間  -  a cheap joke and a play on words site

Movable Typeの日付カスタムフィールドを使って「予定」「開催中」「終了」を別々に表示する方法

「Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法」で、「予定」「開催中」「終了」をそれぞれ別のリストに出力するカスタマイズを紹介します。

変更前

変更後

以下、カスタマイズ方法です。カスタムフィールドは「Movable Typeの日付カスタムフィールドを2つ使って「開催中」を表示する方法」の２項を参考に予め作成しておいてください。

１．カスタマイズ

まず、「予定」「開催中」「終了」を表示させるエリアとして、次のHTMLを全面追加します。

<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">開催中</h3>
    <div class="widget-content">
    <ul id="during"></ul>
    </div>
    <h3 class="widget-header">予定</h3>
    <div class="widget-content">
    <ul id="future"></ul>
    </div>
    <h3 class="widget-header">終了</h3>
    <div class="widget-content">
    <ul id="old"></ul>
    </div>
</div>

次に、MTEntriesタグにli要素を追加します（赤色部分）。

<mt:Entries>
  <li style="display:none"><$mt:EntryTitle$> <span class="icon" style="display:none"><$mt:EntryCFStartDate format="%Y:%m:%d:%H:%M:%S:"$><$mt:EntryCFEndDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
</mt:Entries>

最後にJavaScriptを次のように変更します（赤色が変更部分）。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
var currentDate = new Date(); 
jQuery(function(){
    jQuery('.icon').each(function(){
        time = (jQuery(this).text()).split(":");
        var startDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var endDate = new Date(time[6], time[7]-1, time[8], time[9], time[10], time[11]); 
        var start = (startDate.getTime()/(24*60*60*1000)) - (currentDate.getTime()/(24*60*60*1000)); 
        var end = (endDate.getTime()/(24*60*60*1000)) - (currentDate.getTime()/(24*60*60*1000)); 
        start = Math.ceil(start);
        end = Math.ceil(end);
        var li = jQuery(this).parent();
        jQuery(this).parent().remove();
        if (start <= 0 && end >= 0) {
            jQuery('#during').append(li);
        } else if (start > 0) {
            jQuery('#future').append(li);
        } else if (end < 0) {
            jQuery('#old').append(li);
        }
        li.css('display', 'block');
    });
});
//-->
</script>

２．解説

次の部分でspan要素の親要素（li要素）を取得し、取得したら取得元を削除します。

    jQuery('.icon').each(function(){
        // ...
        var li = jQuery(this).parent();
        jQuery(this).parent().remove();

期間に応じて、取得したli要素をそれぞれのリストに追加していきます。

        if (start <= 0 && end >= 0) {
            jQuery('#during').append(li);
        } else if (start > 0) {
            jQuery('#future').append(li);
        } else if (end < 0) {
            jQuery('#old').append(li);
        }

追加後、リストに表示されるようにします。

        li.css('display', 'block');