ブロック表示でスケジュール要素をクリックで追加できるようスペースを追加する

YY3ai2ui24 86views 更新:2015年4月20日

スケジュールのブロック表示でクロームデベロッパーツールを使用した。 予定のD&Dをすると、div要素のstyle属性が動的に変化していることがわかった。 また、

  • 同じ曜日で時間の変更がなされた場合、topが変化する。
  • 同じ時間で曜日が変更されると、leftが変化する。
  • 予定が重なった時、予定がドロップされた後に予定のdiv要素のwidthとleftが変更される。
  • leftの指定は%単位で行われている。

ことがわかった。

ここで、JavaScriptが自動計算していることがわかったので、どのJavaScriptが呼ばれているのかを確認する。 ChromeのデベロッパーツールのSourceを確認すると、common.jsとweekly.jsが読み込まれていることがわかった。 また、common.jsは複数のJavaScriptファイルを圧縮したものであるので、スケジュール関係で読み込まれているものは /target/aipo/javascript/aipo/calendar/schedule/form.js /target/aipo/javascript/aipo/calendar/calendar/weekly.js などが考えられる。 この内、後者のweekly.jsはScheduleフォルダ内のweekly.jsファイルが圧縮されたものであることがわかった。

weekly.js

この493行目に

                    html += '<div id="schedule-' + count + '-' + _portletId+'" class="scheduleDiv color'+str_tmp+'" style="top: '+ top +'px; left: ' + left + '%; height: '+ (height-1) + 'px; width: '+ width + '%;z-index: 0; visibility: hidden; border-right-style:none;"><div class="scheduleDivFirstLine color'+str_tmp+'"><span id="scheduleDivStartTime-'+ count + '-' + _portletId + '" class="scheduleDivTime color'+str_tmp+'">' + str_tmpflgmb + startDate + '</span><span id="scheduleDivSepalater-'+ count + '-' + _portletId + '"  class="scheduleDivSepalater color'+str_tmp+'">' + sepalater + '</span><span id="scheduleDivEndTime-'+ count + '-' + _portletId + '" class="scheduleDivTime color'+str_tmp+'">' + endDate + '</span></div><div class="scheduleDivRightLine color'+str_tmp+'"></div><div style="overflow: hidden;" class="scheduleDivName color'+str_tmp+'">'  + name  + '</div><div class="scheduleDivLastLine color'+str_tmp+'"><div class="scheduleDivRightLine color'+str_tmp+'"></div><center><div class="handleDiv color'+str_tmp+'" align="center"> </div></center></div></div>';


のようなソースコードがあった、このclass属性scheduleDivはD&Dできるドロップスケジュールの要素と同じである。 この中の変数widthを変更する形で進める。

今回は、


//before //var width = 100 / ptConfig[_portletId].scheduleDivDaySum * 0.99; //after var width = 100 / ptConfig[_portletId].scheduleDivDaySum * 0.90;

として、スケジュール要素のwidthを90%にするとしたが、予想したように表示されなかった。

また、JavaScriptファイルを編集するときは、

http://blog.aipo.com/2013/09/24_133000.html

http://hacknote.jp/archives/8145/ などを参考にした。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません