Allow visitors to save/download events to their iCal or Google Calendar. The ical.php needs to go into your functions folder, and be pulled in. Included are sample styles, markup, ACF field option export, + variable pulling. Not all options will carry across to iCal.

Add to Google and iCal.js

module.exports = function() {

  function sendInformation(){
    var months = [
      '01',
      '02',
      '03',
      '04',
      '05',
      '06',
      '07',
      '08',
      '08',
      '09',
      '11',
      '12'
    ];

    var $calContainer = $('.cal-container');
      $calContainer.each(function (i, el) {

      var $container  = $(el),
          title       = $container.data('event-name'),
          time        = $container.data('event-date'),
          details     = $container.data('event-details'),
          address     = $container.data('event-address'),
          ical        = $container.find('a.cal-ical'),
          gcal        = $container.find('a.cal-google');

      // Get times
      time      = new Date(time);
      startTime = time.getUTCFullYear() + '' + months[time.getUTCMonth()] + '' + ( ((time.getUTCDate().toString()).length < 2) ? '0' + time.getUTCDate().toString() : time.getUTCDate().toString() );
      endTime   = time.getUTCFullYear() + '' + months[time.getUTCMonth()] + '' + ( (((time.getUTCDate() + 1).toString()).length < 2) ? '0' + (time.getUTCDate() + 1).toString() : (time.getUTCDate() + 1).toString() );

      // Apple ical
      url = templateDir + '/functions/site/ical.php?n='+title+'&when=' + Math.round(time.getTime() / 1000);
      ical.attr('href', url);

      // Google Calendar
      url = 'http://www.google.com/calendar/event?action=TEMPLATE&text='+title+'&dates='+startTime+'/'+endTime+'&details='+details+'&location='+address+'&trp=false&sprop=&sprop=name:';
      gcal.attr('href', url);
    });
  }

  sendInformation();

}

Advanced Custom Fields Event Options.json

[
  {
    "key": "group_5487697a86aa3",
    "title": "Event Options",
    "fields": [
      {
        "key": "field_5487698219ae4",
        "label": "Date",
        "name": "event_date",
        "prefix": "",
        "type": "date_picker",
        "instructions": "",
        "required": 1,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "display_format": "F j, Y",
        "return_format": "Y-m-d",
        "first_day": 1
      },
      {
        "key": "field_54877e154d7fe",
        "label": "Start Time",
        "name": "event_start_time",
        "prefix": "",
        "type": "text",
        "instructions": "(optional)",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "default_value": "",
        "placeholder": "",
        "prepend": "",
        "append": "",
        "maxlength": "",
        "readonly": 0,
        "disabled": 0
      },
      {
        "key": "field_54876a0f19ae5",
        "label": "Date End",
        "name": "event_date_end",
        "prefix": "",
        "type": "date_picker",
        "instructions": "If the event spans only one day, the end date needs to be the same as start date. Otherwise, pick out an end date.",
        "required": 1,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "display_format": "F j, Y",
        "return_format": "Y-m-d",
        "first_day": 1
      },
      {
        "key": "field_54877e5b4d7ff",
        "label": "End Time",
        "name": "event_end_time",
        "prefix": "",
        "type": "text",
        "instructions": "(optional)",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "default_value": "",
        "placeholder": "",
        "prepend": "",
        "append": "",
        "maxlength": "",
        "readonly": 0,
        "disabled": 0
      },
      {
        "key": "field_54876a3b19ae6",
        "label": "Where",
        "name": "event_where",
        "prefix": "",
        "type": "text",
        "instructions": "Where is the event located at? A short description.",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "default_value": "",
        "placeholder": "",
        "prepend": "",
        "append": "",
        "maxlength": "",
        "readonly": 0,
        "disabled": 0
      },
      {
        "key": "field_54876a5d19ae7",
        "label": "Description",
        "name": "event_description",
        "prefix": "",
        "type": "textarea",
        "instructions": "A short description of the event.",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "default_value": "",
        "placeholder": "",
        "maxlength": "",
        "rows": "",
        "new_lines": "br",
        "readonly": 0,
        "disabled": 0
      },
      {
        "key": "field_54876a7d19ae8",
        "label": "Address",
        "name": "event_address",
        "prefix": "",
        "type": "google_map",
        "instructions": "Is there an event address?",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "center_lat": "",
        "center_lng": "",
        "zoom": "",
        "height": ""
      },
      {
        "key": "field_549138e884add",
        "label": "Home Photo Crop",
        "name": "home_photo_crop",
        "prefix": "",
        "type": "image",
        "instructions": "By default, we will take the featured image (found on the right sidebar) and crop it down to 300x300px. This image is used on the \"Latest News and Events\" section on the home page. \r\n\r\nIf you would like to have a custom crop show up, simply upload an image that is 300x300pixels, or the image will get cropped down for you. This image will take precedence over the featured image.",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
          "width": "",
          "class": "",
          "id": ""
        },
        "return_format": "id",
        "preview_size": "thumbnail",
        "library": "all",
        "min_width": 0,
        "min_height": 0,
        "min_size": 0,
        "max_width": 0,
        "max_height": 0,
        "max_size": 0,
        "mime_types": ""
      }
    ],
    "location": [
      [
        {
          "param": "post_type",
          "operator": "==",
          "value": "events"
        }
      ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": [
      "the_content"
    ]
  }
]

