CODEWITHSUNDEEP
jqueryfullcalendar
Shah Ankit
Shah Ankit

Reputation: 129

full calendar click event not working after changing the month

I had a issue with the Full calendar. I do not click on the events after changing the month.

Below is my script for creating the events ::

$(document).ready(function(){
    var d = new Date();
    $('#calendar').fullCalendar({
        header: {
        center: 'prev,today,next ',
        left: 'title',
        right: 'none'
        },
        defaultDate: d,
        height: 'auto',
        navLinks: false,
        businessHours: true,
        editable: true,
        droppable: true,
        dayNamesShort: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        eventSources: [
            {
                events: [
                    <?php
                        foreach ($locations as $location){
                            $select_event_time_loop = CFS()->get('select_event_time_loop',$location->ID);
                            echo "{
                                title : '" . get_the_title($location->ID)."',
                                className :['demo_check-" . $location->ID . "','event-back-color'],
                                start:'".CFS()->get('select_event_date',$location->ID)."',
                            },";
                        }
                    ?>
                ],
            }
        ]
    });
    $("a[class*='demo_check-']").on("click",function(){
        $.each(this.className.split(' '), function( _, cn ) {
            if( cn.indexOf('demo_check') === 0 ) { name = cn; return false; }
        });
        var class_name_split = name.split('-');
        if(class_name_split[1]){
            $(".page-overlay").css("display","block");
            var data = '';
            data = "class_name_split=" + class_name_split[1];
            var path = "<?php echo get_bloginfo('template_url'); ?>/investment-ajax.php";
            $.ajax({
            type: "POST",
            url: path,
            data: data,
            success: function(msg){
            $('#time_get_ajax').html(msg);
            $(".page-overlay").css("display","none");
            }
            });
        }
    });
});

So please suggest me how can i get work with the custom click events after changing the month.

I am getting the additional information with the ajax on click on the tag it works fine but when i change the month click event not working.

Please help me for this issue.

Thanks

Upvotes: 0

Views: 2193

Answers (1)

ADyson
ADyson

Reputation: 61904

This issue isn't specific to FullCalendar I don't think - it's a problem with the fact that the elements you're targeting don't exist on the page when you attach the event handler to the selector - FullCalendar only creates the HTML to display the selected month (and consequently any elements within that) at the point where you select the month. Because the code to attach the click event does not run again at that point, the newly generated elements, even if they match your click selector, don't have the click event attached to them.

The solution is to use delegated events. You can replace:

$("a[class*='demo_check-']").on("click",function(){

with

$("#calendar").on("click", "a[class*='demo_check-']", function() {

This attaches the click event to the calendar element, which we know already exists. It can then handle events on any descendant elements which match the second selector, regardless of whether they existed when the event handler was declared.

See the jQuery documentation at http://api.jquery.com/on/ for a more detailed explanation of delegated events.

Upvotes: 3

Related Questions