2012-05-31 107 views
11

私はタブレットフレンドリーなイベントカレンダーを探していましたが、適切なものは見つかりませんでした。しかし、FullCalendarは、デスクトップとタブレットでうまくいく、最高のjQueryカレンダープラグインの1つです。タッチデバイスでFullCalendarを使用するにはどうすればよいですか?

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

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

ありがとうございます。

答えて

13

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

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

希望すると助かります!

+1

私はこの解決策を見ました[ここ](http://code.google.com/p/fullcalendar/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status %20Milestone%20Summary%20Stars&groupby =&sort =&id = 724)。周りのイベントをドラッグするとうまくいきましたが、タッチを使ってタイムスロットを選択して、週ビュー/日ビューでドラッグしてイベントを作成することはできませんでした。この問題をどうやって解決しましたか?私を助けてもらえますか? –

+0

@DipinKumarあなたは解決策を見つけましたか? – John

+0

@John間違いなくjQuery Touch Punchを試してみてください。 –

7

これは、私はこのプラグインを使用し

ワークス:

eventRender: function(event, element) { 
      $(element).addTouch(); 
     } 
+0

Androidで働いてくれてありがとう。 –

+0

@yndolokソリューションと同様に、jQuery Touch Punchよりもうまく機能します。イベントをドロップすることができ、親コンテナのマージン内に収まるように位置を自動的に修正することはありません。 – Seether

+0

最新のjQueryUIを使用してください。そうしないと動作しません。この時点で私は1.11.4を使用しています。最新のfullcalendarは、最新のjQuery 2.xを使用しています。 – Mistergreen

2
jquery.ui.touch.js

は自分のカレンダーを初期化するためにこれを使用してiOSとAndroidデバイス

ためFullcalendarにタッチサポートを追加します

jQuery UI touch punchでこれを動作させるのに苦労していたので、私はfiできませんでした任意の完全なサンプルコードについては、イベントを作成したりドラッグしたりするコードを投稿すると思いました:

注:この例ではjQuery UI touch punchが使用されています。

$(document).ready(function() { 

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

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

私はこのプラグインを使用:jquery.ui.touch.js

それは、このコードで私の仕事:最新 Full Calendar 2.7.1

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

$('#calendar').addTouch(); 
2

を、タッチがSupportedです。プレス遅延のオプションを設定することもできます。文書を見てください

関連する問題