次のコードは、データベースからイベントをフィードする基本的な機能と、eventClickでのイベントの詳細を示しています。しかし、このコードから、あるビューから別のビューに切り替えるときに詳細を非表示にすることはできません。
2つのスクリーンショットを見つけることができます。これとともに：
イベントがクリックされ、詳細が月表示のボックスに表示されます。
週表示に切り替えると、週表示でも同じ詳細が表示されます。表示を切り替えた後は非表示にします。
コード：-
<script>
$(document).ready(function() {
$('#cal').fullCalendar({
theme: true,
height: 600,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
},
editable: true,
events: 'php/json-events.php',
eventMouseover: function(calEvent, jsEvent) {
var myFormattedDate = $.fullCalendar.formatDate(calEvent.start, "ddd, dd MMMM yyyy");
$(this).click(function(e) {
document.getElementById('des').innerHTML=calEvent.description;
document.getElementById('tim').innerHTML=myFormattedDate;
$(this).css('z-index', 10000);
$('.tooltipevetn').fadeIn('500');
$('.tooltipevetn').fadeTo('10', 1.9);
$('.tooltipevetn').css('top', e.pageY);
$('.tooltipevetn').css('left', e.pageX);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
},
dayClick: function(calEvent, jsEvent){
$('.tooltipevetn').hide();
}
});
});
</script>
<body style="margin: 20px;">
<div style="width: 1000px; margin-left: 150px; ">
<div id="cal" ></div></div>
<div id="tevent" class="tooltipevetn" style="width:300px;height:130px;background:#FFFFFF;padding: 20px;position:absolute;z-index:10001;border:1px solid #CCCCCC; display: none;">
<h3 id="des"></h3>
<p id="tim"></p>
<br/><br/>
<hr/>
<a href="#">Copy to calendar</a><a href="#" style="float: right;">More Details >></a>
</div>
</body>
いずれかの日をクリックすると、非表示にするコードがあるため削除されます。助けていただければ幸いです。前もって感謝します