SharePoint のチーム サイトで利用される機会も多い「予定表」ですが、ページ上に Web パーツを配置するとその大きさに驚かれる方も多いと思います。SharePoint 2013 になってから、少し小さくなった気もするのですが、それでも大きいですよね。

そこで今回は、Web パーツをコンパクトに表示するカスタマイズを紹介したいと思います。

標準の表示を確認してみる

さっそくページ上に予定表 Web パーツを配置してみました。うん、大きいですね。

20130626-1

表示をコンパクトにする

カスタマイズの初めの一歩として、ページ上に「コンテンツ エディター」Web パーツを追加します。(SharePoint 2013 ならスクリプト エディターのほうが良いかも)

20130626-2

 

追加したコンテンツ エディター Web パーツを「Web パーツの編集」から編集モードにし、「ここをクリックして新しいコンテンツを追加」をクリックします。このままテキストを入力するのが本来のコンテンツ エディター Web パーツの使い方なのですが、今回はこの状態のままリボンの「ソースの編集」をクリックします。

20130626-3

すると、「HTML ソース」というダイアログが開くと思いますので、そこに下記のように記述します。(初めて開く場合は、何も入力されていない状態のはずです。すでに入力されていた場合は、再度 Web パーツの編集からやり直してみて下さい。)

<style>
.ms-acal-item{height: 10px;}
.ms-acal-sdiv, 
.ms-acal-mdiv, 
.ms-acal-ctrlitem, 
.ms-acal-month-weeksel, 
.ms-acal-title, 
.ms-acal-month-top span{display: none;} 
.ms-acal-summary-itemrow td div{height: 20px !important;} 
</style>

そのまま「OK」でダイアログを閉じて、ページを保存すると…はい、小さくなりました。(コンテンツ エディター Web パーツは、枠の種類を「なし」にしておくと、ユーザーには見えません。)

20130626-4

月表示から日表示に切り替わらないようにする

小さくした状態で少し操作してみると解るのですが、カレンダー内の日付をクリックすると、日表示に変わってしまい縦長になってしまいます。さらにこの表示から月表示に戻す手順が分かりづらい…。(リボンの予定表タブに表示形式を切り替えるメニューはあるのですが…。)なので、日付をクリックしても日表示に切り替わらないようにしたいと思います。

先ほどの小さくするカスタマイズと同様に、コンテンツ エディター Web パーツの HTML ソース ダイアログを開きます。先ほど追加した記述の後に下記のような記述を追加します。
(2013/6/26)ご指摘を頂いたので、スクリプトの記述を修正しました。@SharePoint_X の中の人に感謝です!

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function disableDayWeek(){
	jQuery('td[evtid=day]').removeAttr('evtid');
	jQuery('th[evtid=week]').removeAttr('evtid');
}
SP.SOD.executeOrDelayUntilScriptLoaded(disableDayWeek, 'sp.js');
</script>

で、同じようにページを保存すると…今度は日表示に切り替わらなくなりました(よね?)。上記サンプルでは、Microsoft CDN から直接 jQuery ライブラリを参照していますが、ポリシーに応じて jQuery をスタイル ライブラリー等にアップロードし、そちらのファイルを参照するようにパスを変更して下さい。

まとめ

予定表を小さく表示できるカスタマイズは色々なサイトで利用できると思います。予定の詳細を確認したい場合は、予定表リストの画面を開いて確認できますし、トップページでは予定の有無だけを確認できれば良いのに、といったご要望は良く頂きます。

Office 365 の SharePoint Online でも同様の方法でカスタマイズできますので、ぜひ試してみて下さい!