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 the site where I want to add the icons (per event thumbnail):
https://www.missionfamily.org/index.php?_route_=events

This is what I want the icons to do (for each even the below content should be for that event, obviously):

icon1:  https://www.associazioneculturaleinasia.it/wp-admin/admin-ajax.php?action=eventon_ics_download&event_id=2784&sunix=1442077200&eunix=1442097000

icon 2: 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



I am looking for a php or a jquery solution. I would like the icons to appear when you hover over each even thumbnail (where you will see other icons present).

Any ideas?

thanks
badwolfffAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
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:
http://www.experts-exchange.com/articles/11271/Understanding-Client-Server-Protocols-and-Web-Applications.html
badwolfffAuthor Commented:
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
Julian HansenCommented:
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?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

badwolfffAuthor Commented:
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
Julian HansenCommented:
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>

Open in new window


Can't test but that would be the general idea.
badwolfffAuthor Commented:
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.
badwolfffAuthor Commented:
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.
Julian HansenCommented:
So what you are actually asking is this

You want a link on your site that triggers the download of a Calendar and / or Google Calendar file for each event on your site.

The format for iCal is here https://en.wikipedia.org/wiki/ICalendar
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
UID:uid1@example.com
DTSTAMP:19970714T170000Z
ORGANIZER;CN=John Doe:MAILTO:john.doe@example.com
DTSTART:19970714T170000Z
DTEND:19970715T035959Z
SUMMARY:Bastille Day Party
END:VEVENT
END:VCALENDAR

Open in new window

To send this from PHP you would do something like this
<?php
// CHANGE VARS AS NECESSARY
$data = isset($_POST['data']) ? $_POST['data'] : false;
if ($data) {
  $timestamp = date('Ymd\THis\Z');
  $startdate = date('Ymd\THis\Z', strtotime($data['startdate']));
  $enddate = date('Ymd\THis\Z', strtotime($data['enddate']));
  $organiser = "{$data['organiser']}:MAILTO:{$data['organiser_email']}";
  $from_email_address = "john.doe@example.com";
  $cal = <<< CALENDAR
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
UID:{$from_email_address}
DTSTAMP:{$timestamp}
ORGANIZER;CN={$organiser}
DTSTART:{$startdate}
DTEND:{$enddate}
SUMMARY:{$data['summary']}
END:VEVENT
END:VCALENDAR
CALENDAR;
  // Setup your headers
  $filename_here = str_replace(' ', '-', $data['summary']) . '.ics'; // CHANGE AS NEEDED
  header('Content-type: text/calendar; charset=utf-8');
  header("Content-Disposition: inline; filename={$filename_here}");
  header("Pragma: no-cache");
  header("Expires: 0");
  header("Content-Length: " . strlen($cal));
  echo $cal;
}

Open in new window

Working sample here. Demonstrates the iCalendar format.
Instead of using a form you could use a link that passes an event ID back to the server which then looks up the relevant values based on the id and does the same thing.

Google calendar uses a similar process - you would create the file in the same way just using a different template - information here on the file format https://support.google.com/calendar/answer/37118?hl=en

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.