Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Calendar

Browse source
This commit is contained in:
Julia Svinareva 2019-10-30 11:17:15 +03:00
parent 86cdc7ae89
commit 6d14719bb6
2 changed files with 59 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
apps/common/main/lib/component/Calendar.js
View file

@ -36,7 +36,6 @@ if (Common === undefined)
define([ define([
'common/main/lib/component/BaseView', 'common/main/lib/component/BaseView',
'common/main/lib/util/utils' 'common/main/lib/util/utils'
], function () { ], function () {
'use strict'; 'use strict';
@ -60,7 +59,7 @@ define([
options: { options: {
date: undefined, date: undefined,
firstday: 0 // 0 or 1 firstday: 0 // 0 - sunday, 1 - monday
}, },
initialize : function(options) { initialize : function(options) {
@ -78,7 +77,7 @@ define([
me.options.firstday = options.firstday; me.options.firstday = options.firstday;
} }
me._state = undefined; me._state = undefined; // 0 - month, 1 - months, 2 - years
me.render(); me.render();
}, },
@ -112,13 +111,19 @@ define([
onClickPrev: function () { onClickPrev: function () {
var me = this; var me = this;
if (me._state === 'month') { if (me._state === 0) {
me.currentDate.setMonth(me.currentDate.getMonth() - 1); var d = new Date(me.currentDate);
me.renderMonth(me.currentDate); d.setMonth(d.getMonth() - 1);
} else if (me._state === 'months') { if (d.getFullYear() > 0) {
me.currentDate.setFullYear(me.currentDate.getFullYear() - 1); me.renderMonth(d);
me.renderMonths(me.currentDate); }
} else if (me._state === 'years') { } else if (me._state === 1) {
var d = new Date(me.currentDate);
d.setFullYear(d.getFullYear() - 1);
if (d.getFullYear() > 0) {
me.renderMonths(d);
}
} else if (me._state === 2) {
var year = me.currentDate.getFullYear(), var year = me.currentDate.getFullYear(),
newYear; newYear;
if (year % 10 !== 0) { if (year % 10 !== 0) {
@ -127,20 +132,28 @@ define([
} else { } else {
newYear = year - 1; newYear = year - 1;
} }
if (newYear > 0) {
me.currentDate.setFullYear(newYear); me.currentDate.setFullYear(newYear);
me.renderYears(newYear); me.renderYears(newYear);
} }
}
}, },
onClickNext: function () { onClickNext: function () {
var me = this; var me = this;
if (me._state === 'month') { if (me._state === 0) {
me.currentDate.setMonth(me.currentDate.getMonth() + 1); var d = new Date(me.currentDate);
me.renderMonth(me.currentDate); d.setMonth(d.getMonth() + 1);
} else if (me._state === 'months') { if (d.getFullYear() > 0) {
me.currentDate.setFullYear(me.currentDate.getFullYear() + 1); me.renderMonth(d);
me.renderMonths(me.currentDate); }
} else if (me._state === 'years') { } else if (me._state === 1) {
var d = new Date(me.currentDate);
d.setFullYear(d.getFullYear() + 1);
if (d.getFullYear() > 0) {
me.renderMonths(d);
}
} else if (me._state === 2) {
var year = me.currentDate.getFullYear(), var year = me.currentDate.getFullYear(),
newYear; newYear;
if (year % 10 !== 9) { if (year % 10 !== 9) {
@ -149,16 +162,18 @@ define([
} else { } else {
newYear = year + 1; newYear = year + 1;
} }
if (newYear > 0) {
me.currentDate.setFullYear(newYear); me.currentDate.setFullYear(newYear);
me.renderYears(newYear); me.renderYears(newYear);
} }
}
}, },
renderYears: function (year) { renderYears: function (year) {
var me = this, var me = this,
year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear()); year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear());
me._state = 'years'; me._state = 2;
var firstYear = year, var firstYear = year,
lastYear = year; lastYear = year;
@ -211,13 +226,15 @@ define([
curDate = (_.isDate(date)) ? date : (me.currentDate ? me.currentDate : new Date()), curDate = (_.isDate(date)) ? date : (me.currentDate ? me.currentDate : new Date()),
year = curDate.getFullYear(); year = curDate.getFullYear();
me._state = 'months'; me._state = 1;
me.currentDate = curDate;
// Number of year // Number of year
me.topTitle = _.template([ me.topTitle = _.template([
'<label>' + year + '</label>' '<div class="button"><label>' + year + '</label></div>'
].join('')); ].join(''));
me.cmpEl.find('.calendar-header .title').html(me.topTitle); me.cmpEl.find('.calendar-header .title').html(me.topTitle);
me.cmpEl.find('.calendar-header .title').off();
me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderYears, me)); me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderYears, me));
me.bottomTitle = _.template([ me.bottomTitle = _.template([
@ -260,7 +277,7 @@ define([
renderMonth: function (date) { renderMonth: function (date) {
var me = this; var me = this;
me._state = 'month'; me._state = 0;
var firstDay = me.options.firstday; var firstDay = me.options.firstday;
// Current date // Current date
@ -270,12 +287,16 @@ define([
curNumberDayInMonth = curDate.getDate(), curNumberDayInMonth = curDate.getDate(),
curYear = curDate.getFullYear(); curYear = curDate.getFullYear();
me.currentDate = curDate;
// Name month // Name month
me.topTitle = _.template([ me.topTitle = _.template([
'<label>' + me.monthNames[curMonth] + '</label>', '<div class="button">',
'<label>' + curYear + '</label>' '<label>' + me.monthNames[curMonth] + ' ' + curYear + '</label>',
'</div>'
].join('')); ].join(''));
me.cmpEl.find('.calendar-header .title').html(me.topTitle); me.cmpEl.find('.calendar-header .title').html(me.topTitle);
me.cmpEl.find('.calendar-header .title').off();
me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderMonths, me)); me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderMonths, me));
// Name days of week // Name days of week
@ -343,7 +364,7 @@ define([
me.monthPicker = new Common.UI.DataView({ me.monthPicker = new Common.UI.DataView({
el: $('.calendar-content'), el: $('.calendar-content'),
store: new Common.UI.DataViewStore(arrDays), store: new Common.UI.DataViewStore(arrDays),
itemTemplate: _.template('<div class="number-day <% if (isToday) { %> today <% } %> <% if (indexInWeek === 6 || indexInWeek === 0) { %> weekend <% } %> <% if (!isCurrentMonth) { %> no-current-month <% } %>" data-number="<%= dayNumber %>" data-month="<%= month %>" data-year="<%= year %>"><%= dayNumber %></div>') itemTemplate: _.template('<div class="number-day<% if (isToday) { %> today<% } %><% if (indexInWeek === 6 || indexInWeek === 0) { %> weekend<% } %><% if (!isCurrentMonth) { %> no-current-month<% } %>" data-number="<%= dayNumber %>" data-month="<%= month %>" data-year="<%= year %>"><%= dayNumber %></div>')
}); });
}, },

7
apps/common/main/resources/less/calendar.less
View file

@ -37,14 +37,18 @@
.title { .title {
margin-top: 4px; margin-top: 4px;
margin-bottom: 3px; margin-bottom: 3px;
padding: 2px 10px 0;
font-size: 13px; font-size: 13px;
label { label {
padding: 2px 10px 0;
display: block;
font-weight: bold; font-weight: bold;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-right: 6px; margin-right: 6px;
} }
} }
.button {
height: 100%;
width: 100%;
&:hover { &:hover {
background-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2);
cursor: pointer; cursor: pointer;
@ -52,6 +56,7 @@
cursor: pointer; cursor: pointer;
} }
} }
}
} }
} }