8ケタの数字を、YYYY年MM月DD日(曜日)に置き換える方法だけ知りたい方は
ここからジャンプ
8ケタの数字 → YYYY年MM月DD日(曜日)
20180921 → 2018年9月21日(金)
プラグインを使わずにイベントカレンダーを実装出来るか!?【考察】
プラグインを使わずにイベントカレンダーを実装出来るか!?【実装】
で作成した記事に、イベント開催日の日付を表示しようと思います。
▼関係するカスタムフィールド
「連続でない場合に入力(開始日・終了日も記載)」に関しては、
年は4ケタで記載。月と日の数字が 1ケタの場合には、前に「0」を入れる運用としています。
「1月2日」なら「0102」、「8月15日」なら「0815」。年月日の区切りには「, 」を使用。
例:20180102, 20180404, 20180815, 20181225
「連続でない場合に入力(開始日・終了日も記載)」の使用には、プラグイン「Split」が必要です。
▼テンプレート
<$mt:Date format="/%Y年/" setvar="thisyear"
gt;<mt:eventStartDate format="%Y年%b月%e日(%a)" regex_replace="/ /g","" setvar="startDate"><mt:eventEndDate format="%Y年%b月%e日(%a)" regex_replace="/ /g","" setvar="endDate"><mt:If tag="eventStartDate"><mt:If name="startDate" eq="$endDate"><mt:var name="startDate" regex_replace="$thisyear",""><mt:Else><mt:If tag="eventNotContinue" eq=""><mt:If name="endDate" eq=""><mt:var name="startDate" regex_replace="$thisyear","">~<mt:Else><mt:var name="startDate" regex_replace="$thisyear","">~<mt:var name="endDate" regex_replace="$thisyear",""></mt:If><mt:Else><mt:eventNotContinue setvar="days"><mt:Var name="days" split=", " setvar="bar"><mt:loop name="bar"><mt:If name='__first__'><mt:Else>、</mt:If><mt:Var name="__value__" setvar="all"><mt:SetVarBlock name="yearmanthday"><mt:Var name="all" trim_to="4">年<mt:Var name="all" trim_to="6">月<mt:Var name="all" trim_to="8">日</mt:SetVarBlock><mt:SetVarBlock name="noneyear">/年<mt:Var name="all" trim_to="4">/</mt:SetVarBlock><mt:SetVarBlock name="yearmanth">/月<mt:Var name="all" trim_to="6">/</mt:SetVarBlock><mt:Var name="yearmanthday" regex_replace="$noneyear","年" regex_replace="/年0/","年" regex_replace="$yearmanth","月" regex_replace="/月0/","月" regex_replace="$thisyear",""><mt:Var name="yearmanthday" regex_replace="$noneyear","年" regex_replace="$yearmanth","月" regex_replace="/年/","/" regex_replace="/月/","/" regex_replace="/日/","" setvar="javad"><span class="week"><mt:Var name="javad"></span></mt:loop></mt:If></mt:If><mt:Else><mt:If name="endDate" eq="">未定<mt:Else>~<mt:var name="endDate" regex_replace="$thisyear",""></mt:If></mt:If>
一つづつ説明します
<$mt:Date format="/%Y年/" setvar="thisyear"
gt; <mt:eventStartDate format="%Y年%b月%e日(%a)" regex_replace="/ /g","" setvar="startDate"> <mt:eventEndDate format="%Y年%b月%e日(%a)" regex_replace="/ /g","" setvar="endDate">
thisyear は、再構築日から、今年が西暦何年なのかを取得します。
※ mt:eventStartDate はカスタムフィールド「01, イベント開始日【start】」
※ mt:eventEndDate はカスタムフィールド「02, イベント終了日【End】」
(上記2つはそのままだと「2018-09-05」とかになります。)
startDate は、カスタムフィールド「01, イベント開始日【start】」の登録日付を書き換えたもの。
endDate は、カスタムフィールド「02, イベント終了日【End】」の登録日付を書き換えたもの。
<mt:If tag="eventStartDate">
カスタムフィールド「01, イベント開始日【start】」に日付が登録されている場合に
<mt:If name="startDate" eq="$endDate">
カスタムフィールド「01, イベント開始日【start】」と、
カスタムフィールド「02, イベント終了日【End】」が同日だったら
<mt:var name="startDate" regex_replace="$thisyear","">
カスタムフィールド「01, イベント開始日【start】」の日付のみ表示します。
regex_replace=”$thisyear”,”” ⇒ %Y年が今年の西暦だった場合には、年を省略
<mt:Else>
カスタムフィールド「01, イベント開始日【start】」に日付が登録されていて、
カスタムフィールド「01, イベント開始日【start】」と、
カスタムフィールド「02, イベント終了日【End】」が同日じゃない
<mt:If tag="eventNotContinue" eq=""> <mt:If name="endDate" eq=""> <mt:var name="startDate" regex_replace="$thisyear","">~
※ tag=”eventNotContinue” はカスタムフィールド「連続でない場合に入力(開始日・終了日も記載)」
カスタムフィールド「連続でない場合に入力(開始日・終了日も記載)」の記載が空で、
カスタムフィールド「02, イベント終了日【End】」も空だった場合に
カスタムフィールド「01, イベント開始日【start】」の日付の後に「~」を表示します。
<mt:Else>
カスタムフィールド「連続でない場合に入力(開始日・終了日も記載)」の記載が空で、
カスタムフィールド「02, イベント終了日【End】」に記載がある場合(カスタムフィールド「01, イベント開始日【start】」とカスタムフィールド「02, イベント終了日【End】」の日付が異なる場合)
<mt:var name="startDate" regex_replace="$thisyear","">~<mt:var name="endDate" regex_replace="$thisyear",""> </mt:If>
「01, イベント開始日【start】」~「02, イベント終了日【End】」と表記されます。
<mt:Else>
カスタムフィールド「連続でない場合に入力(開始日・終了日も記載)」の記載がある場合、
ここが一番ややこしいのですが…というか本題ですね。
<mt:eventNotContinue setvar="days"> <mt:Var name="days" split=", " setvar="bar"> <mt:loop name="bar"> <mt:If name='__first__'><mt:Else>、</mt:If> <mt:Var name="__value__" setvar="all"><mt:SetVarBlock name="yearmanthday"><mt:Var name="all" trim_to="4">年<mt:Var name="all" trim_to="6">月<mt:Var name="all" trim_to="8">日</mt:SetVarBlock> <mt:SetVarBlock name="noneyear">/年<mt:Var name="all" trim_to="4">/</mt:SetVarBlock><mt:SetVarBlock name="yearmanth">/月<mt:Var name="all" trim_to="6">/</mt:SetVarBlock> <mt:Var name="yearmanthday" regex_replace="$noneyear","年" regex_replace="/年0/","年" regex_replace="$yearmanth","月" regex_replace="/月0/","月" regex_replace="$thisyear",""> <mt:Var name="yearmanthday" regex_replace="$noneyear","年" regex_replace="$yearmanth","月" regex_replace="/年/","/" regex_replace="/月/","/" regex_replace="/日/","" setvar="javad"> <span class="week"><mt:Var name="javad"></span> </mt:loop> </mt:If>
<mt:eventNotContinue setvar="days">
「連続でない場合に入力(開始日・終了日も記載)」の記載情報を「days」とします。
<mt:Var name="days" split=", " setvar="bar"> <mt:loop name="bar">
「split=”, “」つまりは「days」の情報を「, 」で区切って
区切ったものをloop処理します。
<mt:If name='__first__'><mt:Else>、</mt:If> <mt:Var name="__value__" setvar="all">
ループの最初以外は「、」を冒頭につけます。
区切った情報をsetvar=”all”に格納します。
「連続でない場合に入力(開始日・終了日も記載)」に 20180102, 20180404, 20180815, 20181225 と入っていたのであれば
最初のループでは 20180102 がsetvar=”all”に入っています。
<mt:SetVarBlock name="yearmanthday"><mt:Var name="all" trim_to="4">年<mt:Var name="all" trim_to="6">月<mt:Var name="all" trim_to="8">日</mt:SetVarBlock>
この状態で、20180102は
2018年201801月20180102日 となります。
<mt:SetVarBlock name="noneyear">/年<mt:Var name="all" trim_to="4">/</mt:SetVarBlock><mt:SetVarBlock name="yearmanth">/月<mt:Var name="all" trim_to="6">/</mt:SetVarBlock>
noneyear に /年2018/
yearmanth に /月201801/ が入ります。
<mt:Var name="yearmanthday" regex_replace="$noneyear","年" regex_replace="/年0/","年" regex_replace="$yearmanth","月" regex_replace="/月0/","月" regex_replace="$thisyear","">
regex_replace=”$noneyear”,”年”
regex_replace=”$yearmanth”,”月” で置き換えて
2018年01月02日 となります。
regex_replace=”/年0/”,”年”
regex_replace=”/月0/”,”月” で置き換えて
2018年1月2日 となります。
▼8ケタの数字を(曜日)に置き換える方法
<mt:Var name="yearmanthday" regex_replace="$noneyear","年" regex_replace="$yearmanth","月" regex_replace="/年/","/" regex_replace="/月/","/" regex_replace="/日/","" setvar="javad">
javadに入る情報「2018/01/02」を出しています。
<span class="week"><mt:Var name="javad"></span>
上記は曜日を出す為に用意しています。
曜日に置き換える為に別途jQueryを用意しました。
$(".week").each(function() {
var day = $(this).html();
var d = new Date(day);
var w = ["(日)","(月)","(火)","(水)","(木)","(金)","(土)"];
$(this).html(w[d.getDay()]);
});
</mt:If> <mt:Else><mt:If name="endDate" eq="">未定
カスタムフィールド「02, イベント終了日【End】」が空で
カスタムフィールド「01, イベント開始日【start】」も空だった場合には
未定 と表示します。
<mt:Else> ~<mt:var name="endDate" regex_replace="$thisyear",""> </mt:If> </mt:If>
カスタムフィールド「02, イベント終了日【End】」が空で
カスタムフィールド「01, イベント開始日【start】」に記載のある場合には
~「02, イベント終了日【End】」と表記されます。
▼結果、以下のように表示されます。
8月7日(火) | 開始日と終了日が同日 |
---|---|
2017年12月29日(金)~8月12日(日) | 終了日が開始日よりも未来※連続 |
2017年8月1日(火)、8月15日(水)、8月26日(日) | 終了日が開始日よりも未来※連続でない場合 |
未定 | 開始日と終了日が空っぽ。 |
8月1日(水)~ | 終了日が空っぽ。終了日が未定状態。 |
~8月1日(水) | 開始日が空っぽ。開始日が未定状態。 |
※今年に当てはまらない場合にのみ、年も表示。