TopMovable Typeカスタムフィールド > 2013年4月
2013年4月22日

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

April 22,2013 12:03 AM
Tag:[, , ]
Permalink

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

変更前
変更前

変更後
変更後

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

1.カスタマイズ

まず、「予定」「開催中」「終了」を表示させるエリアとして、次の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>

2.解説

次の部分で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');
Comments [7] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2022年
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3