Komponentensystem für Unternehmen · Neue Ressource
React Suite-Designsystem.
Ein nativer React Suite-Prüfungskalender mit verifizierten Variablen aus v6 von CSS, Markierungen für Datumszellen, einer Agenda für den ausgewählten Tag, modaler Validierung und klaren Regeln für die lokale Terminplanung.
Wähle einen Tag aus, sieh dir lokale Termine an, füge über ein Modal einen Termin hinzu oder entferne ihn. Das Hinzufügen an Wochenenden ist deaktiviert.
Nativer Kalender, Panel, Modal, Input, Message, Button und Tag von React Suite 6.2.4. · Implementierungsreferenz
02
Designreferenz für das React Suite-Designsystem
Kompiliertes Stylesheet von React Suite 6.2.4, abgeglichen mit der aktuellen Dokumentation zu den Variablen in v6 CSS. Die folgenden Werte sind erste Standarddefinitionen; semantische Aliasnamen können in anderen Provider-Themes abweichende Werte auflösen. Regeln für das ursprüngliche Kalenderlayout sind separat gekennzeichnet.
React Suite Designsystem – ein nativer Kalender mit separater Agenda
Ein nativer Kalender mit separater Agenda
React Suite richtet sich an komponentenreiche Anwendungen und bietet sowohl Steuerelemente als auch größere Arbeitsflächen wie Calendar. Dieses Beispiel verwendet Version 6.2.4 mit dem kompilierten Stylesheet. Ein CustomProvider umschließt die Anwendung; Calendar, Panel, Modal und weitere Komponenten werden aus rsuite importiert.
Der Kalender gibt nicht vor, ein angebundener Planungsdienst zu sein. Er enthält zwei anfängliche Beispielsitzungen und ermöglicht lokale Ergänzungen und Löschungen. Der ausgewählte Tag und die Liste der Einträge sind separate Zustände in React. Daher ändert das Navigieren zu einem Tag nicht den Terminplan. Im vollständigen App-Quellcode lassen sich alle Zustandsübergänge nachvollziehen.
React Suite-Designsystem: Referenz der Variablen in v6 CSS
Referenz für CSS-Variablen in v6
Die Spezifikation basiert auf dem installierten CSS v6 und nicht auf einem älteren Less-Tutorial. Typografie, Abstände, Radien, Farbpalette und semantische Rollen stehen alle als --rs-Variablen zur Verfügung. Im Standarddesign wird für den Fließtext die kleine Schriftgröße von 0.875rem verwendet, während die Root-Größe bei sechzehn Pixeln bleibt. Dieser Unterschied erklärt, warum eine standardmäßige Komponentenoberfläche dichter wirken kann als ein Inhaltstext mit sechzehn Pixeln.
Die Seite verwendet --rs-bg-well als Hintergrund hinter den --rs-bg-card-Panels und --rs-border-primary für die Trennlinien der Agenda. Eine Markierung verwendet primary-500; ein Feldfehler nutzt die semantische Rolle text-error. Die Referenz behält Aliase für Text und Oberflächen bei, damit die Rollen verständlich bleiben, wenn ein Provider-Theme ihre Zuordnung ändert.
React Suite Designsystem – die Bibliotheksskalierung rund um den Kalender verwenden
Die Bibliotheksskalierung rund um den Kalender verwenden
Die tatsächliche Radius-Skala umfasst bei standardmäßiger Root-Größe Werte von vier, sechs, acht und zwölf Pixeln für sm bis xl. Der Basisabstandsschritt beträgt 0.25rem. Statt diese Werte als dekorative Palette zu behandeln, verwendet das bereitgestellte CSS tatsächliche Oberflächen- und Textvariablen in der umgebenden Agenda und den Hilfetexten.
Die Überschrift der Anwendung verwendet explizit 32px bei einer Zeilenhöhe von 1.2; auf schmalen Bildschirmen wird sie auf 28px verkleinert. Sitzungstitel verwenden siebzehn Pixel, damit sie in kompakte Agendaeinträge passen. Diese Entscheidungen für die Seite überschreiben nicht die globalen Schriftvariablen der Bibliothek. Kalenderbeschriftungen und Modalsteuerelemente behalten daher ihre nativen Komponentengrößen.
React Suite Designsystem – das ausgewählte Datum ohne UTC-Abweichungen steuern
Ausgewähltes Datum ohne UTC-Verschiebung steuern
Calendar erhält einen Date-Wert, und onSelect aktualisiert den ausgewählten Wert. isoWeek lässt die sichtbare Woche am Montag beginnen. Der feste Anfangswert verwendet new Date(2026,9,14), wobei neun für Oktober steht, da die Monate in JavaScript ab null gezählt werden. Die Seite ist ein bewusst festgelegtes Beispiel und keine Aussage über den heutigen Kalender.
Die Funktion zum Erstellen des Schlüssels verwendet getFullYear, getMonth und getDate, um einen lokalen Schlüssel im Format YYYY-MM-DD zu erzeugen. Sie vermeidet toISOString().slice(0,10), das eine Umwandlung über UTC vornimmt und den lokalen Kalendertag in manchen Zeitzonen verschieben kann. Diese Einträge stellen Datumsangaben ohne Uhrzeit dar. Eine implizite UTC-Umwandlung würde daher eine Bedeutung hinzufügen, die in den Daten nicht enthalten ist.
React Suite Designsystem – Datumsmarkierungen und Inhalte für den ausgewählten Tag
Datumsmarkierungen und Inhalte für den ausgewählten Tag
renderCell prüft, ob die lokalen Einträge ein Element für das jeweilige Datum enthalten, und gibt eine kleine Ereignismarkierung zurück. Die Markierung dient als Ergänzung: Bei Auswahl des Datums werden die tatsächlichen Titel in der Agenda angezeigt. Ein farbiger Punkt allein würde weder erkennen lassen, was geplant ist, noch ermöglichen, den richtigen Eintrag zu entfernen.
Der kompakte Kalender bleibt schmal genug für die mobile Ansicht. Die Agenda ist ein separates Panel mit Datumsüberschrift, Sitzungskarten und einer lokalen Aktion zum Hinzufügen. Am ursprünglichen Breakpoint von 760px wird sie unter den Kalender verschoben. So muss kein vollständiger Ereignistitel in jede Kalenderzelle gequetscht werden und es entsteht kein unlesbarer Kalender mit horizontalem Bildlauf.
Wählen Sie den Beispieltages mit der Navigationsprüfung aus.
Lesen Sie den Sitzungstitel in der Agenda ab, statt sich auf den Punkt zu verlassen.
Entfernen Sie die Sitzung und prüfen Sie, ob ihre Datumsmarkierung verschwindet, sobald keine Einträge mehr vorhanden sind.
React Suite Designsystem – Planungsregeln der Anwendung sind ausdrücklich festgelegt
Regeln für die Terminplanung der Anwendung sind explizit
Die Planung an Wochenenden wird mithilfe der Werte null und sechs von getDay() deaktiviert. Der Kalender lässt die Auswahl dieser Tage weiterhin zu, damit die Agenda die Regel erläutern kann, statt den Eindruck zu erwecken, der Tag sei fehlerhaft. Es erscheint eine Warnmeldung und die Schaltfläche zum Hinzufügen wird deaktiviert. Dies ist eine lokale Teamregel und keine Einschränkung von React Suite Calendar.
Für einen Wochentag ohne Sitzungen wird ein eindeutiger Leerzustand angezeigt; die Aktion zum Hinzufügen bleibt verfügbar. Beim Entfernen einer Sitzung werden die Einträge aktualisiert und eine lokale Meldung ausgegeben. Es wird nicht behauptet, dass Teilnehmende benachrichtigt wurden. Die Date-Objekte, das Array der Einträge und die einfache Regel sind im Quellcode sichtbar, damit sie für ein echtes Produkt gezielt ersetzt werden können.
React Suite Designsystem – ein fokussierter Eingabedialog mit Validierung
Ein übersichtlicher Eingabedialog mit Validierung
Beim Öffnen von „Prüfungssitzung hinzufügen“ werden der Titel und alle vorherigen Fehler zurückgesetzt. Das Modal verwendet die Komposition aus Header, Title, Body und Footer; Öffnen und onClose werden durch den Zustand React gesteuert. Das Eingabefeld hat ein korrekt zugeordnetes Label, einen ungültigen Zustand und eine Fehlerbeschreibung. Ist ein Titel nach dem Entfernen führender und nachgestellter Leerzeichen kürzer als drei Zeichen, bleibt das Modal geöffnet und zeigt eine Warnmeldung an.
Beim Absenden eines gültigen Eintrags wird ein Datensatz für das ausgewählte Datum hinzugefügt, das Modal geschlossen und eine Informationsmeldung angezeigt. Die Modal-Komponente übernimmt das Dialogverhalten einschließlich Escape-Taste und Fokusverwaltung. Abbrechen schließt lediglich den Entwurf. Die Anwendung schließt das Modal nicht, bevor sie geprüft hat, ob die eigene Titelregel erfüllt ist.
Beim Abbrechen wird der nicht gespeicherte Titel verworfen.
Ein abgelehnter Titel bleibt zur Korrektur erhalten.
Ein gültiger Titel fügt einen lokalen Datensatz hinzu und aktualisiert die Kalenderanzeige.
React Suite-Designsystem: v6-Styles und vollständige Anwendung laden
v6-Styles und vollständige Anwendung laden
Installieren Sie [email protected] in einem React-Projekt und importieren Sie rsuite/dist/rsuite.min.css. Das App-Beispiel enthält diesen Import, die ursprüngliche style.css und den CustomProvider-Wrapper. Der Einrichtungseinstiegspunkt verwendet React createRoot und ist nicht von einem externen CDN abhängig. Die eigenständige Vorschau bündelt dieselben nativen Komponenten und CSS lokal.
React Suite bietet außerdem eine Stylesheet-Distribution ohne Reset. Dieses Beispiel verwendet bewusst das Standard-Stylesheet. Werden beide Distributionen kombiniert, werden Styles doppelt angewendet und es ist unklar, welcher Reset für die Seite gilt. Wählen Sie in einer bestehenden Anwendung die Distribution, die zur umgebenden Styling-Architektur passt, und prüfen Sie Formulare und Überschriften gemeinsam.
React Suite-Designsystem: Ein echter Kalender benötigt zusätzlichen Domänenstatus
Ein echter Kalender benötigt zusätzlichen domänenspezifischen Zustand
Ein angebundener Terminplaner würde Uhrzeiten, Zeitzonen, Teilnehmende, Berechtigungen und ein Ergebnis der Speicherung benötigen. Dieses Beispiel mit reinen Datumsangaben erfindet solche Felder nicht und gibt auch nicht vor, dass eine erfolgreiche Statusänderung eine Einladung versendet hat. Footer und Hinweise machen den lokalen Umfang deutlich. Die lokale Funktion für Datumsschlüssel eignet sich für diese Datensätze, ist aber keine vollständige Strategie für Besprechungen mit Zeitzonen.
Fügen Sie eine Remote-Anfrage hinzu, lassen Sie das Entwurfsmodal bis zu einer bestätigten Antwort geöffnet oder zeigen Sie einen behebbaren Fehler an. Verhindern Sie doppelte Übermittlungen und behalten Sie Datum und Titel nach einem Fehler bei. Die Bibliothek stellt die Oberflächenbausteine bereit; die Korrektheit der Anwendung hängt davon ab, dass diese Bausteine mit dem tatsächlichen Vorgang verknüpft sind.
Gesteuerter Kalender mit Markierungen in Datumszellen, lokalen Datumsschlüsseln und einem Modal zum Hinzufügen von Einträgen.
jsx
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>}
Die Seitenüberschrift und der Breakpoint bei 760px sind eigene Festlegungen.
04
React Suite-Designsystem: Einrichtung des AI-Agenten
Ausgangspunkt für die Implementierung
Natives Beispiel mit React 19 und React Suite 6.2.4. Es wird kein externer Kalenderdienst verwendet. Die vollständige Anwendung und das Styling sind oben enthalten.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie die Kalender- und Agenda-Komposition von React Suite 6.2.4 mit CustomProvider und dem nativen Stylesheet. Behalten Sie die Auswahl von Wochentagen, das Deaktivieren von Wochenenden und den Modal/Input-Ablauf für einen lokalen Review-Eintrag bei. Speichern Sie das ausgewählte Datum und die Agendatermine im Anwendungsstatus, prüfen Sie die eingegebenen Review-Angaben vor dem Hinzufügen und lassen Sie die Agenda beim Abbrechen unverändert. Behalten Sie das responsive Kalenderlayout und die datumsbezogene Agenda-Ausgabe bei. Erwecken Sie nicht den Eindruck, es werde eine Kalendereinladung versendet oder ein externer Terminplanungsdienst verwendet.
05
React Suite-Designsystem: Quellen und Umfang
React Suite 6.2.4. Lokaler Kalender mit reinen Datumsangaben, eigener Wochenendregelung und Beispieldatensätzen; keine Einladungen oder externe Terminplanung.
