SharePointの予定表をjQueryUIのDatePickerで表示してみた

SharePoint2013の検証環境が壊れてしまいショック死しておりましたが、ようやく生き返りました。サーバーも早く息を吹き返してほしいものです・・・

さて、SharePointのチームサイトでは、予定表はよく使う機能の一つだと思います。
ただ、webパーツとしてサイトのトップページに表示させたい場合、標準のwebパーツだとはっきり言ってデカいです。
で、小さくしたい!しかもかっちょよく!と常々思っていました。

CSSで何とかするやり方は

予定表 Web パーツのカレンダー表示をコンパクトにしてみた | idea.toString;

とかあって、これでいいよねこれで・・・といったんは思ったんですが、ついでにイベント一覧も表示したりできるといいよね、ということで自作してみることにしました。

UIはjQuery UIのDatePickerかっこいいから使いたい、そこでググってみたところCodePlexによさそうなソリューションを発見。
http://jqcalendarpart.codeplex.com/
おお~、これこれ!と思ったのですが、一つ問題が・・・
Limitations:
The web part will not work if you try to navigate to the next month or to the previous month. Please wait as I’m working on a fix to highlight all the dates which are having event registered when a user is navigating to the next month.

とあるように、月を切り替えるとイベントが表示されなくなっちゃうという・・・うむむむ・・・これでは実用に耐えない・・・

というので、上のコードを元にがんばって動くものを作ってみました。
上記のCodePlexのソリューションとは違い、ホバーではなく下に表示月のイベントを表示するようにしています。
20140722

なお、月を切り替えてもちゃんとイベントの日付を色付けするには、どうやら下記のようにonChangeイベントでやりたい処理をsetTimeoutで遅延させるのがキモのようです。
(参考にさせていただいた記事:書いて忘れる: jQuery:UI datepickerの週末に色をつける.)

    $(".divDatePicker").datepicker({
        onChangeMonthYear: function (year, month, inst) { //表示月変更 
            setTimeout(function () { syncCalendar(year, month, selectDate.getDate()); }, 100);
        },
        onSelect: function (dateText, inst) { //選択日変更
            dispDayEvent(dateText);
        }
    });

完全なソースコードはGistに置いてます。ご自由におとりください。
HTML←これをコンテンツエディタ webパーツでページに埋め込んでください。
https://gist.github.com/marineko/6baa039110521f3b043a
JavaScript
https://gist.github.com/marineko/63c7a386786ea7d6d2de
CSS
https://gist.github.com/marineko/469a84fd8ab882d41e76
※SharePoint2010、2013両方で動作確認済みです。

依存関係のあるファイルです。上記ソースコードと合わせ、以下もページに読み込んでおいてください。
jQuery
jQuery UI
XDate
SPServices

なお、jQuery UIのテーマは、フラットなUIテーマの作れる以下のwebサービスで作りました。便利な世の中になりましたねー。

Build jQuery UI themes with jQUIT Builder

なお、コンテンツエディタを使ってページにスクリプトなどを置くやり方は、以下のポストをご参考に・・・
JavaScriptなど外部ファイルをページに読み込む
予定表のフォームで会議ワークスペース列を非表示にする

広告