locales and tzs work better

demos/timezones.html

@@ -6,6 +6,7 @@
 <link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
 <script src='../node_modules/moment/moment.js'></script>
 <script src='../node_modules/jquery/dist/jquery.js'></script>
+<script src='../node_modules/superagent/superagent.js'></script><!-- TODO: use this all the way -->
 <script src='../dist/fullcalendar.js'></script>
 <script>
 
@@ -32,14 +33,15 @@
       loading: function(bool) {
         $('#loading').toggle(bool);
       },
-      eventRender: function(event, el) {
-        // render the timezone offset below the event title
-        if (event.start.hasZone()) {
-          $(el).find('.fc-title').after(
-            $('<div class="tzo"/>').text(event.start.format('Z'))
-          );
-        }
-      },
+
+      timeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
+      // TODO: once event API is better:
+      // eventRender: function(event, el) {
+      //   $(el).find('.fc-title').after(
+      //     $('<div class="tzo"/>').text(tz)
+      //   );
+      // },
+
       dayClick: function(date) {
         console.log('dayClick', date.format());
       },

src/Calendar.ts

@@ -28,6 +28,7 @@ import { RangeInput, OptionsInput, EventObjectInput, EventSourceInput } from './
 import { getLocale } from './datelib/locale'
 import { DateEnv, DateInput } from './datelib/env'
 import { DateMarker, startOfDay } from './datelib/marker'
+import { createFormatter } from './datelib/formatting'
 import { Duration, createDuration } from './datelib/duration'
 
 export default class Calendar {
@@ -297,6 +298,39 @@ export default class Calendar {
   }
 
 
+  // Date Formatting Utils
+  // -----------------------------------------------------------------------------------------------------------------
+
+
+  formatDate(d: Date, formatter): string {
+    const { dateEnv } = this
+    return dateEnv.format(dateEnv.createMarker(d), createFormatter(formatter))
+  }
+
+
+  formatRange(d0: Date, d1: Date, formatter, isEndExclusive?: boolean) {
+    const { dateEnv } = this
+    return dateEnv.formatRange(
+      dateEnv.createMarker(d0),
+      dateEnv.createMarker(d1),
+      formatter,
+      { isEndExclusive }
+    )
+  }
+
+
+  formatIso(d: Date, omitTime?: boolean) {
+    const { dateEnv } = this
+    return dateEnv.formatIso(dateEnv.createMarker(d), { omitTime })
+  }
+
+
+  formatWeek(d: Date, display?: string) {
+    const { dateEnv } = this
+    return dateEnv.formatWeek(dateEnv.createMarker(d), display as any)
+  }
+
+
   // Loading Triggering
   // -----------------------------------------------------------------------------------------------------------------
 

src/datelib/env.ts

@@ -304,6 +304,8 @@ export class DateEnv {
     }
   }
 
+  // TODO: choke on timeZoneName: long
+  // TODO: accept just { timeZoneName: 'short' } and do the right thing
   format(marker: DateMarker, formatter: DateFormatter, dateOptions: any = {}) {
     return formatter.format(
       {
@@ -349,6 +351,7 @@ export class DateEnv {
     )
   }
 
+  // TODO: somehow roll this into format() ?
   formatWeek(marker: DateMarker, display?: 'numeric' | 'narrow' | 'short'): string {
     let { locale } = this
     let parts = []

src/options.ts

@@ -40,7 +40,7 @@ export const globalDefaults = {
   endParam: 'end',
   timezoneParam: 'timezone',
 
-  timezone: false,
+  timezone: 'UTC', // TODO: throw error if given falsy value?
 
   // allDayDefault: undefined,