# FullCalendar（Scheduler使用）のeventClick実装

**URL:** <https://community.cybozu.dev/t/topic/3089>\
**Category:** kintone 開発相談\
**Created:** [2018 年 5 月 21 日午前 3:11 UTC](https://community.cybozu.dev/t/topic/3089 "2018-05-21T03:11:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1936](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1936](https://community.cybozu.dev/u/Legacy_Account1936)\
**Post date:** [2018 年 5 月 21 日午前 3:11 UTC](https://community.cybozu.dev/t/topic/3089/1 "2018-05-21T03:11:45Z")

</div>

タイトルの件で質問です。

FullCalendarにてイベントをクリックすると、特にコード記述せずに編集画面に画面遷移してしまいます。編集画面に遷移せず、eventclickの指定部分でkintone APIを利用しデータの取得や更新を行いたいのですが、実装は可能でしょうか。

可能であれば、画面遷移させない制御方法を合わせて教えていただきたいです。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1574](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1574](https://community.cybozu.dev/u/Legacy_Account1574)\
**Post date:** [2018 年 5 月 21 日午前 3:52 UTC](https://community.cybozu.dev/t/topic/3089/2 "2018-05-21T03:52:38Z")

</div>

[ドキュメント](https://fullcalendar.io/docs/eventClick)にあるようにeventClickのイベント中でkintoneのAPIを操作するよう記述すれば対応は可能かと思います。

ただ、eventClickは文字通りただのクリックイベントなので、スケジュールの操作のためのイベントはeventResizeやeventDrop等使い分けが必要かと思いますので、意図にあったイベントをドキュメントを確認しつつ選ぶと良いかと思います。

&nbsp;

具体的な記述方法は、[kintoneイベントカレンダープラグイン](https://developer.cybozu.io/hc/ja/articles/212155743-kintone-%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3)の[ソースファイル](https://github.com/kintone/plugin-sdk/blob/master/examples/eventCalendar/js/customize.js)が参考になると思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1936](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1936](https://community.cybozu.dev/u/Legacy_Account1936)\
**Post date:** [2018 年 5 月 21 日午前 6:59 UTC](https://community.cybozu.dev/t/topic/3089/3 "2018-05-21T06:59:12Z")

</div>

Ryu Yamashita 様

コメントいただきありがとうございます。

eventClickにてkintoneAPIを使用し、アプリからデータを取得することは実装できましたが、詳細画面への遷移を止めることができません。

ご教授いただきましたソースファイルも参考にしておりますが、eventClickされた場合に該当するデータの詳細画面遷移を阻止する該当部分が分からず・・・・  
eventClickされたらGETした情報でダイアログを表示しているのですが、強制的に詳細画面へ遷移してしまうため、肝心のダイアログは一瞬表示されるだけとなってしまいます。  
eventClickの際はどうしても詳細画面が表示されてしまうのでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1574](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1574](https://community.cybozu.dev/u/Legacy_Account1574)\
**Post date:** [2018 年 5 月 22 日午前 1:41 UTC](https://community.cybozu.dev/t/topic/3089/4 "2018-05-22T01:41:09Z")

</div>

イベントをクリックしたら該当の詳細画面に遷移するという部分は、どこかで設定しているためにレコードが紐ついていると言えると思います。

[eventオブジェクト](https://fullcalendar.io/docs/event-object)のurlプロパティを指定されている可能性が高いかと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1936](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1936](https://community.cybozu.dev/u/Legacy_Account1936)\
**Post date:** [2018 年 5 月 23 日午前 12:10 UTC](https://community.cybozu.dev/t/topic/3089/5 "2018-05-23T00:10:24Z")

</div>

再度のコメントありがとうございます。

ご指摘どおりURLプロパティに指定したままでした。URLプロパティの理解が足りていませんでした。  
おかげ様で想定どおりの実装ができそうです。

重ねてお礼申し上げます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1936](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1936](https://community.cybozu.dev/u/Legacy_Account1936)\
**Post date:** [2018 年 5 月 23 日午前 7:32 UTC](https://community.cybozu.dev/t/topic/3089/6 "2018-05-23T07:32:38Z")

</div>

引き続き、煮詰まってしまいました。

eventClick時にJquery UIのdialogを出力しているのですが、ダイアログの表示が崩れてしまいます。

①プルダウンや明示的に配置したボタンは表示されるが、daialogの枠線を含むベース部分が表示されない。  
②×ボタンが「close」と表示されてしまう。  
③スケジューラーの上に重なった部分は操作ができない。  
positionでbodyの下に無理やり表示させ（①②はどこで表示させても同じ事象）、操作すると内部処理は正常に動いています。

ほぼ同じソースにて、詳細画面編集にてフィールド値変更イベントで実装した場合は、正常にダイアログ表示されました。  
スケジューラーとの関連で考慮しなくてはいけない部分があるのでしょうか。

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1574](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1574](https://community.cybozu.dev/u/Legacy_Account1574)\
**Post date:** [2018 年 5 月 23 日午前 8:04 UTC](https://community.cybozu.dev/t/topic/3089/7 "2018-05-23T08:04:59Z")

</div>

jQuery UI ベースの機能が衝突してるのかもしれませんね（詳細にはカレンダーない想定）。“jquery dialog fullcalendar collapse” でググると色々出てきたので、それらを参照されるのが良いかと思います。jQuery UI dialog自体に注意ポイントがあるという話も聞きますし、ハマると面倒かもしれないので、モーダルの方をjQuery UI使わない方法で実現する方が早いかもしれませんねぇ。

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1936](https://avatars.discourse-cdn.com/v4/letter/l/7feea3/32.png) [@Legacy\_Account1936](https://community.cybozu.dev/u/Legacy_Account1936)\
**Post date:** [2018 年 5 月 31 日午前 5:04 UTC](https://community.cybozu.dev/t/topic/3089/8 "2018-05-31T05:04:06Z")

</div>

再度のコメントをいただき、ありがとうございました。

他のダイアログ機能のライブラリなど調べて、試行してみます。

&nbsp;

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 12 月 3 日午前 5:29 UTC](https://community.cybozu.dev/t/topic/3089/9 "2024-12-03T05:29:51Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。
