initial implementation

src/components/Timeline/Event.js

@@ -10,10 +10,6 @@ import ErrorMessage from 'components/elements/ErrorMessage'
 import LoadingMessage from 'components/elements/LoadingMessage'
 import * as eventTypeActions from 'actions/eventTypeActions'
 
-function timeFormattedToPstIstAndGmt (time) {
-  return time ? time.toLocal().toFormat(DateTime.TIME_WITH_SECONDS) : 'Time unknown!'
-}
-
 export const Event = ({
     text,
     time,
@@ -52,7 +48,7 @@ export const Event = ({
         >
                 <CardHeader
                   title={ticketId ? `${ticketId}: ${text}` : text}
-                  subtitle={timeFormattedToPstIstAndGmt(time)}
+                  subtitle={timeFormattedToMultipleZones(time)}
                   actAsExpander
                   showExpandableButton
                   iconStyle={{
@@ -130,4 +126,24 @@ export const mapStateToEventProps = (state, ownProps) => {
   }
 }
 
+const zones = [
+  { shortname: 'PT', iana_zone: 'America/Los_Angeles'},  // PST https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+  { shortname: 'IST', iana_zone: 'Asia/Kolkata'},         // India's IANA zone https://en.wikipedia.org/wiki/Time_in_India
+  { shortname: 'GMT', iana_zone: 'Etc/GMT'}
+]
+
+const format = Object.assign(DateTime.DATE_SHORT, DateTime.TIME_24_WITH_SECONDS)
+
+
+export const timeFormattedToMultipleZones = function (time, timezones = zones) {
+  let timeInMultipleZones = timezones.map((timezone) => {
+    let formatted_time = time.setZone(timezone.iana_zone)
+                             .toLocaleString(format)
+
+    return formatted_time + ' ' + timezone.shortname
+  }).join('; ')
+
+  return timeInMultipleZones
+}
+
 export default connect(mapStateToEventProps)(Event)

test/components/Timeline/EventTest.js

@@ -2,7 +2,7 @@
 import { expect } from 'chai'
 import React from 'react'
 import createComponent from 'test/helpers/shallowRenderHelper'
-import { Event, mapStateToEventProps } from 'components/Timeline/Event'
+import { Event, mapStateToEventProps, timeFormattedToMultipleZones } from 'components/Timeline/Event'
 import BootstrapPlaybook from 'components/Timeline/Playbook/BootstrapPlaybook'
 import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card'
 import { DateTime } from 'luxon';
@@ -53,4 +53,13 @@ describe('Event', function test () {
       expect(eventComponent.props.children[1].props.children[1].type).to.eql(CardText)
     })
   })
+
+  describe('#timeFormattedToMultipleZones', () => {
+    it('defaults to displaying time in Pacific, India Standard, and GMT', () => {
+      const time = DateTime.utc(1970, 1, 1, 0, 0)
+      const expected = '1969-12-31 16:00:00 PT; 1970-1-1 05:30:00 IST; 1970-1-1 00:00:00 GMT'
+
+      expect(timeFormattedToMultipleZones(time)).to.eql(expected)
+    })
+  })
 })