메뉴
Use ShadCalendar for single, multiple, or range date selection; caption layout, hide navigation, week numbers, outside days, fixed weeks. Use when building date pickers or calendar widgets in a Flutter shadcn_ui app.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-calendar |
| description | Use ShadCalendar for single, multiple, or range date selection; caption layout, hide navigation, week numbers, outside days, fixed weeks. Use when building date pickers or calendar widgets in a Flutter shadcn_ui app. |
ShadCalendar is a date field that lets users enter and edit dates. Modes: single date, multiple dates (ShadCalendar.multiple), or range (ShadCalendar.range). Use fromMonth/toMonth to limit range; captionLayout for dropdown months/years.
final today = DateTime.now();
ShadCalendar(
selected: today,
fromMonth: DateTime(today.year - 1),
toMonth: DateTime(today.year, 12),
)
ShadCalendar.multiple(
numberOfMonths: 2,
fromMonth: DateTime(today.year),
toMonth: DateTime(today.year + 1, 12),
min: 5,
max: 10,
)
const ShadCalendar.range(
min: 2,
max: 5,
)
ShadCalendar(
captionLayout: ShadCalendarCaptionLayout.dropdownMonths,
);
ShadCalendar(
captionLayout: ShadCalendarCaptionLayout.dropdownYears,
);
hideNavigation: true — Hide month navigation.showWeekNumbers: true — Show week numbers.showOutsideDays: false — Hide days from adjacent months.fixedWeeks: true — Fixed number of rows.hideWeekdayNames: true — Hide weekday headers.