# syncfusion-react-calendars

A skill for building Syncfusion calendar controls in React, including date, range, and time selection with validation and formatting.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 541 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-calendars/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-calendars

## What it does

This skill guides React work with Syncfusion Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. It covers single and multi-date selection, ranges, date limits, input formats, masking, localization, custom day cells, and form validation.

The guidance uses controlled React components, the `change` event, React state, refs for navigation, theme CSS, RTL, keyboard input, and ARIA patterns. A basic Calendar setup needs `@syncfusion/ej2-react-calendars` and `@syncfusion/ej2-base`; the theme stylesheet is imported separately. The control will not receive its theme styling when that CSS import is missing.

The skill is available for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. It helps an agent choose the right Syncfusion component and wire its value into an existing React application.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-calendars/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-calendars/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-calendars/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-calendars/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-calendars
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-calendars/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-calendars
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-calendars/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-calendars -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-calendars/SKILL.md

## When to use it
- add a Syncfusion calendar to a React app
- keep a selected date in React state
- build a date-range picker for a form
- apply input formats and date masks
- validate dates against minimum and maximum values

## Example prompts
- Add a Syncfusion Calendar to my React app and connect its selected value to state through `change`.
- Create a DatePicker with minimum and maximum dates, masked input, and a custom display format.
- Set up a DateRangePicker for selecting a date interval and include the required theme CSS.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 37 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md