CODEWITHSUNDEEP
jqueryfullcalendar
Raghuveer
Raghuveer

Reputation: 797

Not able to hide the event details after eventClick

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 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..

Switching from month view to week view does not hiding clicked event

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

Upvotes: 0

Views: 229

Answers (1)

MaxD
MaxD

Reputation: 574

Try responding to the viewDisplay callback... :)

Upvotes: 1

Related Questions