jQuery Canlendar click function

I am using a Wordpress Plugin called bookly.  It is at the very bottom of the page.  If you go there and click on a date, the next step appears and you can choose a time.

However, if you go to the calendar when you first load the page, then navigate to the next month and click on the calendar date, the next step does not happen.
http://0c8.88c.myftpupload (DOT) com/

This is what controls it showing.
<script>
var int = setInterval(function() {
    if ($('#footer-calendar').find('.picker__day').length > 0) {
        clearInterval(int);
        init_calendar();
    }
}, 100);

function init_calendar() {
    $('.picker__day').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });

}

Open in new window

LVL 7
rgranlundAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
your datetime picker disable the propagation of the click event.
some solution :
1 - hack/fix it so it don't stop propagation on click
2 - register click event before it, so you got first the click
3 - replace your current code (what you post in the code snippet) by the following.
We use mouseup instead click event. Bonus, we handle touchstart too

<script>
function init_calendar(evt) {
	if($(evt.target).hasClass("picker__day"))
             $('#footer-calendar').addClass('calendarstart');
}

if(document.addEventListener) {
	document.addEventListener("touchstart", init_calendar, false);
	document.addEventListener("mouseup", init_calendar, false);
}
else {
	document.attachEvent("ontouchstart", init_calendar);
	document.attachEvent("onmouseup", init_calendar);
}

Open in new window


work in december
0
 
leakim971PluritechnicianCommented:
work for me... desktop and mobile...
question incomplete ?
desktopmobile
0
 
SSupremeCommented:
No, it doesn't, if you at first switch month (to December from November), after that times div not receiving  display:block rule.
0
 
SSupremeCommented:
It is something to do with this part: wp-content/themes/inspyrus/library/js/scripts.js
function init_calendar() {
    $('.picker__table').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });

}

    $('.picker__table').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });

Open in new window

For some reason it doesn't work after you change month. Sorry, need to go.
0
 
leakim971PluritechnicianCommented:
So did you put the code on your site and it work fine but no feedback from you...

by the way you don't need this code anymore... that's why I put my line 1 in my previosu answer.
/* Footer Calendar */
var int = setInterval(function() {
    if ($('#footer-calendar').find('.picker__day').length > 0) {
        clearInterval(int);
        init_calendar();
    }
}, 100);

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.