Norwegian date formatting

package.json

@@ -20,6 +20,7 @@
     "gatsby-transformer-sharp": "^2.1.1",
     "html-entities": "^1.2.1",
     "lodash": "^4.17.5",
+    "moment": "^2.24.0",
     "node-sass": "^4.9.2",
     "parcel-bundler": "^1.9.4",
     "prop-types": "^15.6.0",

src/components/EventList.js

@@ -3,7 +3,26 @@ import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Img from 'gatsby-image'
 
+import moment from 'moment';
+import 'moment/locale/nb'
+moment.locale('nb')
+
 export default class EventList extends React.Component {
+  formatDate(dt) {
+    return moment(dt).format('D. MMMM')
+  }
+
+  formatTime(dt) {
+    return moment(dt).format('HH:mm')
+  }
+
+  formatTimes(start, end, sep) {
+    if (!end) {
+      return this.formatTime(start)
+    }
+    return this.formatTime(start) + sep + this.formatTime(end)
+  }
+
   render() {
     const { events, title } = this.props
 
@@ -26,8 +45,8 @@ export default class EventList extends React.Component {
                   {event.title}
                 </h2>
                 <div className="event-meta">
-                  <span class="event-start">18:00</span>
-                  {event.start_time}&mdash;{event.end_time}
+                  <span class="event-start">{this.formatTime(event.start_time)}</span>
+                  <span class="event-date">{this.formatDate(event.start_time)}</span>
                 </div>
               </header>
             </Link>
@@ -47,8 +66,8 @@ export const pageQuery = graphql`
   fragment EventListFields on wordpress__wp_events {
     id
     title
-    start_time(formatString: "MMMM DD, YYYY")
-    end_time(formatString: "MMMM DD, YYYY")
+    start_time
+    end_time
     featured_media {
       localFile {
         ...FluidImage

src/templates/event.js

@@ -5,6 +5,10 @@ import { graphql, Link } from 'gatsby'
 import Layout from '../components/Layout'
 import Img from 'gatsby-image'
 
+import moment from 'moment'
+import 'moment/locale/nb'
+moment.locale('nb')
+
 const formatPrices = (regular, student) => {
   let cc = ''
   if (regular && regular != 0) {
@@ -39,12 +43,23 @@ export const EventTemplate = ({
             <div className="venue">
               i {venue}
             </div>
-            <div className="start-time">
-              Start: {startTime}
+            <div className="event-date">
+              Dag:{' '}
+              <span className="event-date-weekday">{moment(startTime).format('dddd')} </span>
+              <span className="event-date-day">{moment(startTime).format('D.')} </span>
+              <span className="event-date-month">{moment(startTime).format('MMMM')} </span>
+              {/* Only specify year if different. */}
+              {!moment(startTime).isSame(new Date(), 'year') &&
+                <span className="event-date-year">{moment(startTime).format('YYYY')} </span>
+              }
             </div>
+            <div className="end-time">
+                Start: {moment(startTime).format('HH:mm')}
+            </div>
+            {/* TODO: make the API stop assuming event duration is 2 hours when unspecified? */}
             {endTime &&
               <div className="end-time">
-                Slutt: {endTime}
+                Slutt: {moment(endTime).format('HH:mm')}
               </div>
             }
             <div className="price">
@@ -86,7 +101,7 @@ const Event = ({ data }) => {
         content={event.content}
         featuredMedia={event.featured_media}
         startTime={event.start_time}
-        endTime={event.start_time}
+        endTime={event.end_time}
         venue={event.venue}
         facebookUrl={event.facebook_url}
         ticketUrl={event.ticket_url}

yarn.lock

@@ -8026,7 +8026,7 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5, mkdirp@^0.5.0, mkdirp
   dependencies:
     minimist "0.0.8"
 
-moment@^2.21.0:
+moment@^2.21.0, moment@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==