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など外部ファイルをページに読み込む
予定表のフォームで会議ワークスペース列を非表示にする

広告

予定表のフォームで会議ワークスペース列を非表示にする

SharePoint2010の標準の予定表では、イベントのフォームに「ワークスペース」っていう項目がありますよね。
20140708-1

ここにチェックをいれると、このイベントにひもづいた「会議ワークスペース」というサブサイトがサイト内に作成されるわけですが、実務上はサブサイトを作成する権限を一般ユーザーには渡してないケースがままあると思います。

その場合どうなるかというと、会議ワークスペースの作成画面で「OK」ボタンを押すとアクセス拒否画面がばばーんと出ちゃいます。
まあこれで、「あ、これは押したらアカンやつやった・・・」とわかりはするんですけど、できればそんなつれない画面は見せたくない。いや、会議ワークスペースの作成画面自体見せたくない。

というわけで、イベントのフォームで「ワークスペース」列を非表示にするべく、例によってJavaScriptで頑張ってみました。

以下のjsファイルをサイトに保存します。
hideWorkspace.js

$(document).ready(function () {
	$("tr:has(a[name='SPBookmark_WorkspaceLink'])").not("tr:has(tr)").hide(); //DispForm.aspx
	$("tr:has(span[title='Workspace'])').not("tr:has(tr)").hide(); //NewForm.aspx, EditForm.aspx en
	$("tr:has(span[title='ワークスペース'])").not("tr:has(tr)").hide(); //NewForm.aspx, EditForm.aspx jp
});

新規、表示、編集すべてに対応してます。また、ベタな書き方でアレなんですがテンプレートは英日両方いけます。

さて、さらに以下のタグを書いたテキストファイルをサイトに保存します。
LoadJS.txt

<script src="/ファイルへのパス/jquery.min.js" type="text/javascript"></script>
<script src="/ファイルへのパス/hideWorkspace.js" type="text/javascript"></script>

このテキストファイルをコンテンツエディタwebパーツでフォームに埋め込みます。
たとえば、NewForm.aspxに埋め込む場合、リボンの「フォームwebパーツ」のドロップダウンから「既定の新しいフォーム」を選択。
20140708-2

次の画面で「webパーツの追加」のリンクをクリックして、[メディアおよびコンテンツ] カテゴリの「コンテンツエディタ」を選択し、「追加」ボタンをクリック。

追加したコンテンツエディタ webパーツの編集画面で、「コンテンツへのリンク」に先ほどアップしたスクリプトリンクタグを書いたテキストファイルへのパスを指定し、「OK」します。
20140708-3

こんな感じで、編集フォーム、表示フォームにも埋め込んでいけば完了です!
めでたく非表示にすることができました~。

20140708-4

【2013】コンテンツ検索 webパーツでBlogの新着情報を表示する

ここのところ、SharePoint2013の新機能「コンテンツ検索 webパーツ」をいじっていたのですが、なかなか使えそうな印象です。
なので、やってみたことをぼちぼち紹介していきたいと思います。

※シリーズものになってますので、よろしければ続きの記事も読んでみてください。
コンテンツ検索webパーツの表示をカスタマイズする
コンテンツ検索 web パーツでホバーパネルを表示してみた

コンテンツ検索 webパーツってなんぞ?という向きはこちらを参考にしてみてください。
SharePoint Server 2013 で検索 Web パーツを構成する

また、カスタマイズするにあたって、こちらの一連の記事を非常に参考にさせていただきました。
SharePoint 2013 検索の設定やカスタマイズに関する投稿まとめ – Japan SharePoint Support Team Blog – Site Home – TechNet Blogs

さて、手始めにサイト内のブログ記事の新着情報をページに表示してみたいと思います。

ページにコンテンツ検索 webパーツを挿入します。
20140704-1

webパーツの編集メニューから、「クエリの変更」をクリック。
20140704-2

下図のように設定してみます・・・
20140704-3

ブログ記事だけ引っ張れてるようですが、このままだと関連性順に並んでしまうので、上で赤で囲った「詳細モードへの切り替え」をクリック。
「並べ替え」タブで「Created」の「降順」にします。
20140704-4

うまく新着順で表示されました!
、、、が、このままではサムネイルもないし、タイトルしか表示されないし、さびしいですよね?
20140704-5

とりあえず、サムネイル画像を表示させるようにしてみましょうか。
それには、ブログのプロパティにサムネイル用の列を作成しないといけません。
ブログサイトの方へ行き、「Posts」リストのリストの設定画面から、「サイト内の既存の列から追加」をクリック、下図のように「お勧めのイメージ」列を追加します。
20140704-6

あとは、各ブログアイテムの投稿画面でこの列にサムネイル画像を登録しておきます。

先ほどの「コンテンツ検索 webパーツ」に戻り、webパーツの編集画面で「Picture on left, 3 lines on right」になっていることを確認します。
20140704-7

これでOKです!
インデックスのクロールが終われば、先ほどブログの投稿に追加した画像が表示されます。
20140704-8

しかし、これでもまださびしいですね、、、
次は、「表示テンプレート」をカスタマイズしてみたいと思います。