jqueryのでフルカレンダーのポップアップ
https://stackoverflow.com/questions/1944238
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私はjQueryのフルカレンダーにイベントを作成するときに、ポップアップ（Googleカレンダーのように、バルーンポップアップ）を表示する必要があります。
（私は/編集/作成ポップアップからイベントを削除するために使用しています）クリックイベントを処理もバルーンとして表示され、ポップアップのための任意の最高のプラグイン？
解決 3
私は絶対位置でのdivを使用して表示する自分のポップアップを書いています。
<div id="addEvent" style="display: none; position: absolute; width: 400px; z-index: 1000;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="PopupContainer">
<div class="header">
<img src="<%= ResolveUrl("~/Content/images/closepopup.gif") %>" id="addCalEventClose"
title="Close" alt="Close" class="cursorhand" />
</div>
<div class="clear" />
<div class="popup">
//Your content goes here
</div>
</div>
<div class="clear" />
<br />
</td>
</tr>
<tr>
<td>
<div style="margin-top: -1px">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="taC">
<img src="<%= ResolveUrl("~/Content/images/balloon_arrow.gif") %>" title="" alt=""
id="addEventBalloon" />
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
マウスクリックの位置を計算し、ポップアップを表示するには、いくつかのjavascriptingで$('#addEvent').css({ left: xPos, top: yPos }).show().fadeIn();を呼び出します。
他のヒント
私はfullCalendarで Qティップに使ってきたし、それは素晴らしい働いています！
$('#calendar').fullCalendar({
...
eventRender: function(event, element, view)
{
element.qtip({ content: "My Event: " + event.title });
}
...
});
ちょうどあなたがfullCalendarのeventRenderイベントであなたのQティップを定義していることを確認してください。 ：）
私は（jQueryの1.3 / w）で気づいた唯一の問題は、Qティップのポップアップがフェードインするとき、それはfullCalendarのスタイルを作られたグリッドの後ろにそのフェードインを開始することです。その第一〜数フレーム後に、それは大丈夫です。また、これは非常によく、私は私のプロジェクトで起こっているいくつかの他のものに問題がある可能性があります。私はあなたの走行距離は変更になる場合がありますので、さらにそれをデバッグするのが面倒です。 ; P
Qティップのプラグインイベントハンドラを割り当てる機能を含むツールチップ内の任意のコンテンツを扱うことができると豊富な機能を得るためにその他もろもろます。
ここに私の実装です。私はホバーにこれをしなかった、BTあなたは、クリックしたい場合は、単に
イベントハンドラを変更します$('#calendario').fullCalendar({
events: "/includes/json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventMouseover: function( event, jsEvent, view ) {
var item = $(this);
if(item.find('.nube').length == 0){
var info = '<span class="nube"><h2>'+event.title+'</h2><img src="'+event.avatar+'" /> <p class="text">'+event.name+'</p><p>'+event.start+' <br /> '+event.end+'</p><p><a href="/post.php?blogid='+event.id+'">read_more</a></p></span>';
item.append(info);
}
if(parseInt(item.css('top')) <= 200){
item.find('.nube').css({'top': 20,'bottom':'auto'});
item.parent().find('.fc-event').addClass('z0');
}
item.find('.nube').stop(true,true).fadeIn();
},
eventMouseout: function( event, jsEvent, view ) {
var item = $(this);
item.find('.nube').stop(true,true).fadeOut();
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventRender: function(event, element) {
}
});
と、少なくともます：
.nube{ position: absolute;left:0;top:0}
「風船」プラグイン自体fullcalenderがすでにそのために構成されたコールバックを提供して、クリックイベントを処理する必要はありません...
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent){
// ... your code here ...
}
});
あなたがツールチップのスタイル「風船」を探している場合は、推奨されているようにQティップが良い選択です。あなたは、おそらくどこか他の場所から先端の中身を取り出し、、必要に応じてeventClick機能をオンザフライでツールチップを作成することができます。
これは、AJAXベースのですが、あなたがしたい場合..あなたはまた、コントロールあなたたいあなたのイベントをバインドすることができ、それを削除することができます...これを試してみてください。
、jqueryのの古いバージョンを使用してみてください。
私はjqueryの-1.4を試してみました、それが今で動作します。私はjqueryの-1.2.6で試してみました、それが完璧に動作します。
