ネイティブのReact Suite 6.2.4 Calendar、Panel、Modal、Input、Message、Button、Tag。・ 実装リファレンス
02
React Suite デザインシステムのデザインリファレンス
React Suite 6.2.4のコンパイル済みスタイルシートを使用し、現行のv6 CSS変数ドキュメントと照合しています。以下の値は最初に定義された値またはデフォルト値です。セマンティックエイリアスは、他のプロバイダーテーマでは異なる値に解決される場合があります。カレンダー固有のレイアウトルールは、別途明記しています。
getDay()の値が0または6の日は、週末としてスケジュール追加を無効にしています。ただし、その日付も選択できます。日付が機能していないように見せるのではなく、予定表にルールを説明するためです。警告メッセージが表示され、追加ボタンは無効になります。これはチーム独自のローカルルールであり、React Suite Calendarの制限ではありません。
import React,{useState} from 'react';
import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import './style.css';
const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');}
return <CustomProvider><main className='schedule'><header><div><p className='eyebrow'>REACT SUITE / TEAM CADENCE</p><h1>Give the work a place in the week.</h1><p>Select a day to inspect its sessions. Weekend scheduling is disabled in this example.</p></div><Tag color='blue'>Local calendar</Tag></header>{notice&&<Message type='info' closable onClose={()=>setNotice('')}>{notice}</Message>}<div className='schedule-grid'><Panel bordered className='calendar-panel'><Calendar compact bordered isoWeek value={date} onSelect={setDate} renderCell={d=>events.some(e=>e.date===key(d))?<span className='event-dot' aria-label='Has a session'/>:null}/><p className='calendar-legend'><span className='event-dot'/> A date with one or more local sessions</p></Panel><Panel bordered className='agenda-panel'><p className='eyebrow'>{date.toLocaleDateString('en',{weekday:'long'})}</p><h2>{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}</h2>{weekend&&<Message type='warning'>The sample team does not schedule weekend reviews.</Message>}<div className='agenda'>{selected.length?selected.map(e=><article key={e.id}><div><span className='event-kind'>Review session</span><h3>{e.title}</h3></div><Button appearance='subtle' size='sm' aria-label={'Remove '+e.title} onClick={()=>{setEvents(events.filter(x=>x.id!==e.id));setNotice('Removed from the local calendar. No attendee was notified.')}}>Remove</Button></article>):<div className='empty'><h3>No sessions for this day.</h3><p>Choose another date or add a local review session.</p></div>}</div><Button appearance='primary' disabled={weekend} onClick={()=>{setTitle('');setError('');setOpen(true)}}>Add review session</Button></Panel></div><footer>Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.</footer><Modal open={open} onClose={()=>setOpen(false)} size='sm'><Modal.Header><Modal.Title>Add review session</Modal.Title></Modal.Header><Modal.Body><p>For {key(date)}. This adds a record only in the preview.</p><label htmlFor='session-title'>Session title</label><Input id='session-title' value={title} onChange={v=>{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&<p id='title-error' role='alert' className='field-error'>{error}</p>}</Modal.Body><Modal.Footer><Button onClick={()=>setOpen(false)} appearance='subtle'>Cancel</Button><Button onClick={save} appearance='primary'>Add locally</Button></Modal.Footer></Modal></main></CustomProvider>}
React 19とReact Suite 6.2.4を使用したネイティブの例です。外部のカレンダーサービスは使用していません。アプリケーション全体とスタイルは上記に記載しています。
jsx
// Create the project first:
// npm create vite@latest react-suite-specimen -- --template react
// cd react-suite-specimen && npm install
// In a React project:
// npm install [email protected]
// Save the complete App example as App.jsx and the CSS example as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// index.html needs <div id="root"></div> and the Vite module entry.
// App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
CustomProviderとネイティブスタイルシートを使用して、React Suite 6.2.4のカレンダーとアジェンダを組み合わせてください。曜日の選択、週末の無効化、ローカルの確認項目を追加するためのModal/Inputフローを維持します。選択した日付とアジェンダ項目はアプリケーションの状態で管理し、確認情報を検証してから追加してください。キャンセル時はアジェンダを変更しないでください。レスポンシブなカレンダーレイアウトと、日付ごとのアジェンダ表示を維持してください。カレンダーへの招待や外部スケジューリングサービスを利用しているかのように示さないでください。
05
React Suite デザインシステムのソースと対象範囲
React Suite 6.2.4。独自の週末ポリシーとサンプルレコードを使用した、日付のみを扱うローカルカレンダーです。招待や外部スケジューリング機能はありません。
