Skip to content

PLASMA-8275: add custom quarterNames in Calendar-like #3198

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

Merged
TitanKuzmich merged 2 commits into from
Sep 28, 2026
Merged

PLASMA-8275: add custom quarterNames in Calendar-like #3198

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
8d54bb9
docs: add custom quarter names example
TitanKuzmich Sep 25, 2026
8c4f82f
feat: add custom quarterNames to Calendar-like
TitanKuzmich Sep 25, 2026
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
18 changes: 17 additions & 1 deletion packages/plasma-new-hope/src/components/Calendar/Calendar.component-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@ describeFn('Calendar', () => {
uncontrolled = false,
renderFromDate,
onChangeVisibleDate,
quarterNames,
} = args;
const [value, setValue] = useState(baseValue);

Expand Down Expand Up @@ -223,7 +224,12 @@ describeFn('Calendar', () => {
renderFromDate,
}),
Months: getCalendarComponent({ type: 'Months', eventMonthList: monthEvents, stretched }),
Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: quarterEvents, stretched }),
Quarters: getCalendarComponent({
type: 'Quarters',
eventQuarterList: quarterEvents,
quarterNames,
stretched,
}),
Years: getCalendarComponent({ type: 'Years', eventYearList: yearEvents, stretched }),
};

Expand All @@ -247,6 +253,16 @@ describeFn('Calendar', () => {
cy.matchImageSnapshot();
});

it('custom quarter names', () => {
const quarterNames = ['Первый квартал', 'Второй квартал', 'Третий квартал', 'Четвертый квартал'];

mount(<Demo baseValue={baseDate} type="Quarters" quarterNames={quarterNames} />);

quarterNames.forEach((quarterName) => {
cy.contains('[role="gridcell"]', quarterName).should('be.visible');
});
});

