Making Google Calendar Events Clickable

[kurstxmo]

I’m using Google Calendar to display some regional events on my website and below the calendar is a listing of the events and event names for the current month. I’m interested in figuring out how I can make each event being listed clickable so that a visitor can click and be taken directly to the event sponsors web page where they provide more information on the event.

I tried posting this question on the google forum, but the expert response was basically “good luck with that.” Haha, any help is appreciated. The site I’m working on is http://parkhotelparkcity.com/. While my js experience is very limited, I figure this is going to be a js solution, so that’s why I’m posting here.

https://productforums.google.com/forum/#!msg/calendar/RXx4Sv-78sY/8iuEW_zPCAAJ

[Mottie]

If I had to guess, I think you want to add the same link that opens when you click inside the calendar to also work on the events at the bottom?

If so, use this code change (line 32) inside of your index.js file to do this:

Original

s = '<div class="eventdate"> ' + formatDate(eventdate, defaults.dateFormat.trim()) + ' - ' + summary + '</div>';

change it to:

s = '<div class="eventdate"><a target="_blank" href="' + item.htmlLink + '">' + formatDate(eventdate, defaults.dateFormat.trim()) + '</a> - ' + summary + '</div>';

This change will let the user click on the date. It will open a new browser tab to the Google calendar event.

[Mottie]

And actually, now that I think about it… it would be even better if that information would pop up in a tooltip instead of making the user go to another page… add that additional information into a data attribute, then use one of the many tooltips scripts out there to display it on hover.

[kurstxmo]

Thanks for all your help Mottie. I have gone with your first solution for now, it was a very simple edit to make, though I modified it to make the whole line containing date & event name clickable. I’m a newb when it comes to js, so not exactly sure how you figured out what needed to be edited and where to find it. As far as the tooltip suggestion, I will have to look into it. Like I said, I don’t have very strong js skills, so not exactly sure how I’d get the info I need to populate in the tooltip in an automated way without having to hand code the info in every time a new event is published, but I like that suggestion a lot. Maybe once I up my game I’ll be able to figure out how to do that. Thanks again!

[Mottie]

You don’t need that much extra work to make a tooltip…

In your index.js, there is already the code needed to add “when” and “where”, it just needs to be wrapped in a div and hidden.

s = [
  '<div class="eventdate wrapper">',
    '<a target="_blank" href="' + item.htmlLink + '">' + formatDate(eventdate, defaults.dateFormat.trim()) + ' - ' + summary + '</a>',
    '<div class="tooltip">',
      '<div class="eventdate"> When: '+ formatDate(eventdate, defaults.dateFormat.trim()) +'</div>',
      (location ? '<div class="location">Where: ' + location + '</div>' : '' ),
      (description ? '<div class="description">'+ description +'</div>' : '' ),
    '</div>',
  '</div>'
].join('');
$($div).append('<li>' + s + '</li>');

Then you can add some css like in this demo to make a css tooltip.

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

[Author]

Posts