[Calendar]

This commit is contained in:
Julia Svinareva 2019-10-31 13:40:22 +03:00
parent 10957f7d12
commit 9cf1d3443e
2 changed files with 89 additions and 33 deletions

View file

@ -46,9 +46,9 @@ define([
'<div id="calendar" class="calendar-box">', '<div id="calendar" class="calendar-box">',
'<div class="calendar-header">', '<div class="calendar-header">',
'<div class="top-row">', '<div class="top-row">',
'<div id="prev-arrow"><button type="button" style="width: 24px;height: 24px;"><i class="icon mmerge-prev">&nbsp;</i></button></div>', '<div id="prev-arrow"><button type="button"><i class="arrow-prev img-commonctrl">&nbsp;</i></button></div>',
'<div class="title"></div>', '<div class="title"></div>',
'<div id="next-arrow"><button type="button" style="width: 24px;height: 24px;"><i class="icon mmerge-next">&nbsp;</i></button></div>', '<div id="next-arrow"><button type="button"><i class="arrow-next img-commonctrl">&nbsp;</i></button></div>',
'</div>', '</div>',
'<div class="bottom-row">', '<div class="bottom-row">',
'</div>', '</div>',
@ -90,15 +90,15 @@ define([
me.currentDate = me.options.date || new Date(); me.currentDate = me.options.date || new Date();
me.btnPrev = new Common.UI.Button({ me.btnPrev = new Common.UI.Button({
cls: 'btn-toolbar', cls: '',
iconCls: 'mmerge-prev' iconCls: 'arrow-prev img-commonctrl'
}); });
me.btnPrev.render(me.cmpEl.find('#prev-arrow')); me.btnPrev.render(me.cmpEl.find('#prev-arrow'));
me.btnPrev.on('click', _.bind(me.onClickPrev, me)); me.btnPrev.on('click', _.bind(me.onClickPrev, me));
me.btnNext = new Common.UI.Button({ me.btnNext = new Common.UI.Button({
cls: 'btn-toolbar', cls: '',
iconCls: 'mmerge-next' iconCls: 'arrow-next img-commonctrl'
}); });
me.btnNext.render(me.cmpEl.find('#next-arrow')); me.btnNext.render(me.cmpEl.find('#next-arrow'));
me.btnNext.on('click', _.bind(me.onClickNext, me)); me.btnNext.on('click', _.bind(me.onClickNext, me));
@ -203,13 +203,16 @@ define([
arrYears.push({ arrYears.push({
year: (tmpYear > 0) ? tmpYear : '', year: (tmpYear > 0) ? tmpYear : '',
isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false, isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false,
disabled: (tmpYear > 0) ? false : true disabled: (tmpYear > 0) ? false : true,
selected: (_.isDate(me.selectedDate)) ?
(tmpYear === me.selectedDate.getFullYear()) :
(tmpYear === new Date().getFullYear())
}); });
tmpYear++; tmpYear++;
} }
me.yearPicker = new Common.UI.DataView({ me.yearPicker = new Common.UI.DataView({
el: $('.calendar-content'), el: me.cmpEl.find('.calendar-content'),
store: new Common.UI.DataViewStore(arrYears), store: new Common.UI.DataViewStore(arrYears),
itemTemplate: _.template('<div class="name-year <% if (!isCurrentDecade) { %> no-current-decade <% } %>" data-year="<%= year %>"><%= year %></div>') itemTemplate: _.template('<div class="name-year <% if (!isCurrentDecade) { %> no-current-decade <% } %>" data-year="<%= year %>"><%= year %></div>')
}); });
@ -243,6 +246,7 @@ define([
me.cmpEl.find('.calendar-header .bottom-row').html(me.bottomTitle); me.cmpEl.find('.calendar-header .bottom-row').html(me.bottomTitle);
var arrMonths = []; var arrMonths = [];
var today = new Date();
for (var ind = 0; ind < 12; ind++) { for (var ind = 0; ind < 12; ind++) {
arrMonths.push({ arrMonths.push({
@ -250,27 +254,35 @@ define([
nameMonth: me.monthShortNames[ind], nameMonth: me.monthShortNames[ind],
year: year, year: year,
curYear: true, curYear: true,
isCurrentMonth: (ind === curDate.getMonth()) isCurrentMonth: (ind === curDate.getMonth()),
selected: (_.isDate(me.selectedDate)) ?
(ind === me.selectedDate.getMonth() && year === me.selectedDate.getFullYear()) :
(ind === today.getMonth() && year === today.getFullYear())
}); });
} }
year = year + 1;
for (var ind = 0; ind < 4; ind++) { for (var ind = 0; ind < 4; ind++) {
arrMonths.push({ arrMonths.push({
indexMonth: ind, indexMonth: ind,
nameMonth: me.monthShortNames[ind], nameMonth: me.monthShortNames[ind],
year: year + 1, year: year,
curYear: false curYear: false,
selected: (_.isDate(me.selectedDate)) ?
(ind === me.selectedDate.getMonth() && year === me.selectedDate.getFullYear()) :
(ind === today.getMonth() && year === today.getFullYear())
}); });
} }
me.monthPicker = new Common.UI.DataView({ me.monthsPicker = new Common.UI.DataView({
el: $('.calendar-content'), el: me.cmpEl.find('.calendar-content'),
store: new Common.UI.DataViewStore(arrMonths), store: new Common.UI.DataViewStore(arrMonths),
itemTemplate: _.template('<div class="name-month <% if (!curYear) { %> no-cur-year <% } %>" data-month="<%= indexMonth %>" data-year="<%= year %>"><%= nameMonth %></div>') itemTemplate: _.template('<div class="name-month <% if (!curYear) { %> no-cur-year <% } %>" data-month="<%= indexMonth %>" data-year="<%= year %>"><%= nameMonth %></div>')
}); });
me.monthPicker.on('item:click', function (picker, item, record, e) { me.monthsPicker.on('item:click', function (picker, item, record, e) {
var month = record.get('indexMonth'), var month = record.get('indexMonth'),
year = record.get('year'), year = record.get('year'),
date = new Date(year, month); date = new Date();
date.setFullYear(year, month);
me.renderMonth(date); me.renderMonth(date);
}); });
}, },
@ -345,33 +357,60 @@ define([
year = curYear; year = curYear;
} }
var tmp = new Date(year, month, numberDay); var tmp = new Date();
tmp.setFullYear(year, month, numberDay);
var today = new Date();
for(var r = 0; r < rows; r++) { for(var r = 0; r < rows; r++) {
for(var c = 0; c < cols; c++) { for(var c = 0; c < cols; c++) {
var tmpDay = tmp.getDay(),
tmpNumber = tmp.getDate(),
tmpMonth = tmp.getMonth(),
tmpYear = tmp.getFullYear();
arrDays.push({ arrDays.push({
indexInWeek: tmp.getDay(), indexInWeek: tmpDay,
dayNumber: tmp.getDate(), dayNumber: tmpNumber,
month: tmp.getMonth(), month: tmpMonth,
year: tmp.getFullYear(), year: tmpYear,
isToday: (tmp.getDate() === curNumberDayInMonth) ? true : false, isCurrentMonth: tmpMonth === curMonth,
isCurrentMonth: (tmp.getMonth() === curMonth) ? true : false selected: (_.isDate(me.selectedDate)) ?
(tmpNumber === me.selectedDate.getDate() && tmpMonth === me.selectedDate.getMonth() && tmpYear === me.selectedDate.getFullYear()) :
(tmpNumber === today.getDate() && tmpMonth === today.getMonth() && tmpYear === today.getFullYear())
}); });
tmp.setDate(tmp.getDate() + 1); tmp.setDate(tmpNumber + 1);
} }
} }
me.monthPicker = new Common.UI.DataView({ me.monthPicker = new Common.UI.DataView({
el: $('.calendar-content'), el: me.cmpEl.find('.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 (indexInWeek === 6 || indexInWeek === 0) { %> weekend<% } %><% if (!isCurrentMonth) { %> no-current-month<% } %>" data-number="<%= dayNumber %>" data-month="<%= month %>" data-year="<%= year %>"><%= dayNumber %></div>')
});
me.monthPicker.on('item:click', function(picker, item, record, e) {
var day = record.get('dayNumber'),
month = record.get('month'),
year = record.get('year');
if (_.isUndefined(me.selectedDate)) {
me.selectedDate = new Date();
}
me.selectedDate.setFullYear(year, month, day);
me.trigger('date:click', me, me.selectedDate);
}); });
}, },
daysInMonth: function (date) { daysInMonth: function (date) {
var d; var d;
d = date ? new Date(date) : new Date(); d = date ? new Date(date) : new Date();
return (new Date(d.getFullYear(), d.getMonth() + 1, 0)).getDate(); var result = new Date();
result.setFullYear(d.getFullYear(), d.getMonth() + 1, 0);
return result.getDate();
},
setDate: function (date) {
if (_.isDate(date)) {
this.selectedDate = new Date(date);
this.renderMonth(this.selectedDate);
}
}, },
textJanuary: 'January', textJanuary: 'January',

View file

@ -8,17 +8,33 @@
width: 198px; width: 198px;
height: 220px; height: 220px;
border: 1px solid @calendar-bg-color; border: 1px solid @calendar-bg-color;
.top-row {
padding: 0 5px;
}
.btn { .btn {
background-color: transparent; background-color: transparent;
border: none; border: none;
height: 24px; height: 20px;
width: 24px; width: 20px;
margin-top: 5px; margin-top: 4px;
display: flex;
justify-content: center;
align-items: center;
.icon { .icon {
width: 24px; width: 16px;
height: 24px; height: 16px;
display: block; display: block;
position: relative; position: relative;
&.arrow-prev {
background-position: -55px -96px;
}
&.arrow-next {
background-position: -52px -112px;
}
}
&:hover {
background-color: rgba(255,255,255,0.2);
cursor: pointer;
} }
} }
.calendar-header { .calendar-header {
@ -35,8 +51,9 @@
padding: 0; padding: 0;
} }
.title { .title {
margin-top: 4px; width: 100%;
margin-bottom: 3px; margin: 4px 6px 3px 6px;
text-align: center;
font-size: 13px; font-size: 13px;
label { label {
padding: 2px 10px 0; padding: 2px 10px 0;