web-dev-qa-db-ja.com

FullCalendarをタッチデバイスで動作させる方法は？

タブレット向けのイベントカレンダーを探していましたが、適切なものが見つかりませんでした。しかし FullCalendar は、デスクトップとタブレットで見栄えのする最高のjQueryカレンダープラグインの1つです。

このカレンダーはデスクトップで完全に機能しますが、タブレットに関しては、タッチとスワイプに基づいてイベントの開始時刻と終了時刻を選択できません。これを行うと、カレンダーがスクロールされます。これに対する解決策はありますか？私は静脈内の解決策を探していました。

誰かがこの問題を抱えていて、あなたはそれを解決しましたか？解決方法を教えてください。どんな種類の助けもありがたいです。

前もって感謝します。

jquery-mobilecalendarfullcalendar
13
Dipin Krishnan

Jquery UI Touch Punch を含めてみましたか？

デフォルトでは、Jquery UIはモバイルデバイス用に最適化されていないため、タッチイベントをサポートしていません。 Touch Punchは、FullCalendarでも使用されているように見えるJqueryUIのドラッグアンドドロップ機能に関する問題を解決しました。

それが役に立てば幸い！

14
gwythen

この作品

私はこのプラグインを使用しました： jquery.ui.touch.js

iOSおよびAndroidデバイス用のFullcalendarにタッチサポートを追加します

これを使用してカレンダーを初期化します。

eventRender: function(event, element) {
            $(element).addTouch();
        }
9
Gotschi

FullCalendar touchのサポートは、 このFullCalendarブログ投稿 によると、v2.7.0のベータリリースで利用できます。

2
akivajgordon

最新の フルカレンダー2.7.1 では、タッチは サポート です。プレス遅延のオプションを設定することもできます。ドキュメントを見てください

2
Ckappo

これをjQueryUIタッチパンチで機能させるのに苦労し、完全なサンプルコードが見つからなかったため、イベントの作成とドラッグをモバイルデバイスで機能させるために使用したコードを投稿すると思いました。

注：この例では、 jQuery UIタッチパンチ を使用しています。

$(document).ready(function() {

  $('#calendar').fullCalendar({
    ...
    eventAfterRender: function(event, element, view) {
      element.draggable();
    }
  });

  $('.fc-view tbody').draggable();
});
2
yndolok

私はこのプラグインを使用しました：jquery.ui.touch.js

それはこのコードによって私のために働いた：

$('#calendar').fullCalendar({
[...]
});

$('#calendar').addTouch();
1
Pasdo

モバイルデバイスで日を選択するのに問題がある人にとって この質問 は非常に役立ちます。proplongPressDelayを10として使用すると機能します。

詳細については、 FullCalendar/Docs Touch Support を参照してください。

0
stringnome