JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://unpkg.com/[email protected]/ical.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

JavaScript

const url = "https://cors-anywhere.herokuapp.com/https://calendar.google.com/calendar/ical/joshpullen27%40gmail.com/private-1cb461565731e4fe1c222283327d54f2/basic.ics";

(async function() {
	const data = await fetch(url)
    .then(res => res.text())
    .then(file => ical.parseICS(file));
  
  console.log(data);

	for (var k in data) {
    // When dealing with calendar recurrences, you need a range of dates to query against,
    // because otherwise you can get an infinite number of calendar events.
    var rangeStart = moment("2017-01-01");
    var rangeEnd = moment("2017-12-31");


    var event = data[k]
    if (event.type === 'VEVENT') {

      var title = event.summary;
      var startDate = moment(event.start);
      var endDate = moment(event.end);

      // Calculate the duration of the event for use with recurring events.
      var duration = parseInt(endDate.format("x")) - parseInt(startDate.format("x"));

      // Simple case - no recurrences, just print out the calendar event.
      if (typeof event.rrule === 'undefined')
      {
        console.log('title:' + title);
        console.log('startDate:' + startDate.format('MMMM Do YYYY, h:mm:ss a'));
        console.log('endDate:' + endDate.format('MMMM Do YYYY, h:mm:ss a'));
        console.log('duration:' + moment.duration(duration).humanize());
        console.log();
      }

      // Complicated case - if an RRULE exists, handle multiple recurrences of the event.
      else if (typeof event.rrule !== 'undefined')
      {
      	console.log("rrule", event.rrule);
        // For recurring events, get the set of event start dates that fall within the range
        // of dates we're looking for.
        var dates = event.rrule.between(
          rangeStart.toDate(),
          rangeEnd.toDate(),
          true,
          function(date, i) {return true;}
        )

        // The "dates" array contains the set of dates within our desired date range range that are valid
        // for the recurrence rule. ...