diff --git a/apps/calendar/js/templates/months_day.js b/apps/calendar/js/templates/months_day.js
index 9f3afa7fbcc8..c937ed0e3f51 100644
--- a/apps/calendar/js/templates/months_day.js
+++ b/apps/calendar/js/templates/months_day.js
@@ -14,12 +14,7 @@ var MonthsDay = create({
this.h('classes')
].join(' ');
- var containerClassList = [
- 'container',
- 'calendar-id-' + calendarId
- ].join(' ');
-
- this.eventTime = function() {
+ var eventTime = (function() {
if (this.arg('isAllDay')) {
return '
';
}
@@ -27,33 +22,29 @@ var MonthsDay = create({
var endTime = formatTime(this.arg('endTime'));
return `${startTime}
${endTime}
`;
- };
+ }.call(this));
- this.eventDetails = function() {
+ var eventDetails = (function() {
var result = '' + this.h('title') + '
';
var location = this.h('location');
if (location && location.length > 0) {
- result += '';
- result += '';
- result += location;
- result += '';
- result += '';
+ result += `
+ ${location}
+ `;
}
-
return result;
- };
-
- return '' +
- '' +
- '
' +
- '
' +
- '
' + this.eventTime() + '
' +
- '
' + this.eventDetails() + '
' +
- '
' +
- '
' +
- '';
+ }.call(this));
+
+ var busytimeId = this.h('busytimeId');
+
+ return `
+
+
+
${eventTime}
+
${eventDetails}
+
+
+ `;
}
});
module.exports = MonthsDay;
diff --git a/apps/calendar/js/views/months_day.js b/apps/calendar/js/views/months_day.js
index c67ee23a5a72..b034dc00f151 100644
--- a/apps/calendar/js/views/months_day.js
+++ b/apps/calendar/js/views/months_day.js
@@ -46,11 +46,19 @@ MonthsDay.prototype = {
changeDate: function(date) {
Parent.prototype.changeDate.apply(this, arguments);
- this.currentDate.innerHTML = dateFormat.localeFormat(
+ var formatId = 'months-day-view-header-format';
+ this.currentDate.textContent = dateFormat.localeFormat(
date,
- navigator.mozL10n.get('months-day-view-header-format')
+ navigator.mozL10n.get(formatId)
);
+ // we need to set the [data-date] and [data-l10n-date-format] because
+ // locale might change while the app is still open
+ this.currentDate.dataset.date = date;
+ this.currentDate.dataset.l10nDateFormat = formatId;
+ this._toggleEmptyMessage();
+ },
+ _toggleEmptyMessage: function() {
var children = this.events.children;
this.emptyMessage.classList.toggle(
'active',
@@ -108,20 +116,12 @@ MonthsDay.prototype = {
add: function() {
Parent.prototype.add.apply(this, arguments);
-
- // If we were showing "No Events" before,
- // we should remove it now.
- this.emptyMessage.classList.remove('active');
+ this._toggleEmptyMessage();
},
remove: function() {
Parent.prototype.remove.apply(this, arguments);
- // If the only event today was just removed,
- // we should add the "No Events" label.
- var children = this.events.children;
- if (!children || children.length === 0) {
- this.emptyMessage.classList.add('active');
- }
+ this._toggleEmptyMessage();
},
render: function() {
diff --git a/apps/calendar/test/unit/views/months_day_test.js b/apps/calendar/test/unit/views/months_day_test.js
index 6c6e21ebe329..7362bb7b3fed 100644
--- a/apps/calendar/test/unit/views/months_day_test.js
+++ b/apps/calendar/test/unit/views/months_day_test.js
@@ -4,6 +4,7 @@ define(function(require) {
var DayChild = require('views/day_child');
var DayTemplate = require('templates/day');
var MonthsDay = require('views/months_day');
+var dateFormat = require('date_format');
suite('Views.MonthsDay', function() {
var subject,
@@ -46,6 +47,36 @@ suite('Views.MonthsDay', function() {
assert.isFalse(subject.renderAllHours);
});
+ test('#changeDate', function() {
+ var currentDate = {
+ textContent: '',
+ dataset: {}
+ };
+ sinon.stub(subject, '_findElement')
+ .withArgs('currentDate')
+ .returns(currentDate);
+
+ subject._toggleEmptyMessage = sinon.spy();
+
+ var now = new Date();
+ var format = 'months-day-view-header-format';
+ subject.changeDate(now);
+
+ assert.deepEqual(currentDate.textContent, dateFormat.localeFormat(
+ now,
+ navigator.mozL10n.get(format)
+ ), 'should set the currentDate textContent');
+
+ assert.deepEqual(currentDate.dataset, {
+ date: now,
+ l10nDateFormat: format
+ }, 'should set l10n dataset');
+
+ assert.ok(
+ subject._toggleEmptyMessage.calledOnce,
+ 'should call _toggleEmptyMessage'
+ );
+ });
suite('#handleEvent', function() {