vue ui i18n: localized days of week and initials in calendar view

pywb/templates/frame_insert.html

@@ -44,6 +44,20 @@ html, body
             oct_short: "{{ _Q('Oct') }}",
             nov_short: "{{ _Q('Nov') }}",
             dec_short: "{{ _Q('Dec') }}",
+            mon_short: "{{ _Q('Mon') }}",
+            tue_short: "{{ _Q('Tue') }}",
+            wed_short: "{{ _Q('Wed') }}",
+            thu_short: "{{ _Q('Thu') }}",
+            fri_short: "{{ _Q('Fri') }}",
+            sat_short: "{{ _Q('Sat') }}",
+            sun_short: "{{ _Q('Sun') }}",
+            mon_long: "{{ _Q('Monday') }}",
+            tue_long: "{{ _Q('Tuesday') }}",
+            wed_long: "{{ _Q('Wednesday') }}",
+            thu_long: "{{ _Q('Thursday') }}",
+            fri_long: "{{ _Q('Friday') }}",
+            sat_long: "{{ _Q('Saturday') }}",
+            sun_long: "{{ _Q('Sunday') }}",
             "All-time": "{{ _Q('All-time') }}",
             "show timeline":"{{ _Q('show timeline') }}",
             "hide timeline":"{{ _Q('hide timeline') }}",

pywb/templates/query.html

@@ -44,6 +44,20 @@
         oct_short: "{{ _Q('Oct') }}",
         nov_short: "{{ _Q('Nov') }}",
         dec_short: "{{ _Q('Dec') }}",
+        mon_short: "{{ _Q('Mon') }}",
+        tue_short: "{{ _Q('Tue') }}",
+        wed_short: "{{ _Q('Wed') }}",
+        thu_short: "{{ _Q('Thu') }}",
+        fri_short: "{{ _Q('Fri') }}",
+        sat_short: "{{ _Q('Sat') }}",
+        sun_short: "{{ _Q('Sun') }}",
+        mon_long: "{{ _Q('Monday') }}",
+        tue_long: "{{ _Q('Tuesday') }}",
+        wed_long: "{{ _Q('Wednesday') }}",
+        thu_long: "{{ _Q('Thursday') }}",
+        fri_long: "{{ _Q('Friday') }}",
+        sat_long: "{{ _Q('Saturday') }}",
+        sun_long: "{{ _Q('Sunday') }}",
         "All-time": "{{ _Q('All-time') }}",
         "show timeline":"{{ _Q('show timeline') }}",
         "hide timeline":"{{ _Q('hide timeline') }}",

pywb/vueui/src/components/CalendarMonth.vue

@@ -93,7 +93,7 @@
     <div class="calendar-month" :class="{current: isCurrent, 'contains-current-snapshot': containsCurrentSnapshot}">
         <h3>{{getLongMonthName(month.id)}} <span v-if="month.snapshotCount">({{ month.snapshotCount }})</span></h3>
         <div v-if="month.snapshotCount">
-            <span v-for="(day) in ['S', 'M', 'T', 'W', 'H', 'F', 'S']" class="day" :style="dayStyle">{{day}}</span><br/>
+            <span v-for="(dayInitial) in dayInitials" class="day" :style="dayStyle">{{dayInitial}}</span><br/>
             <span v-for="(day,i) in days"><br v-if="i && i % 7===0"/><span class="day" :class="{empty: !day || !day.snapshotCount, 'contains-current-snapshot':dayContainsCurrentSnapshot(day)}" :style="dayStyle"  @click="gotoDay(day, $event)"><template v-if="day"><span class="size" v-if="day.snapshotCount" :style="getDayCountCircleStyle(day.snapshotCount)"> </span><span class="day-id">{{day.id}}</span><span v-if="day.snapshotCount" class="count">{{ $root._(day.snapshotCount !== 1 ? '{count} captures':'{count} capture', {count: day.snapshotCount}) }}</span></template><template v-else v-html="'&nbsp;'"></template></span></span>
         </div>
         <div v-else class="empty">no captures</div>
@@ -112,6 +112,9 @@ export default {
     };
   },
   computed: {
+    dayInitials() {
+      return PywbI18N.instance.getWeekDays().map(d => d.substr(0,1));
+    },
     dayStyle() {
       const s = this.daySize;
       return `height: ${s}px; width: ${s}px; line-height: ${s}px`;

pywb/vueui/src/i18n.js

@@ -24,6 +24,15 @@ export class PywbI18N {
   getMonth(id, type='long') {
     return decodeURIComponent(this.config[PywbI18N.monthIdPrefix[id]+'_'+type]);
   }
+  // can get long (default) or short day string or intial
+  // PywbI18N expects to receive day's initials like:
+  // config.mon_short, config.tue_long, ...., config.<mmm>_short, config.<mmm>_long
+  getWeekDay(id, type='long') {
+    return decodeURIComponent(this.config[id+'_'+type])
+  }
+  getWeekDays(type='long') {
+    return ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'].map(d => this.getWeekDay(d, type));
+  }
   getText(id, embeddedVariableStrings=null) {
     const translated = decodeURIComponent(this.config[id] || id);
     if (embeddedVariableStrings && id.indexOf('{') >= 0 && id.indexOf('}') >= 0 ) {