jq.Scheduleのイベントデータの移動、サイズ変更を禁止する

jq.Scheduleではイベントの行や時間を変更することができますが、誤動作防止などの理由から一時的にロックをかけたい需要があるかもしれません。

jq.ScheduleではjQuery UIのdraggableとresizableが使われているので

これだけでいけます。

Select2のSearchboxでIMEが有効にならない

まずは問題が起こった環境を書きます。

  • Windows10 or Windows7
  • InternetExplorer11
  • MicrosoftIME
  • Bootstrap3 Modal
  • Select2 4.0.3

Bootstrap3のModalとSelect2の組み合わせで、経験のある人は「tabindex=”-1″」を削除すれば解決だと思うかもしれません。

ところがIEとMicrosoft IMEを組み合わせた場合、Select2の検索ボックスにカーソルを合わせてもIMEが有効になりませんでした。IMEの変更、あるいはブラウザの変更で解決したので、この組み合わせのみ起こる問題のようです。
IEとMicrosoft IMEであっても、Modalを使用しなければ普通に使えるので、かなり限られた環境で起こる問題のようです。

解決方法としてはModalの「tabindex=”-1″」を削除するとともに、Select2のオプションにdropdownParentを追加します。

jq.Scheduleの行データを取得する

シフト表などで使えそうなjQueryプラグインのjq.Schedule
スケジュール管理用jqueryプラグイン jq.schedule.js

いやー便利ですね。とても助かっています。

こちらのプラグイン、スケジュール部分を変更すると時間帯は取得できるのですが、移動先の行に関するデータは何行目かのデータしか取得できません。どちらかと言うと、行に設定したユーザーや部屋や施設などのIDが欲しいのではないでしょうか。
ということで少しカスタマイズしてみたいと思います。

まずrowsにtitle, scheduleを渡しますが、同じ階層にidを追加します。
そしてすjq.schedule.jsの268行目付近を以下のように書き換えます。

フロントエンドのchangeイベントでdata.timelineを元にdata属性を取得します。

Riot.jsのイベントハンドラ(onclick)にデータを渡す方法

Riot.js簡単でいいですね。コンポーネント単位で作成できるもの、見通しがよく作りやすいです。
コンポーネントを別ファイルで(.tag)保存することもできます。
コンポーネント内はHTML, CSS, JavaScriptを区別して書くことができるのでMVCっぽく作ることもできます。
非常に学習コストが低いのも利点ですね。ただし日本語のTipsがまだ少ないのが残念なところです。

続きを読む

GCalHolidaysにbeforeShowイベントを追加する

jQUeryUIのDatepickerに休日の表示を追加するGCalHolidays。業務用アプリの作成で大変お世話になっています。このGCalHolidaysはDatepickerのbeforeShowイベントを利用してカレンダーに休日の情報を上書きしています。
続きを読む

React.jsのsetStateのタイミングが…

componentWillReceivePropsで親コンポーネントの変化を受け取りAJAXでデータをローディングしようとしたのですがsetStateのタイミングでつまづきました。

続きを読む

日本の祝日表示を適用したinline表示のjQuery Datepickerで祝日の消失を防ぐ方法

GoogleカレンダーからJSONPで日本の祝日一覧を取得 – GCalendar Holidays
上記サイトのスクリプトを利用してjQuery Datepickerに日本の祝日を表示し、そのDatepickerをinline表示した場合、日付を選択した際(onSelect時)beforeShowイベントが発生せず、適用した祝日の表示が消えてしまう現象がありました。
非常にマイナーな状況なのですが、個人的にすごい困っていたので記録を残します。
続きを読む