itSkipForWebkit('default: double calendar', () => {
mount(
<div style={{ width: '1200px', height: '1134px', overflow: 'hidden' }}>
Expand Down
20 changes: 20 additions & 0 deletions packages/plasma-new-hope/src/components/Calendar/Calendar.template-doc.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,26 @@ export function App() {
}
```

## Пользовательские названия кварталов.

Названия кварталов задаются с помощью свойства `quarterNames`. По умолчанию используются значения `Q1`, `Q2`, `Q3`, `Q4`.

```tsx live
import React from 'react';
import { CalendarBase } from '@salutejs/{{ package }}';

export function App() {
const quarterNames = ['Первый квартал', 'Второй квартал', 'Третий квартал', 'Четвертый квартал'];

return (
<CalendarBase
type="Quarters"
quarterNames={quarterNames}
/>
);
}
```

## Выбор языка.
Для выбора языка необходимо указать свойство `locale: 'ru' | 'en'`.

Expand Down
5 changes: 5 additions & 0 deletions packages/plasma-new-hope/src/components/Calendar/Calendar.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,11 @@ export interface Calendar extends HTMLAttributes<HTMLDivElement> {
* Список отключенных кварталов.
*/
disabledQuarterList?: DisabledDay[];
/**
* Названия кварталов.
* @default ['Q1', 'Q2', 'Q3', 'Q4']
*/
quarterNames?: string[];
/**
* Список событий по годам.
*/
Expand Down
2 changes: 2 additions & 0 deletions packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const calendarBaseRoot = (
disabledMonthList,
eventQuarterList,
disabledQuarterList,
quarterNames,
eventYearList,
disabledYearList,
locale = 'ru',
Expand Down Expand Up @@ -305,6 +306,7 @@ export const calendarBaseRoot = (
max={max}
eventList={eventQuarterList}
disabledList={disabledQuarterList}
quarterNames={quarterNames}
hoveredQuarter={hoveredItem}
selectIndexes={selectIndexes}
onChangeQuarter={handleOnChangeQuarter}
Expand Down
3 changes: 3 additions & 0 deletions packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const calendarDoubleRoot = (
disabledMonthList,
eventQuarterList,
disabledQuarterList,
quarterNames,
eventYearList,
disabledYearList,
locale = 'ru',
Expand Down Expand Up @@ -401,6 +402,7 @@ export const calendarDoubleRoot = (
max={max}
eventList={eventQuarterList}
disabledList={disabledQuarterList}
quarterNames={quarterNames}
hoveredQuarter={hoveredItem}
selectIndexes={selectIndexes}
onChangeQuarter={handleOnChangeQuarter}
Expand All @@ -419,6 +421,7 @@ export const calendarDoubleRoot = (
max={max}
eventList={eventQuarterList}
disabledList={disabledQuarterList}
quarterNames={quarterNames}
hoveredQuarter={hoveredItem}
selectIndexes={selectIndexes}
onChangeQuarter={handleOnChangeQuarter}
Expand Down
1 change: 1 addition & 0 deletions packages/plasma-new-hope/src/components/Calendar/hooks/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export type UseMonthsArgs = {

export type UseQuartersArgs = {
includeEdgeDates?: boolean;
quarterNames?: string[];
} & UseDateStructureArgs;

export type UseYearsArgs = {
Expand Down
18 changes: 14 additions & 4 deletions packages/plasma-new-hope/src/components/Calendar/hooks/useQuarters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,20 @@ import type { UseQuartersArgs } from './types';
/**
* Хук для получения списка месяцев.
*/
export const useQuarters = ({ date, value, eventList, disabledList, min, max, includeEdgeDates }: UseQuartersArgs) =>
export const useQuarters = ({
date,
value,
eventList,
disabledList,
min,
max,
includeEdgeDates,
quarterNames = QUARTER_NAMES,
}: UseQuartersArgs) =>
useMemo(() => {
const quarters = QUARTER_NAMES.map((quarterName: string) => {
const { monthIndex, day } = quarterDates[quarterName];
const quarters = QUARTER_NAMES.map((defaultQuarterName, quarterIndex) => {
const quarterName = quarterNames[quarterIndex] ?? defaultQuarterName;
const { monthIndex, day } = quarterDates[quarterIndex];

return {
quarterName,
Expand Down Expand Up @@ -48,4 +58,4 @@ export const useQuarters = ({ date, value, eventList, disabledList, min, max, in
}

return getMatrix<DateItem>(quarters, 2);
}, [date, value, eventList, disabledList, max, min]);
}, [date, value, eventList, disabledList, max, min, includeEdgeDates, quarterNames]);
2 changes: 2 additions & 0 deletions packages/plasma-new-hope/src/components/Calendar/ui/CalendarQuarters/CalendarQuarters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const CalendarQuarters: React.FC<CalendarQuartersProps> = ({
disabledList,
min,
max,
quarterNames,
outerRefs,
isDouble,
isSecond,
Expand All @@ -39,6 +40,7 @@ export const CalendarQuarters: React.FC<CalendarQuartersProps> = ({
disabledList,
min: minDate,
max: maxDate,
quarterNames,
});
const selectedRef = useRef(selected);
const onSetSelectedRef = useRef(onSetSelected);
Expand Down
1 change: 1 addition & 0 deletions ...ges/plasma-new-hope/src/components/Calendar/ui/CalendarQuarters/CalendarQuarters.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface CalendarQuartersProps extends HTMLAttributes<HTMLDivElement> {
value: CalendarValueType;
outerRefs: MutableRefObject<HTMLDivElement[][]>;
onChangeQuarter: (date: DateObject, coord: number[], quarterName: string) => void;
quarterNames?: string[];
eventList?: EventDay[];
disabledList?: DisabledDay[];
min?: Date;
Expand Down
12 changes: 6 additions & 6 deletions packages/plasma-new-hope/src/components/Calendar/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,24 +50,24 @@ export const offsetMap = {

export const QUARTER_NAMES = ['Q1', 'Q2', 'Q3', 'Q4'];

export const quarterDates: Record<typeof QUARTER_NAMES[number], QuarterPartialDate> = {
Q1: {
export const quarterDates: QuarterPartialDate[] = [
{
monthIndex: 0,
day: 1,
},
Q2: {
{
monthIndex: 3,
day: 1,
},
Q3: {
{
monthIndex: 6,
day: 1,
},
Q4: {
{
monthIndex: 9,
day: 1,
},
};
];

export const SHORT_DAY_NAMES: LocalMap = {
ru: WEEKS.map(callbackDayFormatter('ru', { weekday: 'short' })),
Expand Down
44 changes: 44 additions & 0 deletions packages/plasma-new-hope/src/components/DatePicker/DatePicker.component-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,28 @@ describeFn('DatePicker', () => {
cy.matchImageSnapshot();
});

it('custom quarter names', () => {
const quarterNames = ['Первый квартал', 'Второй квартал', 'Третий квартал', 'Четвертый квартал'];
const onCommitDate = cy.stub().as('onCommitDate');

mount(
<Demo
type="Quarters"
quarterNames={quarterNames}
renderFromDate={new Date(2023, 0, 1)}
onCommitDate={onCommitDate}
/>,
);

cy.get('input').first().click();
quarterNames.forEach((quarterName) => {
cy.contains('[role="gridcell"]', quarterName).should('be.visible');
});

cy.get('input').first().type('14.06.2023');
cy.get('@onCommitDate').its('lastCall.args.1.dateInfo.name').should('equal', quarterNames[1]);
});

it('input date from calendar', () => {
mount(
<Demo
Expand Down Expand Up @@ -943,6 +965,28 @@ describeFnRange('DatePickerRange', () => {
cy.matchImageSnapshot();
});

it('custom quarter names', () => {
const quarterNames = ['Первый квартал', 'Второй квартал', 'Третий квартал', 'Четвертый квартал'];
const onCommitFirstDate = cy.stub().as('onCommitFirstDate');

mount(
<Demo
type="Quarters"
quarterNames={quarterNames}
renderFromDate={new Date(2023, 0, 1)}
onCommitFirstDate={onCommitFirstDate}
/>,
);

cy.get('input').first().click();
quarterNames.forEach((quarterName) => {
cy.contains('[role="gridcell"]', quarterName).should('be.visible');
});

cy.get('input').first().type('14.06.2023');
cy.get('@onCommitFirstDate').its('lastCall.args.1.dateInfo.name').should('equal', quarterNames[1]);
});

it('change only second date', () => {
mount(<Demo enableContentRight />);

Expand Down
23 changes: 23 additions & 0 deletions packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,29 @@ export function App() {
}
```

### Пользовательские названия кварталов

Названия кварталов задаются с помощью свойства `quarterNames`. По умолчанию используются значения `Q1`, `Q2`, `Q3`, `Q4`.

```tsx live
import React from 'react';
import { DatePicker } from '@salutejs/{{ package }}';

export function App() {
const quarterNames = ['Первый квартал', 'Второй квартал', 'Третий квартал', 'Четвертый квартал'];

return (
<DatePicker
type="Quarters"
quarterNames={quarterNames}
label="Квартал"
placeholder="Выберите квартал"
usePortal
/>
);
}
```

### Язык даты
Язык даты задается с помощью свойства `lang`.

Expand Down
6 changes: 6 additions & 0 deletions packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,11 @@ export type DatePickerCalendarProps = {
* Список отключенных кварталов.
*/
disabledQuarterList?: DisabledDay[];
/**
* Названия кварталов.
* @default ['Q1', 'Q2', 'Q3', 'Q4']
*/
quarterNames?: string[];
/**
* Список событий по годам.
*/
Expand Down Expand Up @@ -211,6 +216,7 @@ export type UseDatePickerProps = {
min?: Date;
max?: Date;
includeEdgeDates?: boolean;
quarterNames?: string[];
setInnerDate: Dispatch<SetStateAction<string | DateType>>;
setCorrectDates: Dispatch<
SetStateAction<{
Expand Down
3 changes: 3 additions & 0 deletions packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export const datePickerRangeRoot = (Root: RootProps<HTMLDivElement, RootDatePick
disabledMonthList,
eventQuarterList,
disabledQuarterList,
quarterNames,
eventYearList,
disabledYearList,
type = 'Days',
Expand Down Expand Up @@ -275,6 +276,7 @@ export const datePickerRangeRoot = (Root: RootProps<HTMLDivElement, RootDatePick
min,
max,
includeEdgeDates,
quarterNames,
dateFormatDelimiter,
};

Expand Down Expand Up @@ -702,6 +704,7 @@ export const datePickerRangeRoot = (Root: RootProps<HTMLDivElement, RootDatePick
disabledMonthList={disabledMonthList}
eventQuarterList={eventQuarterList}
disabledQuarterList={disabledQuarterList}
quarterNames={quarterNames}
eventYearList={eventYearList}
disabledYearList={disabledYearList}
min={min}
Expand Down
3 changes: 3 additions & 0 deletions ...plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const RangeDatePopover = ({
disabledMonthList,
eventQuarterList,
disabledQuarterList,
quarterNames,
eventYearList,
disabledYearList,

Expand Down Expand Up @@ -151,6 +152,7 @@ export const RangeDatePopover = ({
disabledMonthList={disabledMonthList}
eventQuarterList={eventQuarterList}
disabledQuarterList={disabledQuarterList}
quarterNames={quarterNames}
eventYearList={eventYearList}
disabledYearList={disabledYearList}
min={min}
Expand Down Expand Up @@ -224,6 +226,7 @@ export const RangeDatePopover = ({
disabledMonthList={disabledMonthList}
eventQuarterList={eventQuarterList}
disabledQuarterList={disabledQuarterList}
quarterNames={quarterNames}
eventYearList={eventYearList}
disabledYearList={disabledYearList}
renderFromDate={renderFromDate}
Expand Down
3 changes: 3 additions & 0 deletions packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export const datePickerRoot = (Root: RootProps<HTMLDivElement, RootDatePickerPro
disabledMonthList,
eventQuarterList,
disabledQuarterList,
quarterNames,
eventYearList,
disabledYearList,
type = 'Days',
Expand Down Expand Up @@ -198,6 +199,7 @@ export const datePickerRoot = (Root: RootProps<HTMLDivElement, RootDatePickerPro
min,
max,
includeEdgeDates,
quarterNames,
setCorrectDates,
setInnerDate,
dateFormatDelimiter,
Expand Down Expand Up @@ -429,6 +431,7 @@ export const datePickerRoot = (Root: RootProps<HTMLDivElement, RootDatePickerPro
disabledMonthList={disabledMonthList}
eventQuarterList={eventQuarterList}
disabledQuarterList={disabledQuarterList}
quarterNames={quarterNames}
eventYearList={eventYearList}
disabledYearList={disabledYearList}
min={min}
Expand Down
Loading
Loading