Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP Week selection support #2

Open
wants to merge 2 commits into
base: calendar
Choose a base branch
from
Open

WIP Week selection support #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cadee62
WIP Week selection support
Ribesg Sep 12, 2016
6a08207
Fixed error when setting null date
Ribesg Sep 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 42 additions & 2 deletions src/definitions/modules/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@
cell.data(metadata.date, cellDate);
var disabled = (isDay && cellDate.getMonth() !== month) || !module.helper.isDateInRange(cellDate, mode);
var active = module.helper.dateEqual(cellDate, date, mode);
active = active || isDay && settings.type === 'week' && module.helper.weekDiff(cellDate, date) === 0;
cell.toggleClass(className.disabledCell, disabled);
cell.toggleClass(className.activeCell, active);
if (!isHour && !isMinute) {
Expand Down Expand Up @@ -300,6 +301,7 @@
var startDate = module.get.startDate();
var endDate = module.get.endDate();
var rangeDate = (updateRange ? focusDate : null) || date || (!isTouch ? focusDate : null);
var isWeek = settings.type === 'week';

container.find('td').each(function () {
var cell = $(this);
Expand All @@ -313,9 +315,22 @@
var inRange = !rangeDate ? false :
((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) ||
(!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate)));
cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown));
cell.toggleClass(className.focusCell, !isWeek && focused && (!isTouch || isTouchDown));
cell.toggleClass(className.rangeCell, inRange && !active && !disabled);
});

if (isWeek) {
container.find('tr').each(function(){
var row = $(this);
var cell = row.find('td').first();
var cellDate = cell.data(metadata.date);
if (!cellDate) {
return;
}
var isSameWeek = module.helper.weekDiff(cellDate, focusDate) === 0;
row.toggleClass(className.focusCell, isSameWeek && (!isTouch || isTouchDown));
});
}
}
},

Expand Down Expand Up @@ -495,7 +510,7 @@
if (!(settings.disableMonth || settings.type === 'year') || settings.type === 'month') {
validModes.push('month');
}
if (settings.type.indexOf('date') >= 0) {
if (settings.type === 'week' || settings.type.indexOf('date') >= 0) {
validModes.push('day');
}
}
Expand Down Expand Up @@ -534,6 +549,8 @@
fireChange = fireChange !== false;
date = module.helper.sanitiseDate(date);
date = module.helper.dateInRange(date);
if (date && settings.type === 'week')
date = module.helper.getFirstDayOfWeek(date);

var text = formatter.datetime(date, settings);
if (fireChange && settings.onChange.call(element, date, text) === false) {
Expand Down Expand Up @@ -602,6 +619,7 @@
var complete = forceSet || mode === 'minute' ||
(settings.disableMinute && mode === 'hour') ||
(settings.type === 'date' && mode === 'day') ||
(settings.type === 'week' && mode === 'day') ||
(settings.type === 'month' && mode === 'month') ||
(settings.type === 'year' && mode === 'year');
if (complete) {
Expand Down Expand Up @@ -720,6 +738,28 @@
mergeDateTime: function (date, time) {
return (!date || !time) ? time :
new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes());
},
getFirstDayOfWeek: function(date) {
var d = new Date(+date);
if (settings.firstDayOfWeek === 0)
d.setDate(d.getDate() - d.getDay());
else if (settings.firstDayOfWeek === 1)
d.setDate(d.getDate() - (d.getDay() || 7) + settings.firstDayOfWeek);
return d;
},
getWeek: function(date) {
// See http://stackoverflow.com/a/6117889
var d = new Date(+date);
d.setHours(0, 0, 0, 0);
// TODO Only supports firstDayOfWeek = Monday or Sunday
d.setDate(d.getDate() + 4 - (d.getDay() || (settings.firstDayOfWeek === 1 ? 7 : 0)));
return [d.getFullYear(), Math.ceil((((d - new Date(d.getFullYear(), 0, 1)) / 8.64e7) + 1) / 7)];
},
weekDiff: function(date1, date2) {
var d1 = module.helper.getWeek(date1);
var d2 = module.helper.getWeek(date2);
// Approximate diff, but we only really care about if it's 0 and the sign if it isn't
return (d2[0] * 52 + d2[1]) - (d1[0] * 52 + d1[1]);
}
},

Expand Down
8 changes: 8 additions & 0 deletions src/definitions/modules/calendar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,14 +134,22 @@
box-shadow: @rangeInvertedBoxShadow;
}

.ui.calendar .calendar:focus .ui.table tbody tr.focus,
.ui.calendar .calendar.active .ui.table tbody tr.focus,
.ui.calendar .calendar:focus .ui.table tbody tr td.focus,
.ui.calendar .calendar.active .ui.table tbody tr td.focus {
box-shadow: @focusBoxShadow;
/* TODO For some reason the tr does not get the default :focus outline, so I enforced it here temporarily, help? */
outline: rgb(77, 144, 254) auto 5px;
}

.ui.calendar .calendar:focus .ui.table.inverted tbody tr.focus,
.ui.calendar .calendar.active .ui.table.inverted tbody tr.focus,
.ui.calendar .calendar:focus .ui.table.inverted tbody tr td.focus,
.ui.calendar .calendar.active .ui.table.inverted tbody tr td.focus {
box-shadow: @focusInvertedBoxShadow;
/* TODO For some reason the tr does not get the default :focus outline, so I enforced it here temporarily, help? */
outline: rgb(77, 144, 254) auto 5px;
}

.loadUIOverrides();