Following code gives me a basic functionality of feeding events from database and details of events on eventClick. But from this code, i am not able to hide the details when switching to one view to other.
You can find two screen shots. with this:
event has been clicked, and details are shown in a box in month view.
Switching to week view, you can find the same details in week view.. I want it to hide after switching view..
code: –
<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>
If i click on any day then it removes as we have code to hide in it.. any help is appreciated. Thanks in advance
Try responding to the viewDisplay callback… 🙂