• Resolved Swapnil Ghone

    (@swapnilghone9)


    Hi one of my client has requested to open calendar event in popup,
    I can do it while using event manager normal calendar as event manager allows me to override the template and change the structure as per my requirments.
    But while using Full calendar we cannot override the calendar structure,can you please let me know is there any way by which i can open events details in popup.

    Thanks in Advance.

    https://www.ads-software.com/plugins/wp-fullcalendar/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    Hi, you’ll need to do some custom coding to get this working, but someone has described doing it for FullCalendar here:

    https://www.mikesmithdev.com/blog/fullcalendar-event-details-with-bootstrap-modal/

    Thread Starter Swapnil Ghone

    (@swapnilghone9)

    Hello ,
    I just fixed the above functionality using custom coding,
    just in case it would help some one i am pasting the code snippet over here,

    function my_wp_fullcalendar_header_yearskip(){
        global $post;
        $script_load_page_string = get_option('wpfc_scripts_limit');
        $script_load_page_array = explode(',', $script_load_page_string);
        if(in_array($post->ID, $script_load_page_array)){ ?>
    <div class="uk-modal"  id="uk-event-popup">
    <div class="uk-modal-dialog">
            <button type="button" class="uk-modal-close uk-close"></button>
            <div class="uk-modal-header">
                <h2 id="eventTitle">Headline</h2>
            </div>
            <div id="eventBody" class="uk-modal-spinner"></div>
            <div class="uk-modal-footer uk-text-right">
                <a href="#">Event Page</a>
            </div>
    </div>
    </div>
    
        <script type="text/javascript">
        jQuery(document).on('wpfc_fullcalendar_args', function( e, options ){
        	options.header.left = 'prevYear,prev,next,nextYear today';
            options.eventClick = function(event, jsEvent, view){
    
                var modal = UIkit.modal("#uk-event-popup");
                modal.show();
                var data = {
                    'action': 'wsi_event_details',
                    'event_id':event.event_id
                }
                jQuery.post(wsis.ajax_url,data,function(resp) {
                    jQuery('#eventTitle').html(event.title);
                    jQuery('#eventBody').html(resp);
                    jQuery('#eventUrl').attr('href',event.url);
                    jQuery('#eventBody').removeClass('uk-modal-spinner');
                })
                return false;
            }
            jQuery("#uk-event-popup").on({
                'hide.uk.modal': function(){
                    jQuery('#eventBody').html('');
                    jQuery('#eventBody').addClass('uk-modal-spinner');
                }
            })
        });
        </script>
        <?php
        }
    }
    add_action('wp_footer','my_wp_fullcalendar_header_yearskip', 1);

    here i am using uikit modal popup , you can modify the code as per your requirments.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Open event in popup’ is closed to new replies.