[Resolved] Click on a calendar date to view events on that day

[Author]

Posts

[BD]

I have created a custom post type: Important Dates
It has a custom field group associated with it that contains a single 'date' custom field: important-date
I have created three custom posts, each with a different date selected from the date picker: important-date
I've created a view that renders the dates in calendar form:

<wpv-loop>
          <div class="calendar">[types field='important-date' style='calendar'][/types]</div>
		</wpv-loop>

The dates that contain events have been styled to be bigger and underlined - see screenshot.

However, they have the link 'javascript:void(0);' associated with them.

How do I adapt this so I can click on the date and go to the event on that date? Or go a page that contains a list of events on that date?

This is quite and old post - I don't know if it was progressed:
https://toolset.com/2019/06/do-you-need-calendar-view-for-toolset/

Thanks

[Christopher Amirian]

Hi there,

Toolset does not have the Calendar view and the feature is not implemented yet.

If the issue is that you do not have a link to the custom post single page please send the link of your website that you have the calendar in and maybe I can find a way.

But in general, to have a full calendar functionality at the moment wI suggest that you use a third party plugins such as The events Calendar:

hidden link

Thank you

[BD]

Thanks Christopher, I'll be happy to send over the website link if you could set up a private reply? Regards Nick

[Christopher Amirian]

Hi Nick,

I enabled the option. Please select the private checkbox in the next reply.

Thank you.

[Christopher Amirian]

Hi there,

Thank you for providing the login information. I came up with a solution.

I added the [wpv-post-url] shortcode to show the post URL. Then I wrapped it in a div with a class:

<div class="calendar">[types field='important-date' style='calendar'][/types]<div class="the-post-url" style="display: none;">[wpv-post-url]</div></div>

Then I added the JS code below to JS Editor to move that URL to the proper A tag that you made it bold:

(function($) {
    $('div.calendar').each(function() {
      var theURL = $(this).find('.the-post-url').text();
      $(this).find('table a').attr('href', theURL);
    });
})(jQuery);

Now if you check the page you will see that it goes to the inner custom post item.

Thank you.

[BD]

Excellent - thanks for your help