V.S.A. III

[Secure-SBM:029] カレンダー表示 (2)

こんにちは，五十嵐です．前回は日付を指定してブックマークを表示できるようにしました．今回はカレンダー表示と連携させます．

指定された月の1日から末日までを走査し，配列を作成します．ブックマークが存在すればリンクを，存在しなければ 0 を設定します．存在確認は，既存のアクションを用いて～例えば /personal 用であれば SecureSBM::Controller::Personal::personal() に特別な引数を与えて～ブックマークを確認します．


    for( my $day = 1; $day <= $lastday; $day++ ){ 
        my $ymd = sprintf('%04d%02d%02d', $data{year}, $data{month}, $day); 
        # ブックマークの存在確認 
        my $exists = 0; 

        if( $action =~ /^personal$/ ){ 
            $exists = SecureSBM::Controller::Personal::personal( 
                                                $self, $c, 1, $ymd ); 
        }elsif( $action =~ /^searchbookmark$/ ){ 
            $exists = SecureSBM::Controller::Personal::searchBookmark(
                               $self, $c, 1, $ymd, $tag, $searchword ); 
        }else{ 
            # /bookmark etc. 
            $exists = SecureSBM::Controller::Noauth::Bookmark::bookmark(
                                           $self, $c, undef, 1, $ymd ); 
        } 
        if( $exists ){ 
            $link[$day] = "'" . $url . '?' . $urlarg . $amp . "date=" 
                              . $ymd 
                              . "'"; 
            $monthlink = 1; 
        }else{ 
            $link[$day] = '0'; 
        } 
   }

これをメニューのカレンダーから表示します．

<div class="sidemenu-box">
<h1>カレンダー</h1>
<div id="calendar"></div>

この calendar という id の部分にカレンダーを表示します．

<script type="text/javascript">
<!--
var today = new Date();
var curyear = today.getFullYear();
var curmonth = today.getMonth() + 1;
[% IF dispyear && dispmonth %]
var dispyear = [% dispyear %];
var dispmonth = [% dispmonth %];
[% ELSE %]
var dispyear = curyear;
var dispmonth = curmonth;
[% END %]
[% IF linkurl %]
var linkurl = encodeURI('[% linkurl %]');
[% ELSE %]
var linkurl = encodeURI('/bookmark');
[% END %]
rewriteCal(dispyear,dispmonth,curyear,curmonth,linkurl);
// -->
</script>

dispyear,dispmonth は表示する年月，curyear,curmonth は現在の年月です．rewriteCal() は calendar.js というファイルに格納して，あらかじめ読み込んでおきます．

function rewriteCal( year, month, curyear, curmonth, linkurl ){
    var cal = make_calendar( year, month, curyear, curmonth );
    _getElementById("calendar").innerHTML = cal;

先ほどメニューに設定した '<div id="calendar"></div>' にカレンダーを書き込みます．

/* 表示中の月のリンク array を確認 */
    if( ! _isDefined( "ym_" + year + month ) ){
        // 同期して Array を読み込み
        setupCalendarDispMonth( year, month, linkurl );
    }

    setupCalendarLinkDispMonth( year, month );

この辺りが今回のミソ．例えば今月が 2007 年 7 月であれば，変数 "ym_20077" が設定されているかどうかを確認します．設定されていなければ "ym20077" に配列を読み込みます．ここの読み込み部分は，リンクを設定する関係で，非同期ではなく，同期して読み込みます．

同様に，前後の月を非同期で読み込んでおきます．

/* 前後の月のリンク array を確認 */
    var lastmonth = month - 1;
    var nextmonth = month + 1;
    var lastyear = year;
    var nextyear = year;

    if( lastmonth == 0 ){
        lastmonth = 12;
        lastyear--;
    }
    if ( nextmonth == 13 ) {
        nextmonth = 1;
        nextyear++;
    }

    // lastyear + lastmonth
    if( ! _isDefined( "ym_" + lastyear + lastmonth ) ){
        // Ajax で Array を読み込み
        setupCalendarLastMonth( lastyear, lastmonth, linkurl );
    }

    // nextyear + nextmonth
    if( ! _isDefined( "ym_" + nextyear + nextmonth ) ){
        // Ajax で Array を読み込み
        setupCalendarNextMonth( nextyear, nextmonth, linkurl );
    }
} // end of rewriteCal()

先読みしておいて，前後の月を表示するようにクリックされた場合には，すぐに表示できるようにしておきます．クライアント側が遅い PC だとかえってサクサクとは動かないかもしれません．

2007/06/27 記

参考：