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

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

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

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

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