wix-style-react
Version:
62 lines (61 loc) • 2.46 kB
JavaScript
export default {
description:
'Calendar component lets to pick a date while seeing the full month of days. It’s used in `<DatePicker/>` component, but it can be used alone too.',
do: [
'Use it to show the list of available days to choose from',
'Use it if calendar needs to be prominent all the time',
'Use it to display multiple months at once',
],
dont: [
'Don’t use it when user needs to enter a lot of data at once. Use <DatePicker/> instead.',
'Don’t use it when screen space is limited. Use <DatePicker/> instead.',
],
featureExamples: [
{
title: 'Layout',
description: `Change calendar’s layout using \`numOfMonths\` prop. It can display 1 or 2 months.`,
example: '_layout',
},
{
title: 'Date Indication',
description:
'Mark important dates with `dateIndication` prop. It’s helpful when the calendar needs to highlight the dates with happening events.',
example: '_indication',
},
{
title: 'Selection Mode',
description: `Enable select the range of dates with \`selectionMode\` prop. It supports 2 values:<br/>
 - \`day\` (default) - lets to select 1 day.<br/>
 - \`range\` - lets to select any range of dates.`,
example: '_selection',
},
{
title: 'Excluding Dates',
description: `Control what dates the user can select with 2 props:<br/>
 - \`filterDate\` - define what dates will be selectable.<br/>
 - \`excludePastDates\` - allow selecting only today and future dates.
`,
example: '_exclude',
},
{
title: 'Select Month and Year',
description: `Let the user quickly change the month and year values with props::<br/>
 - \`showMonthDropdown \` - enables month dropdown.<br/>
 - \`showYearDropdown\` - enables year dropdown.
`,
example: '_dropdown',
},
{
title: 'Localization',
description: `Change the language using \`locale\` prop. Some languages will change the start of the week day and order of month and year. First Day of the week can be controlled manually with \`firstDayOfWeek\` prop.`,
example: '_localization',
},
],
commonUseCaseExamples: [
{
title: 'Event scheduling',
description: `Use a calendar with time picker to let our users set the appointment date or article publish date.`,
example: '_event',
},
],
};