カレンダースクリプトの小技その1：整形が終わるまで隠しておく

カレンダースクリプトですが、ココログ標準のカレンダーを整形しているため、整形中の過程が見えてしまうという問題があります。
つまり、いったん今月のカレンダーが表示されてから、ナビを追加したり、URLを元にした月のカレンダーに書き換わったりするため、結構気になります。

特に上部に設置していると目立ちます。

この違和感を少しでも軽減するため、整形が完了するまではサイドバーを隠しておく小技を紹介しておきます。

1. カスタムCSSでサイドバー部分を非表示に設定
   具体的には、管理画面より、
   管理ページトップ > ブログ一覧 > (ブログ名) > デザイン > カスタムCSSを編集
   にて、次の記述を追加し、[変更を保存]します。
   .sidebar {
   display:none;
   }
   
2. マイリストのカレンダー設置フォームを変更
   具体的には、設置フォームのHTMLを次のように変更します。
   <!--【JavaScript版カレンダー】 -->
   <script type="text/javascript" src="http://furyu.tea-nifty.com/script/prototype.js"></script>
   <script type="text/javascript" src="http://furyu.tea-nifty.com/script/dayChecker.js"></script>
   <script type="text/javascript" >
   <!--
   // === [オプション設定]
   var calendarType ='J' ; // J:日本語 E:英語
   var dateArchive = false ; // 日別アーカイブ有りの場合のみtrue設定可(日別ページへのリンクになる)
   var calendarOnload = function( calendarObj ) {
       if ( navigator.userAgent.match( /Opera/i ) ) {
           var divs = document.getElementsByTagName('div') ;
           for ( var ci=0; ci < divs.length; ci++ ) {
               if ( divs[ci].className == 'sidebar' ) {
                   divs[ci].style.display = 'block' ;
               }
           }
       }
       else {
           calendarCssAddRule( ".sidebar", "display:block" ) ;
       }
   }
   //-->
   </script>
   <noscript>
   <style type="text/css">
   <!--
   .sidebar {
   display:block;
   }
   -->
   </style>
   </noscript>
   <script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocoCalendar.js"></script>
   <script type="text/javascript" >
   <!--
   // === [カスタマイズカレンダー呼出]
   checkCreateCalendar();
   //-->
   </script>
   
   赤字が今回追加したところです。

このように設定することにより、カレンダーの整形が終わるまではサイドバーの中身は隠れており、整形完了後に表示されるようになります。
【2006.08.16】calendarOnload内を若干手直し(Opera対策：ただし動作未確認)。

ちなみに、ご覧のように、

var calendarOnload = function( calendarObj ) {
/* カレンダー整形完了後に処理される内容 */
}

といった形で calendarOnload を登録しておくことで、カレンダー整形完了を待ってから様々な処理を行うことができますので、JavaScriptをご存じの方なら応用も可能かと思います。

例えば、さらに自分好みにカスタマイズを加えた後で表示させるようにするとか。

カレンダー