Skip to content

Commit

Permalink
Merge pull request #2085 from smeup/kup-calendar-fix
Browse files Browse the repository at this point in the history 
kup-date-picker/kup-card-calendar: show/hide previous/next month days in calendar
  • Loading branch information
@lucafoscili
lucafoscili authored Sep 27, 2024
2 parents d6093a6 + 356c14b commit 89d749c
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 49 deletions.
10 changes: 10 additions & 0 deletions packages/ketchup/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1822,6 +1822,11 @@ export namespace Components {
* @default true
*/
"showIcon": boolean;
/**
* Sets show previous/next month days in calendar
* @default true
*/
"showPreviousNextMonthDays": boolean;
/**
* Sets the sizing of the textfield of the datepicker
* @default KupComponentSizing.MEDIUM
Expand Down Expand Up @@ -7235,6 +7240,11 @@ declare namespace LocalJSX {
* @default true
*/
"showIcon"?: boolean;
/**
* Sets show previous/next month days in calendar
* @default true
*/
"showPreviousNextMonthDays"?: boolean;
/**
* Sets the sizing of the textfield of the datepicker
* @default KupComponentSizing.MEDIUM
Expand Down
16 changes: 14 additions & 2 deletions packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,11 @@
.item {
text-align: center;

.item-number {
cursor: pointer;
color: var(--kup_card_text_color);
}

&:not(.selected) .item-number:hover {
background-color: var(--kup_card_selected_color_hover);
}
Expand All @@ -103,8 +108,13 @@
}
}

.item-disabled {
.item-number {
color: var(--kup-text-disabled);
}
}

.item-number {
cursor: pointer;
display: flex;
justify-content: center;
margin: auto;
Expand All @@ -113,7 +123,9 @@
text-transform: capitalize;
@include kup-body-compact-01;
line-height: 2.5em;
color: var(--kup_card_text_color);
&.today {
text-decoration: underline;
}
}

.today-navigation-button {
Expand Down
73 changes: 64 additions & 9 deletions packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import {
KupDateTimeFormatOptionsMonth,
KupDatesFormats,
} from '../../../managers/kup-dates/kup-dates-declarations';
import { KupDom, KupManager } from '../../../managers/kup-manager/kup-manager-declarations';
import {
KupDom,
KupManager,
} from '../../../managers/kup-manager/kup-manager-declarations';
import { KupObj } from '../../../managers/kup-objects/kup-objects-declarations';
import { SourceEvent } from '../../kup-date-picker/kup-date-picker-declarations';
import { KupCard } from '../kup-card';
Expand Down Expand Up @@ -39,8 +42,19 @@ export function prepareCalendar(component: KupCard) {
setValue(component, new Date(opts.initialValue as string));
}
}
if (opts.firstDayIndex !== null && opts.firstDayIndex !== undefined)
if (
opts.firstDayIndex !== null &&
opts.firstDayIndex !== undefined
) {
el.kupData.firstDayIndex = opts.firstDayIndex;
}
if (
opts.showPreviousNextMonthDays != null &&
opts.showPreviousNextMonthDays !== undefined
) {
el.kupData.showPreviousNextMonthDays =
opts.showPreviousNextMonthDays;
}
opts.resetStatus = false;
}
}
Expand Down Expand Up @@ -94,13 +108,11 @@ export function prepareCalendar(component: KupCard) {
id: 'change-view-button',
};
const goToTodayDateButton: FButtonProps = {
icon:"calendar",
icon: 'calendar',
wrapperClass: 'today-navigation-button kup-neutral',
styling: FButtonStyling.FLAT,
// label: 'Oggi',
title: kupManager.language.translate(
KupLanguageGeneric.TODAY
),
title: kupManager.language.translate(KupLanguageGeneric.TODAY),
onClick: () => setDateToday(component),
};
//text-transform:capitalize
Expand Down Expand Up @@ -179,6 +191,16 @@ function getFirstDayIndex(component: KupCard): number {
return 1;
}

function isShowPreviousNextMonthDays(component: KupCard): boolean {
const el = component.rootElement as KupCardBuiltInCalendar;
if (
el.kupData.showPreviousNextMonthDays !== null &&
el.kupData.showPreviousNextMonthDays !== undefined
)
return el.kupData.showPreviousNextMonthDays;
return true;
}

function getView(component: KupCard): SourceEvent {
const el = component.rootElement as KupCardBuiltInCalendar;
if (el.kupData.calendarView) return el.kupData.calendarView;
Expand Down Expand Up @@ -226,17 +248,30 @@ function createDaysCalendar(component: KupCard) {

const firstMonthDay = new Date(selectedYear, selectedMonth, 1);
const lastMonthDay = new Date(selectedYear, selectedMonth + 1, 0);
const today = new Date();

const lastPreviousMonthDate = new Date(selectedYear, selectedMonth, 0);

const finish: boolean = false;
let currentDayIndex = getFirstDayIndex(component);
const firstMonthDayIndex = firstMonthDay.getDay();
let row = [];
let daysForRowAdded = 0;
const showPreviousNextMonthDays = isShowPreviousNextMonthDays(component);
let substractDays = 0;
while (!finish) {
if (currentDayIndex == firstMonthDayIndex) {
break;
}
row.push(<td class="item empty"></td>);
row.unshift(
<td class="item-disabled">
<span class="item-number">
{showPreviousNextMonthDays
? lastPreviousMonthDate.getDate() - substractDays++
: ''}
</span>
</td>
);
currentDayIndex++;
daysForRowAdded++;
if (currentDayIndex > 6) {
Expand All @@ -245,6 +280,7 @@ function createDaysCalendar(component: KupCard) {
}
let dayCount = 1;
while (dayCount <= lastMonthDay.getDate()) {
let currentRowLastItem = daysForRowAdded;
for (let i = daysForRowAdded; i < 7; i++) {
let dayClass = 'item';
let dataIndex = {
Expand All @@ -263,11 +299,19 @@ function createDaysCalendar(component: KupCard) {
) {
dayClass += ' selected';
}
let itemClass = 'item-number';
if (
today.getFullYear() == selectedYear &&
today.getMonth() == selectedMonth &&
today.getDate() == dayCount
) {
itemClass += ' today';
}
row.push(
<td class={dayClass}>
<span
{...dataIndex}
class="item-number"
class={itemClass}
onClick={() => {
onCalendarItemClick(
component,
Expand All @@ -280,10 +324,21 @@ function createDaysCalendar(component: KupCard) {
</td>
);
dayCount++;
currentRowLastItem = i;
if (dayCount > lastMonthDay.getDate()) {
break;
}
}
let nextMonthDay = 1;
for (let i = currentRowLastItem + 1; i < 7; i++) {
row.push(
<td class="item-disabled">
<span class="item-number">
{showPreviousNextMonthDays ? nextMonthDay++ : ''}
</span>
</td>
);
}
if (row.length > 0) {
tbody.push(<tr>{row}</tr>);
row = [];
Expand Down Expand Up @@ -536,7 +591,7 @@ function onCalendarItemClick(component: KupCard, value: string) {
refresh(component);
}
function setDateToday(component: KupCard): void {
setValue(component, new Date())
setValue(component, new Date());
component.onKupClick(component.rootElement.id, new Date().toISOString());
refresh(component);
}
2 changes: 2 additions & 0 deletions packages/ketchup/src/components/kup-card/kup-card-declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface KupCardBuiltInCalendarOptions {
initialValue?: string | KupObj;
firstDayIndex?: number;
resetStatus: boolean;
showPreviousNextMonthDays?: boolean;
}
/**
* Data of the built-in calendar.
Expand All @@ -43,6 +44,7 @@ export interface KupCardBuiltInCalendarData {
day?: number;
month?: number;
year?: number;
showPreviousNextMonthDays?: boolean;
}
/**
* Html element of the built-in calendar.
Expand Down
1 change: 1 addition & 0 deletions packages/ketchup/src/components/kup-date-picker/kup-date-picker-declarations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export enum KupDatePickerProps {
initialValue = 'Sets the initial value of the component',
sizing = 'Sets the size of the component. Medium is the default',
showIcon = 'You can set if u want to show the calendar icon to toggle date-picker. True is the default',
showPreviousNextMonthDays = 'You can set if show the previous/next month days in calendar',
}
export enum SourceEvent {
DATE = 'date',
Expand Down
59 changes: 32 additions & 27 deletions packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,11 @@ export class KupDatePicker {
* @default true
*/
@Prop() showIcon: boolean = true;
/**
* Sets show previous/next month days in calendar
* @default true
*/
@Prop() showPreviousNextMonthDays: boolean = true;

/*-------------------------------------------------*/
/* I n t e r n a l V a r i a b l e s */
Expand Down Expand Up @@ -390,37 +395,36 @@ export class KupDatePicker {
this.ISOvalue = '';
this.notISOvalue = newValue;
// check if input contains special codes
if (!newValue || this.isAlphanumeric(newValue)) {
if (!eventDetailValue) {
/** donothing */
} else {
if (this.kupManager.dates.isIsoDate(eventDetailValue)) {
if (isOnInputEvent != true) {
this.ISOvalue = eventDetailValue;
this.notISOvalue = '';
}
} else if (this.kupManager.dates.isValid(eventDetailValue)) {
newValue = this.kupManager.dates.format(
this.kupManager.dates.normalize(
eventDetailValue,
KupDatesNormalize.DATE
),
KupDatesFormats.ISO_DATE
);
this.refreshPickerComponentValue(newValue);
if (isOnInputEvent != true) {
this.ISOvalue = newValue;
this.notISOvalue = '';
}
} else if (this.kupManager.dates.isIsoDate(eventDetailValue)) {
if (isOnInputEvent != true) {
this.ISOvalue = eventDetailValue;
this.notISOvalue = '';
}
}
if (newValue != null) {
if (eventToRaise != null) {
eventToRaise.emit({
id: this.rootElement.id,
value: newValue,
});
} else if (this.isAlphanumeric(eventDetailValue)) {
/** donothing */
} else if (this.kupManager.dates.isValid(eventDetailValue)) {
newValue = this.kupManager.dates.format(
this.kupManager.dates.normalize(
eventDetailValue,
KupDatesNormalize.DATE
),
KupDatesFormats.ISO_DATE
);
this.refreshPickerComponentValue(newValue);
if (isOnInputEvent != true) {
this.ISOvalue = newValue;
this.notISOvalue = '';
}
}

if (newValue != null && eventToRaise) {
eventToRaise.emit({
id: this.rootElement.id,
value: newValue,
});
}
}

refreshPickerComponentValue(value: string) {
Expand Down Expand Up @@ -588,6 +592,7 @@ export class KupDatePicker {
initialValue: this.ISOvalue,
firstDayIndex: this.firstDayIndex,
resetStatus: true,
showPreviousNextMonthDays: this.showPreviousNextMonthDays,
},
};

Expand Down
21 changes: 11 additions & 10 deletions packages/ketchup/src/components/kup-date-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | ----------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
| `data` | -- | Props of the sub-components. | `Object` | `null` |
| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` |
| `firstDayIndex` | `first-day-index` | First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop | `number` | `1` |
| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` |
| `outlined` | `outlined` | When set to true, the component will be rendered as an outlined field. | `boolean` | `false` |
| `showIcon` | `show-icon` | Sets the sizing of the textfield of the datepicker | `boolean` | `true` |
| `sizing` | `sizing` | Sets the sizing of the textfield of the datepicker | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` |
| Property | Attribute | Description | Type | Default |
| --------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `customStyle` | `custom-style` | Custom style of the component. | `string` | `''` |
| `data` | -- | Props of the sub-components. | `Object` | `null` |
| `disabled` | `disabled` | Defaults at false. When set to true, the component is disabled. | `boolean` | `false` |
| `firstDayIndex` | `first-day-index` | First day number (0 - sunday, 1 - monday, ...) TODO: manage with kupDates.locale, remove prop | `number` | `1` |
| `initialValue` | `initial-value` | Sets the initial value of the component | `string` | `''` |
| `outlined` | `outlined` | When set to true, the component will be rendered as an outlined field. | `boolean` | `false` |
| `showIcon` | `show-icon` | Sets the sizing of the textfield of the datepicker | `boolean` | `true` |
| `showPreviousNextMonthDays` | `show-previous-next-month-days` | Sets show previous/next month days in calendar | `boolean` | `true` |
| `sizing` | `sizing` | Sets the sizing of the textfield of the datepicker | `KupComponentSizing.EXTRA_LARGE \| KupComponentSizing.EXTRA_SMALL \| KupComponentSizing.LARGE \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM` |


## Events
Expand Down
10 changes: 9 additions & 1 deletion packages/ketchup/src/date-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,21 @@ <h4>init on Monday</h4>
initial-value="2021-11-01"
></kup-date-picker
></div>
<h4>init on Monday, not show previous/next month days</h4>
<div style="width: 250px">
<kup-date-picker
id="date-picker1"
initial-value="2021-11-01"
show-previous-next-month-days="false"
></kup-date-picker
></div>

<h4>init on Sunday</h4>
<kup-date-picker
id="date-picker2"
first-day-index="0"
></kup-date-picker>
<h4>Sizing</h4>
<h4>Sizing (first day Tuesday)</h4>

<kup-date-picker
id="date-picker3"
Expand Down

0 comments on commit 89d749c

Please sign in to comment.