Task/event: show current timezone next to events with timezones.

We were previously showing the original timezone which was confusing.
master
Tom Hacohen 5 years ago
parent 52d4ad9967
commit fed79fcfea

@ -2,7 +2,7 @@ import * as React from 'react';
import PimItemHeader from './PimItemHeader'; import PimItemHeader from './PimItemHeader';
import { formatDateRange } from '../helpers'; import { formatDateRange, formatOurTimezoneOffset } from '../helpers';
import { EventType } from '../pim-types'; import { EventType } from '../pim-types';
@ -27,7 +27,7 @@ class Event extends React.PureComponent {
return ( return (
<React.Fragment> <React.Fragment>
<PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}> <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
<div>{formatDateRange(this.props.item.startDate, this.props.item.endDate)} {timezone && <small>({timezone})</small>}</div> <div>{formatDateRange(this.props.item.startDate, this.props.item.endDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
<br /> <br />
<div><u>{this.props.item.location}</u></div> <div><u>{this.props.item.location}</u></div>
</PimItemHeader> </PimItemHeader>

@ -2,7 +2,7 @@ import * as React from 'react';
import PimItemHeader from './PimItemHeader'; import PimItemHeader from './PimItemHeader';
import { formatDate } from '../helpers'; import { formatDate, formatOurTimezoneOffset } from '../helpers';
import { TaskType } from '../pim-types'; import { TaskType } from '../pim-types';
@ -30,10 +30,10 @@ class Task extends React.PureComponent {
<React.Fragment> <React.Fragment>
<PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}> <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
{item.startDate && {item.startDate &&
<div>Start: {formatDate(item.startDate)} {timezone && <small>({timezone})</small>}</div> <div>Start: {formatDate(item.startDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
} }
{item.dueDate && {item.dueDate &&
<div>Due: {formatDate(item.dueDate)} {timezone && <small>({timezone})</small>}</div> <div>Due: {formatDate(item.dueDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
} }
<br /> <br />
<div><u>{this.props.item.location}</u></div> <div><u>{this.props.item.location}</u></div>

@ -90,3 +90,13 @@ export function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
return strStart + ' - ' + strEnd; return strStart + ' - ' + strEnd;
} }
export function formatOurTimezoneOffset() {
let offset = new Date().getTimezoneOffset();
const prefix = (offset > 0) ? '-' : '+';
offset = Math.abs(offset);
const hours = Math.floor(offset / 60);
const minutes = offset % 60;
return `GMT${prefix}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

Loading…
Cancel
Save