How do I add two icons one to share my event date on iCal (.ics) and one for google cal on my events page?

This is an HTML, CSS and javaScript question, not PHP, and I'll put it in the right Topic Areas for you.

The reason for moving the question is that PHP is a server-side technology.  It has no knowledge of anything like a mouse movement unless the client browser makes a request to the server.  Details here:
https://www.experts-exchange.com/articles/11271/Understanding-Client-Server-Protocols-and-Web-Applications.html

Really I would be happy just to know how to generate the ics file and the google calendar share url in real time. Rest I can do myself

I am not sure I understand the question - can you elaborate?

What icons do you want to show?
What on the page link you provided am I looking for in terms of the hover active items?

Each thumbnail on the page indicated above is an even with a date (or dates if it lasts more than one day), an even name, an event organizer and an even place. I would like to auto-generate for each two thumbnails - thumbnail 1: click to save the event to you ical, thumbnail 2: click to add to your google cal

:D

Ok but how do you want to do that?

Do you want to include icons next to the map and social media icons?

If so what icons do you want to put in there?

If this is what you want to do then it is a case of adding the links to the compare-list div and then styling it / changing the icons as needed

<div class="compare-list mar-top-30">
  <a href="https://www.missionfamily.org/mese-famiglie-rimini"> </a>
  <a style="color:#66B3F2;" href="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Piazza+Cavour%2C+Rimini%2C+Italia&amp;ie=UTF8&amp;hq=&amp;hnear=Piazza+Cavour%2C+Piazza+Cavour%2C+47921+Rimini+RN%2C+Italy&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed" data-original-title="Vedi Ubicazione" data-toggle="tooltip" class="locationmap cboxElement"><i class="fa fa-map-marker"></i></a>
	<a data-original-title="condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
        <a href="https://www.associazioneculturaleinasia.it/wp-admin/admin-ajax.php?action=eventon_ics_download&event_id=2784&sunix=1442077200&eunix=1442097000" target="_blank"><i class="fa fa-calendar"></i></a>
        <a href="http://www.google.com/calendar/event?action=TEMPLATE&text=Giornata+inAsia+2015%2F16&dates=20150912T150000Z/20150912T203000Z&details=Giornata+inAsia+2015%2F16&location=Via+Brolo+Musella+27%2C+Ferrazze%2C+San+Martino+B.A.+%E2%80%93+Verona" target="_blank"><i class="fa fa-google"></i></a>
</div>

Select allOpen in new window

Can't test but that would be the general idea.

Hi,
I know how to generate the html code via php to add two more icons inside the hover overlay. What I don't know is how to generate the ics compatible file (for iOS) and google cal compatible link per event which would allow users to save each event to calendar.

Here is an example:

http://www.old-find.com/

as you can see in the screenshot if you scroll down you will find a section called Events Calendar, click ont the first even and towards the end  you will see two items:

Calendar GoogleCal

I would like to achieve what those buttons do.

What I need to know is how to reorganize my existing data in the right format to make the output from those links compatible with ical and google cal.