Cannot Implement into more than one element

[zohaibalimemonx]

This plugin is not working with WordPress. Sometimes It shows getFullYear() and sometimes $.

[nggepe]

have you installed jquery? this package depend on jquery.

[zohaibalimemonx]

Check out this URL - https://healthvirtual.wpengine.com/public-events/?view=month

The plugin is working fine without the events. But when I set the events It does not slide to the next or previous month even though there are events in September.

/* Event Month View Public */
    jQuery(function (e) {
        var event_list = [];
        jQuery.each(handler_object.event_obj, function(index, val) {
            event_list.push({
                date: new Date(val.date),
                eventName: val.eventName,
                className: val.classname,
                onclick(e, data) {

                    jQuery('.zx-event-page-wrapper').LoadingOverlay('show');
                    jQuery.ajax({
                        type: 'post',
                        url: handler_object.ajax_url+'?action=get_event_details_by_id',
                        dataType: 'json',
                        data: { 'event_id' : val.id },
                    })
                    .done(function(value){
                        if(value.status)
                        {
                            var newHTML = '<div class="popup-event-card">';
                            newHTML += '<div class="pec-top">';
                            newHTML += '<p class="pec-scope">'+value.event_array.event_scope+'</p>';
                            newHTML += '<p class="pec-applied">'+ value.event_array.event_entry +' Registered</p>';
                            newHTML += '<h3 class="pec-title">'+value.event_array.event_title+'</h2>';
                            newHTML += '<p class="pec-after-title">'+value.event_array.event_cat+'</p>';
                            newHTML += '<p class="pec-date-title">';
                            newHTML += '<span class="zx-ecd-t">'+value.event_array.event_time+'</span>';
                            newHTML += '<span class="zx-ecd-d">'+value.event_array.event_date+'</span>';
                            newHTML += '</p>';
                            newHTML += '</div>';
                            newHTML += '<div class="pec-bottom" id="PecBottom">';
                            newHTML += '<div class="pec-description">'+value.event_array.event_desc+'</div>';
                            if( value.event_array.event_raw_date >= value.event_array.event_raw_today )
                            {
                                newHTML += '<div class="pec-action">';
                                newHTML += '<button type="button" class="primary-btn do-event-registration" data-event_id="'+value.event_array.event_id+'">Register</button>';
                                newHTML += '</div>';
                            }
                            newHTML += '</div>';
                            newHTML += '</div>';

                            jQuery(document).find('#popupContentX').html( newHTML );

                            jQuery(this).magnificPopup({
                                items: {
                                    src: '.popup-events-details',
                                    type: 'inline'
                                },
                                fixedContentPos: true,
                                closeOnBgClick: false,
                                enableEscapeKey: false,
                                callbacks: {
                                    beforeOpen: function() { jQuery('html').addClass('mfp-helper'); },
                                    close: function() { jQuery('html').removeClass('mfp-helper'); }
                                }
                            }).magnificPopup('open');
                        }
                        else
                        {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops!',
                                text: value.message
                            });
                        }
                    }).always(function() {
                        jQuery('.zx-event-page-wrapper').LoadingOverlay('hide');
                    });

                }
            });
        });

        var calendar = jQuery("#ZxCalendar").calendarGC({
            dayBegin: 0,
            prevIcon: '<i class="fas fa-chevron-left"></i>',
            nextIcon: '<i class="fas fa-chevron-right"></i>',
            events: event_list
        });
    });

[nggepe]

I saw you have customized the object of the jQuery, maybe I should to investigate your code. Is this your code? https://healthvirtual.wpengine.com/wp-content/themes/woodmart-child/wp-backend/assets/js/library/calendar-gc.min.js?ver=1.0.0

[nggepe]

hi @zohaibalimemonx , can you try to console.log(e) in these code? I want to see the output.

[zohaibalimemonx]

Hi @nggepe

I've added console.log(e) but it does not give any output.

I've just modified "$" to "JQuery" as WordPress does not support "$" sign.

[nggepe]

I don't know it will work or not, but maybe you can try to move the .on("click".... to the top of the .appendTo

[zohaibalimemonx]

Still Not Working - https://healthvirtual.wpengine.com/wp-content/themes/woodmart-child/wp-backend/assets/js/library/calendar-gc.min.js

[nggepe]

Okay, maybe I'll try to debug your environment code in my localhost tomorrow.

[nggepe]

Hi, sorry for long response, I really busy with my job for this 3 weeks.

I think you have two initialization on your code. So the next initialization will render on your new element. Here is your link https://healthvirtual.wpengine.com/wp-content/themes/woodmart-child/wp-backend/assets/js/scripts-handler.js?ve

this is the first

r=1.0.0

and this is the second one

for now, this package doesn't support for two element. maybe I'll enhance it to for the next update. for your current fix you can just remove the second initialize. Below is your code to remove

jQuery("#ZxCalendarP").calendarGC({
      prevIcon: '<i class="fa fa-chevron-left"></i>',
      nextIcon: '<i class="fa fa-chevron-right"></i>',
      events: event_list,
    });

because the #ZxCalendarP doesn't exist on your HTML code, so it replaced the element of the object.