international timezones and timezones

Author: samuelcolvin

src/components/appointments/Appointments.js

@@ -27,8 +27,8 @@ const Apt = ({apt, props, appointment_attendees}) => {
   return (
     <Link to={props.root.url(`appointment/${apt.link}`)} className="tcs-item">
       <div className={`tcs-apt ${colour_contrast(apt.service_colour)}`} style={{background: apt.service_colour}}>
-        <div style={{fontWeight: 700, marginRight: 10}}>
-          {props.config.date_fns.format(apt.start, 'HH:mm')}
+        <div style={{fontWeight: 700, marginRight: 8, minWidth: 68}}>
+          {props.config.format_dt(apt.start, 'time')}
         </div>
         <div className="tcs-truncate">
           {apt.topic}<Bull/>{apt.service_name}
@@ -52,8 +52,8 @@ const AptDayGroup = ({appointments, props, appointment_attendees}) => {
   return (
     <div className="tcs-apt-group-day">
       <div className="tcs-day">
-        {props.config.date_fns.format(first_apt.start, 'ddd')}
-        <div className="tcs-day-no">{props.config.date_fns.format(first_apt.start, 'd')}</div>
+        {props.config.format_dt(first_apt.start, 'weekday')}
+        <div className="tcs-day-no">{props.config.format_dt(first_apt.start, 'day')}</div>
       </div>
       <div>
         {appointments.map(apt => (
@@ -167,7 +167,7 @@ class Appointments extends Component {
       <div className="tcs-app tcs-appointments">
         {months.map(({date, appointments}, i) => (
           <div className="tcs-apt-group-month" key={i}>
-            <div className="tcs-title">{this.props.config.date_fns.format(date, 'MMMM')}</div>
+            <div className="tcs-title">{this.props.config.format_dt(date, 'month')}</div>
             {appointments.map((appointments, j) => (
               <AptDayGroup key={j} appointments={appointments} props={this.props}
                 appointment_attendees={this.state.appointment_attendees}/>

src/components/appointments/AptModal.js

@@ -1,18 +1,20 @@
 import React, { Component } from 'react'
-import {If, IfElse, DisplayExtraAttrs} from '../shared/Tools'
+import {Bull, If, IfElse, DisplayExtraAttrs} from '../shared/Tools'
 import {Tick, CalendarPlus, CalendarTimes} from '../shared/Svgs'
 import Modal from '../shared/Modal'
 
 const get_attendees = (appointment_attendees, apt_id) => (appointment_attendees && appointment_attendees[apt_id]) || []
 const NEW_STUDENT_ID = 999999999
-const DATE_FMT = 'MMM Do h:m a'
 
 
 const AptDetails = ({apt, spaces_available, attending, props}) => {
   const c = props.config
   const CalendarIcon = spaces_available ? CalendarPlus : CalendarTimes
   return (
     <div>
+      <div className="tcs-right tcs-timezone">
+        {props.config.get_text('assuming_timezone', {timezone: props.config.timezone})}
+      </div>
       <div className={`tcs-apt-details ${spaces_available ? 'tcs-bookable' : ''}`}>
         <div>
           <CalendarIcon/>
@@ -25,10 +27,10 @@ const AptDetails = ({apt, spaces_available, attending, props}) => {
         </div>
         <IfElse v={apt.start.substr(0, 10) === apt.finish.substr(0, 10)}>
           <div>
-            {c.date_fns.format(apt.start, DATE_FMT)} &bull; {c.format_duration(apt.finish, apt.start)}
+            {c.format_dt(apt.start, 'full')}<Bull/>{c.format_duration(apt.finish, apt.start)}
           </div>
           <div>
-          {c.date_fns.format(apt.start, DATE_FMT)} - {c.date_fns.format(apt.finish, DATE_FMT)}
+          {c.format_dt(apt.start, 'full')} - {c.format_dt(apt.finish, 'full')}
           </div>
         </IfElse>
       </div>
@@ -179,7 +181,7 @@ class AptModal extends Component {
     const title = (
       <span>
         <span className="tcs-circle" style={{background: apt.service_colour}}/>
-        {apt.topic} &bull; {apt.service_name}
+        {apt.topic} <Bull/> {apt.service_name}
       </span>
     )
     const students = this.get_students()

src/formatting.js

@@ -21,8 +21,27 @@ export function format_money (amount) {
   }
 }
 
-export function format_date (ts) {
-  return this.date_fns.format(new Date(ts), this.format.date)
+const intl_options = Intl.DateTimeFormat().resolvedOptions()
+const locale = intl_options.locale || 'en-US'
+export const timezone = intl_options.timeZone || 'utc'
+// const LOCALE = 'en-US'
+const FORMAT_OPTIONS = {
+  full: {day: 'numeric', month: 'long', hour: 'numeric', minute: 'numeric'},
+  month: {month: 'short'},
+  day: {day: 'numeric'},
+  weekday: {weekday: 'short'},
+  time: {hour: 'numeric', minute: 'numeric'}
+}
+
+export function format_dt (ts, fmt) {
+  // timestampts are alwasy in utc thus we need to add the 0000 and js will take care of the rest
+  const d = new Date(ts + '+0000')
+  let options = FORMAT_OPTIONS[fmt]
+  if (!options) {
+    console.warn('unknown date format:', fmt)
+
+  }
+  return Intl.DateTimeFormat(locale, options).format(d)
 }
 
 export function format_duration (ts1, ts2) {

src/index.js

@@ -2,12 +2,11 @@ import Raven from 'raven-js'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import 'babel-polyfill'
-import format from 'date-fns/format'
 import './main.scss'
 import App from './components/App'
 import {BrowserRouter, HashRouter} from 'react-router-dom'
 import {auto_url_root, get_company_options} from './utils'
-import {format_money, format_duration, get_text} from './formatting'
+import {format_money, format_dt, format_duration, get_text, timezone} from './formatting'
 
 const raven_config = {
   release: process.env.REACT_APP_RELEASE,
@@ -73,6 +72,7 @@ const STRINGS = {
   location: 'Location',
   not_you_sign_out: 'Not you? sign out',
   added: 'Added',
+  assuming_timezone: '(Times assume your timezone is {timezone})'
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal', 'appointments']
@@ -150,7 +150,8 @@ window.socket = async function (public_key, config) {
     datetime: 'HH:mm DD/MM/YYYY',
     date: 'DD/MM/YYYY'
   }
-  config.date_fns = {format}
+  config.timezone = config.timezone || timezone
+  config.format_dt = (config.format_dt || format_dt).bind(config)
   config.format_duration = (config.format_duration || format_duration).bind(config)
   config.format_money = (config.format_money || format_money).bind(config)
 

src/styles/appointments.scss

@@ -90,6 +90,11 @@ $colour-positive: #83aa68;
   }
 }
 
+.tcs-timezone {
+  font-size: 13px;
+  color: #444;
+  margin-bottom: 5px;
+}
 
 .tcs-signout {
   color: $brand-colour;