[Calendar]
This commit is contained in:
parent
10957f7d12
commit
9cf1d3443e
|
@ -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"> </i></button></div>',
|
'<div id="prev-arrow"><button type="button"><i class="arrow-prev img-commonctrl"> </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"> </i></button></div>',
|
'<div id="next-arrow"><button type="button"><i class="arrow-next img-commonctrl"> </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',
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue