Widget calendar not showing right month after click

[magnusfriis]

Hi,
I have a problem with the widget calendar. When I click on a date and it goes to the day, e.g. September 25th, the widget calendar jumps back to this month (July), instead of staying at the right month (September). See example here: http://republique.dk/dk/kalender/2015-09-25/

Any Idea how I could fix this?

Thanks.

Best,
Magnus

[George]

Hey Magnus,

This is the correct and default functionality of the widget – on page load, it loads to the Current Month. When you’re on a specific single-event page, like the URL you provided, this does not change and the single page will show the event you go to, but the widget will still go to the Current Month.

Does that make sense? If not, or you have other questions here or feel like I’m misunderstanding your issue, let me know!

Thank you 🙂
George

[magnusfriis]

Hi George,

Thanks for you quick reply. I know it is the default, but is there anyway I can change it in the code, so that the widget will show the day I go to instead?

Thanks again.

Best,
Magnus

[George]

Hey Magnus,

I’m sorry to disappoint, but that is not possible without a level of code customization that is a bit beyond the scope of support we can provide here.

If you’re curious about where to even start with this, in The Events Calendar core plugin there are several Widget-related classes in the /src folder. If you start there you may be able to piece together how the calendar jumps to the current date, and modify this accordingly.

Please let me know if there are any other things I can help with, I’m sorry to disappoint on that front with the widget but changing it “for real” is quite tricky (however: see below! 🙂)

Thanks,
George

---

P.S. A “Hack” for Faking this Feature

So, up above I mentioned that “genuinely” getting the calendar widget to actually load on the desired month (if other than the current one) is a bit complex. However, there is one solution I came up with that sort-of “fakes” this effect. It works by using JavaScript to “fake” click the “Next Month” link, so that to the user it would seem like the page just loaded on that month.

You can try this out (as an idea – it may not work well enough for your needs 🙁 ) by pasting code like the following into your theme’s functions.php file:

add_action( 'wp_footer', 'example_fake_widget_click', 100 );

function example_fake_widget_click() {
    if ( ! wp_script_is( 'jquery', 'enqueued' ) ) {
        wp_enqueue_script( 'jquery' );
    }
?>
    <script>
    jQuery(document).ready(function($) {
        if ( $( '.tribe-mini-calendar-nav' ).length ) {
            $( '.tribe-mini-calendar-nav-link.next-month' ).trigger( 'click' );
        }
    });
    </script>
<?php
}

That’ll push the calendar one month ahead on page load. Need it to go two months ahead? Just add more calls of .trigger( ‘click’ ) – for example, to make it go three months ahead:

$( '.tribe-mini-calendar-nav-link.next-month' ).trigger( 'click' ).trigger( 'click' ).trigger( 'click' );

A bit of a hack, and not very pretty…but just an idea. Might help!

Cheers,
George

[magnusfriis]

Hi again George,

Thank you so much again for your help – I really appreciate it.

I think I’ve might found a solution by using the calendar in the tribe-bar. That leads me to question: Is there a way I can make the dropdown calendar open all the time – and not only on ‘click’? (see image http://magnusfriis.dk/calendar.png). I can’t figure out where in the code to change that.

If that is possible I think I can style and use that instead of the widget calendar.

Thanks again again a bunch!

Best, Magnus

[George]

Hey Magnus,

No problem, thank you for your patience here – as for keeping the Tribe Bar dropdown calendar open all the time, the best solution I can think of would be to add CSS like the following to the bottom of your theme’s style.css file:

div.datepicker.datepicker-dropdown {
    display: block !important;
}

Inline-block would work too:

div.datepicker.datepicker-dropdown {
    display: inline-block !important;
}

I hope that helps!

[magnusfriis]

Thanks for your patience too.

Unfortunately, it doesn’t make any difference with the css, I’ve already tried that.

Once again – I really appreciate your help.
I’m on vacation tomorrow and one week ahead, so I won’t be able to test it before I’m back next week.

Best, M

[George]

Hey Magnus,

Cool, thanks for the heads-up about your traveling and such. Just to be 100% clear, when you mention already having tried CSS, do you literally mean that you added this exact code to the bottom of your theme’s style.css file?


div.datepicker.datepicker-dropdown {
display: block !important;
}

If not, does doing that help at all?

Sorry to repeat this query, it’s just the best solution I can think of at the moment and I want to be 100% clear that we’ve ruled it out before heading into JavaScript solutions.

Speaking of which, would you be comfortable with JavaScript solutions? They can be harder to maintain but might work here, if CSS won’t.

Cheers!
George

[magnusfriis]

Hi George,

I’m back! 🙂
Yes, I’ve added the exact code at the bottom of my css file – and nothing happened. Would be great if you have a JavaScript trick.

Best, Magnus

[George]

Hey Magnus,

Sorry about that. Not sure why that’s not working. The only other solution I can think of in a reasonable amount of time is something with JavaScript to force that width change – this is quite ugly and not a normally-recommended method for style customizations, but it might work.

Basically, you’ll first just want to set up a JavaScript function in the footer of your page with the same method as I demonstrated earlier in this thread for the “fake” widget click. So, something like this to set up the <script> tags within which you can write the custom JS:


add_action( 'wp_footer', 'example_js_force_calendar_width', 100 );

function example_example_js_force_calendar_width_widget_click() {
if ( ! wp_script_is( 'jquery', 'enqueued' ) ) {
wp_enqueue_script( 'jquery' );
}
?>
<script>
jQuery(document).ready(function($) {
$( '.datepicker.datepicker-dropdown.dropdown-menu' ).css({
'width': 700,
'max-width': 700
});
});
</script>
<?php
}


That works for me, so hopefully it does for you, too.

Cheers,
George

[magnusfriis]

Hmm, it is still not showing unless I am clicking on it. I’m a bit insecure that i’m doing it right, when it works for you. Here you can see some screenshots of my pasted code and site, so you perhaps can see if i am totally misunderstanding. 🙂
http://magnusfriis.dk/george/

Best, Magnus

[George]

Hey Magnus,

The code is added fine, I was just a goober and forgot that you were trying to also keep it open at all times! 🙂

We don’t offer customization support here “officially” so I just wanted to note that I might have to bring the thread to a close soon, but basically here you can try some things by reworking that code like this:


$( '.datepicker.datepicker-dropdown.dropdown-menu' ).css({
'width': 700,
'max-width': 700
}).show();


You could also try triggering a click there on page load, you could try to force it open with some CSS different than what I recommended earlier, etc.

The addition of .show() like I have above should work – let me know what you find!

Cheers,
George

[magnusfriis]

That’s totally fair. Thank you so much for all your help and patience. I will let you know, what my solution will be.

Best, Magnus

[George]

Cool, thanks for understanding and for your patience Magnus! I’ll leave this thread open for now so you can post an update on your progress if you think of it. If not – no worries, but note that our automatic Support Droid will close this thread after 2 weeks if no replies are made.

In that case, you can open a new thread and just link to this one for reference, if you feel strongly enough about updating us on this. If we don’t hear from you though, no worries either! 🙂 And we’ll assume that things (hopefully) are working well.

Cheers!
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts