質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

2017閲覧

fullcalendar(v4)で既イベントがあっても選択日でClickイベントを発生させるには?

kei161220

総合スコア1

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/06/06 04:15

編集2021/06/06 06:37

前提・実現したいこと

よくあるカレンダーアプリであるGoogleカレンダーやジョルテなどの動きと
同じように、(例)2~3日間の予定が入っていたとしても選択した日のイベント発火を
させたい。
実際運用させたい場合はその予定ごとにイベント発火よりも
選択したその日単位で発火させるほうが実用的かと思います。
理由は選択した日の予定すべてを取得させたいためです。
特にスマートフォンだと日付内空白を選択するのは困難。
よって選択日に予定が入っていても日付クリック(dateclick)イベントが発動されるのが理想です。

イメージ説明

発生している問題

画像例でいう11日~12日の予定があるとして12日を選択すると イベントクリックが発動するので dateClick: function(info)は発動しない

該当のソースコード

var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { //11~12日の予定上を選択するとこちらは発動しない dateClick: function(info) { //日付クリック var get_Day = moment(info.dateStr, "YYYY/MM/DD"); // 第一引数:日時、第二引数:フォーマット形式 //var this_Day = get_Day.format('YYYY年MM月DD日 HH:mm'); var this_Day = get_Day.format('YYYY/MM/DD'); //リスト取得 //this_Dayを元にデータベースより当日予定取得 }, //11~12日の予定上を選択するとこちらが発動されるが //日付としては12日を選択しているので、選択日12日として取得できないか? //それともこの予定イベントが発動されず、上記dateClickが発動されるように //できないか? eventClick: function(calEvent) { //11日が取得されてしまう var get_Day = moment(calEvent.event.start, "YYYY/MM/DD"); // 第一引数:日時、第二引数:フォーマット形式 //var this_Day = get_Day.format('YYYY年MM月DD日 HH:mm'); var this_Day = get_Day.format('YYYY/MM/DD'); //リスト取得 //this_Dayを元にデータベースより当日予定取得 } });

補足情報(ツールのバージョンなど)

fullcalendar V4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

FullCalendar(v4)の仕様上困難かと思います。
(HTML上、クラス名"fc-day-grid-event"を持つ1つの要素でしかないので、11日、12日のどちらの側をクリックしたか判定するのは難しいです)
実際に試されたように、複数日に渡るイベントをクリックした際には、クリックした位置に関わらず「開始日」・「終了日」のどちらかが表示される実装になってしまうのではないでしょうか。

個別の事例でしかありませんが、実際に、勤務先で担当している業務アプリにFullCalendarを導入しております。
各日の日付部分の横にはどうしても空白があくので、そこをクリック(またはタップ)して日付別の表示に切り替えていただくことで、今のところ問題は起こっていませんね。

v5では動きが変わっているかもしれないので、調査してみます。

投稿2021/06/06 09:43

編集2021/06/06 09:44
hallen0225

総合スコア587

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei161220

2021/06/06 11:20

すでに業務で使われているんですね。 私は今導入を試みているところです。 V4は予定修正したものをカレンダーへ反映・削除する場合に扱いやすいというのがあったため、このバージョンにしました。 ただ、課題にも出しているとおり実務で使うとなると アクションイベントは予定ベースよりは日ベースで扱うほうが操作性としても良いと考えています。 予定を修正することよりも、その日一日の予定がどうなっているかな?を 一目で確認する機会のほうがぜんぜん多いと思うためです。 →画像右端に少し見えてますが、アプリなどにあるようにその日を選択したらデータベースからその日の予定を全て取得して、一覧表示させる みたいなことをやろうとしています。 >各日の日付部分の横にはどうしても空白があくので、そこをクリック  私の場合は一応スマホでも出来るようにしたいため、予定が同日に複数入るとその日の選択(タップ)が厳しくなるんですよね。。 今のところv4で厳しいかなと思っていますが、何かありましたら 共有いただけるとありがたいです。
hallen0225

2021/06/06 11:27

こちらも主にスマートフォン向けのWebアプリです。 予定が複数入っていても、日付の横の部分(ここの空白の大きさは変わらないので)が押せることをお伝えすれば問題なく使っていただけています。(この部分が押せないと思われている方も一定数いる印象ですね) 何かありましたら改めてご連絡します。
hallen0225

2021/06/06 11:36

あと、日付を選択する際に、(予定が表示されている部分以外の)隙間の部分が小さいことが問題になるのでしたら、その隙間を広くとることはCSSで可能と思います。 FullCalendarの動作自体を変える以外にも、現実的な解決法はあるのではないでしょうか??
kei161220

2021/06/06 12:46

なるほど、横の空白を利用するということですね。 そのアイディア使ってみようと思います。 助言ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問