ical.php

<?php

function get_timezone_offset($remote_tz, $timestamp="now", $origin_tz = null) {
    if($origin_tz === null) {
        if(!is_string($origin_tz = date_default_timezone_get())) {
            return false; // A UTC timestamp was returned -- bail out!
        }
    }
    $origin_dtz = new DateTimeZone($origin_tz);
    $remote_dtz = new DateTimeZone($remote_tz);
    $origin_dt = new DateTime($timestamp, $origin_dtz);
    $remote_dt = new DateTime($timestamp, $remote_dtz);
    $offset = $origin_dtz->getOffset($origin_dt) - $remote_dtz->getOffset($remote_dt);
    return $offset;
}


if(!empty($_GET['n']))
  $title = $_GET['n'];
else
  die('please provide a title');


if(!empty($_GET['when'])){

  $starttime = intval($_GET['when']);

  //adjust?
  $tzoffset = get_timezone_offset('UTC');
  //echo $tzoffset; exit;

  $starttime = $starttime - $tzoffset;

}else
  die('please provide a time');

$desc = !empty($_GET['desc']) ? $_GET['desc'] : '';


$filename = $starttime . '-' . substr(str_replace(' ', '', $title), 0, 15);

$data = 'BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Foobar Corporation//NONSGML Foobar//EN
METHOD:REQUEST
BEGIN:VEVENT
UID:' . date('Ymd\THis', $starttime) . '-467615721-coh
DTSTAMP:' . date('Ymd\THis', $starttime) . '
DTSTART:' . date('Ymd\THis', $starttime) . '
SUMMARY: ' . $title . '
DESCRIPTION: ' . $desc . '
END:VEVENT
END:VCALENDAR';

header("Content-type:text/calendar");
header('Content-Disposition: attachment; filename="' . $filename . '.ics"');
header('Content-Length: '.strlen($data));
Header('Connection: close');

echo $data;

exit;

Markup.php

<?php
  // Set up common variables
  // Your event dates in the ACF options should follow the same Format as in createFromFormat.
  $title              = get_the_title();
  $permalink          = get_permalink();
  $location           = get_field( 'event_address' );
  $address            = explode( ',', $location['address'] );
  $date               = DateTime::createFromFormat('Y-m-d', get_field('event_date'));
  $date_end           = DateTime::createFromFormat('Y-m-d', get_field('event_date_end'));
  $date_formatted     = $date->format('l M. d');
  $date_end_formatted = $date_end->format('l M. d');
  $where              = get_field( 'event_where' );
  $description        = get_field( 'event_description' );
?>

<div class="cal-container" data-event-name="<?php echo $title ?>" data-event-details="<?php echo $description ?>" data-event-date="<?php echo $event_time ?>" data-event-address="<?php echo $location['address'] ?>">
  <span class="cal-add">Add to Calendar</span>
  <a class="cal-add cal-ical" href="#" target="calendar"><span>iCal</span></a>
  <a class="cal-add cal-google" href="#" target="calendar"><span>Google</span></a>
</div>

Sample CSS Styles.scss

.cal-container {
  // Buttons
  .cal-add {
    display: inline-block;
    float: left;
    padding: rem(10px 12px);
    color: #fff;
    font-size: rem(12px);
    background: transparent;
    border: 3px solid $color-sage;
    @include mq('medium') {
      font-size: rem(14px);
    }
    @include mq('large') {
      font-size: rem(16px);
      padding: rem(14px 24px);
    }   
    &:nth-child(1) {
      background: $color-sage;
      border-top-left-radius: rem(4px);
      border-bottom-left-radius: rem(4px);
      border-width: rem(3px 0 3px 3px);
    }
    &:nth-child(2) {
      border-width: rem(3px 3px 3px 0);
    }
    &:nth-child(3) {
      border-width: rem(3px 3px 3px 0);
      border-top-right-radius: rem(4px);
      border-bottom-right-radius: rem(4px);
      border-right-color: $color-sage;
    }
  }
  // Style up add links.
  a.cal-add {
    color: $color-sage;
    &:hover {
      background: rgba($color-sage, .9);
      color: #fff;
    }
  }
}