Un calendario di revisione nativo React Suite con variabili CSS v6 verificate, indicatori nelle celle delle date, agenda del giorno selezionato, convalida modale e regole esplicite per la pianificazione locale.
Guida OpenDesign9 capitoli39 voci di riferimentoGuida applicativa originale
01
Anteprima dell’interfaccia del sistema di progettazione sistema di design React Suite
Seleziona un giorno, consulta le sessioni locali, aggiungine una tramite una finestra modale oppure rimuovila. Non è possibile aggiungere sessioni nei fine settimana.
Riferimento di progettazione del sistema di progettazione sistema di design React Suite
Foglio di stile compilato di React Suite 6.2.4, verificato rispetto alla documentazione aggiornata delle variabili di CSS v6. I valori riportati di seguito sono le definizioni iniziali/predefinite; gli alias semantici possono risolversi in modo diverso con altri temi del provider. Le regole originali di layout del calendario sono indicate separatamente.
Sistema di progettazione sistema di design React Suite: un calendario nativo con un’agenda separata
Un calendario nativo con un’agenda separata
React Suite è pensato per applicazioni ricche di componenti e fornisce sia controlli sia superfici operative più ampie, come Calendar. Questo esempio usa la versione 6.2.4 con il relativo foglio di stile compilato. Un CustomProvider avvolge l’applicazione, mentre Calendar, Panel, Modal e gli altri componenti vengono importati da rsuite.
Il calendario non si presenta come un servizio di pianificazione connesso. Contiene due sessioni di esempio iniziali e consente aggiunte e rimozioni locali. Il giorno selezionato e l’elenco dei record sono stati React distinti, quindi spostarsi a un altro giorno non modifica la pianificazione. Nel codice completo di App è possibile esaminare ogni transizione di stato.
Sistema di progettazione sistema di design React Suite: riferimento alle variabili di CSS v6
Un riferimento alle variabili di CSS v6
La specifica è ricavata dal pacchetto CSS v6 installato, non da un vecchio tutorial Less. Tipografia, spaziatura, raggio, palette e ruoli semantici sono tutti disponibili come variabili --rs. Il testo del corpo predefinito usa la dimensione tipografica piccola, 0.875rem, mentre la radice resta di sedici pixel. Questa distinzione spiega perché una superficie di controllo predefinita possa apparire più densa di un articolo impostato a sedici pixel.
La pagina usa --rs-bg-well dietro i pannelli --rs-bg-card e --rs-border-primary per i separatori dell’agenda. Un indicatore usa primary-500; un errore di campo usa il ruolo semantico text-error. Il riferimento mantiene gli alias per testo e superfici, così i ruoli restano comprensibili anche quando un tema del provider ne modifica la risoluzione.
Sistema di progettazione sistema di design React Suite: usa la scala della libreria attorno al calendario
Usa la scala della libreria attorno al calendario
La scala dei raggi effettiva include valori di quattro, sei, otto e dodici pixel per sm-xl con la radice predefinita. L’incremento di base della spaziatura è 0.25rem. Invece di trattarli come una palette decorativa, il sistema di progettazione CSS fornito usa variabili effettive per superfici e testo nell’agenda circostante e nei contenuti di supporto.
L’intestazione dell’applicazione usa una dimensione esplicita di 32px con altezza della riga di 1.2, ridotta a 28px sugli schermi stretti. I titoli delle sessioni usano 17px per adattarsi alle righe compatte dell’agenda. Queste scelte della pagina non sovrascrivono le variabili tipografiche globali della libreria. Le etichette di Calendar e i controlli della finestra modale mantengono quindi le dimensioni native dei componenti.
Sistema di progettazione sistema di design React Suite: controllare la data selezionata senza slittamenti UTC
Controllare la data selezionata senza slittamenti UTC
Calendar riceve un valore Date e onSelect aggiorna il valore selezionato. isoWeek fa iniziare la settimana visualizzata di lunedì. Il valore iniziale fisso usa new Date(2026,9,14), dove nove corrisponde a ottobre perché i mesi di JavaScript partono da zero. La pagina è un esempio volutamente fisso, non un’affermazione sulla data del calendario odierno.
La funzione della chiave usa getFullYear, getMonth e getDate per generare una chiave locale nel formato YYYY-MM-DD. Evita toISOString().slice(0,10), che converte tramite UTC e in alcuni fusi orari può spostare il giorno del calendario locale. Questi record rappresentano date senza orario, quindi aggiungere una conversione UTC implicita introdurrebbe un significato assente nei dati.
Sistema di progettazione sistema di design React Suite: indicatori delle date e contenuti del giorno selezionato
Indicatori delle date e contenuti del giorno selezionato
renderCell verifica se i record locali contengono una voce per quella data e mostra un piccolo indicatore di evento. L’indicatore è un’informazione aggiuntiva: selezionando la data, l’agenda mostra i titoli effettivi. Un semplice punto colorato non indicherebbe all’utente cosa è in programma né permetterebbe di rimuovere la voce corretta.
Il calendario compatto resta abbastanza stretto da adattarsi alla visualizzazione mobile. L’agenda è un Panel separato, con intestazione della data, schede delle sessioni e un’azione per aggiungere voci locali. Al breakpoint originale di 760px si sposta sotto il calendario. Questa disposizione evita di comprimere titoli di eventi completi in ogni cella o di creare un calendario orizzontale difficile da leggere.
Seleziona il giorno di esempio con la revisione della navigazione.
Controlla il titolo della sessione nell’agenda invece di affidarti al punto.
Rimuovi la sessione e verifica che il relativo indicatore della data scompaia quando non restano record.
Sistema di design React Suite — le regole di pianificazione del sistema di progettazione sono esplicite
Le regole di pianificazione dell’applicazione sono esplicite
La pianificazione nei fine settimana è disabilitata usando i valori zero e sei di getDay(). È comunque possibile selezionare quelle date nel calendario, così l’agenda può spiegare la regola invece di far sembrare che il giorno non funzioni. Viene visualizzato un avviso e il pulsante per aggiungere è disabilitato. Si tratta di una regola locale del team, non di un limite di React Suite Calendar.
Per i giorni feriali senza sessioni viene mostrato uno stato vuoto specifico e l’azione per aggiungere resta disponibile. Rimuovendo una sessione, i record vengono aggiornati e viene pubblicato un avviso locale. Non si dichiara che un partecipante sia stato avvisato. Gli oggetti Date, l’array dei record e la semplice regola sono tutti visibili nel codice sorgente, così è possibile sostituirli consapevolmente in un prodotto reale.
Sistema di design React Suite — una finestra di dialogo di inserimento convalidata per il sistema di progettazione
Una finestra di inserimento mirata con convalida
Aprendo Aggiungi sessione di revisione, il titolo e gli eventuali errori precedenti vengono cancellati. La finestra modale usa la composizione Header, Title, Body e Footer, mentre open e onClose sono controllati dallo stato di React. Il campo di input ha un’etichetta associata, uno stato di errore e una descrizione dell’errore. Se il titolo contiene meno di tre caratteri dopo aver rimosso gli spazi iniziali e finali, la finestra modale resta aperta e mostra un avviso.
L’invio di un titolo valido aggiunge un record per la data selezionata, chiude la finestra modale e mostra un messaggio informativo. Il componente Modal gestisce il comportamento della finestra di dialogo, inclusi Escape e la gestione dello stato attivo. Annulla chiude soltanto la bozza. L’applicazione non chiude la finestra modale prima di aver verificato che il titolo rispetti la propria regola.
Annulla scarta il titolo non salvato.
Il titolo rifiutato resta disponibile per essere corretto.
Un titolo valido aggiunge un record locale e aggiorna l’indicatore nel calendario.
Sistema di design React Suite — carica gli stili v6 e l’applicazione completa del sistema di progettazione
Carica gli stili v6 e l’applicazione completa
Installa [email protected] in un progetto React e importa rsuite/dist/rsuite.min.css. L’esempio App include questa importazione, il file style.css originale e il wrapper CustomProvider. Il punto di ingresso di configurazione usa React createRoot e non dipende da una CDN remota. L’anteprima autonoma include gli stessi componenti nativi e CSS localmente.
React Suite offre anche una distribuzione del foglio di stile senza reset. Questo esempio usa intenzionalmente il foglio di stile standard: combinare entrambe le distribuzioni duplicherebbe gli stili e renderebbe poco chiaro quale reset si applica alla pagina. In un’applicazione esistente, scegli la distribuzione più adatta all’architettura degli stili circostante e verifica insieme moduli e titoli.
Sistema di design React Suite — un calendario reale richiede ulteriore stato di dominio nel sistema di progettazione
Un vero calendario richiede ulteriore stato di dominio
Un sistema di pianificazione collegato a servizi esterni dovrebbe gestire orari, fusi orari, partecipanti, autorizzazioni e l’esito della persistenza. Questo esempio, basato solo sulle date, non inventa questi campi né finge che un aggiornamento dello stato sia riuscito a inviare un invito. Il piè di pagina e gli avvisi rendono chiaro l’ambito locale. La funzione per creare chiavi di data locali è adatta a questi record, ma non è una strategia completa per riunioni che tengono conto dei fusi orari.
Se aggiungi una richiesta remota, mantieni aperta la finestra modale della bozza fino alla conferma dell’esito oppure mostra un errore recuperabile. Impedisci invii duplicati e, in caso di errore, conserva la data selezionata e il titolo. La libreria fornisce i componenti di interfaccia; la correttezza dell’applicazione dipende dal collegamento di questi componenti all’operazione effettiva.
Sistema di design React Suite — esempi di componenti del sistema di progettazione
Applicazione completa di calendario e agenda
Calendar controllato con indicatori nelle celle delle date, chiavi di data locali e flusso di inserimento tramite finestra modale.
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>}
Il titolo della pagina e il breakpoint di 760px sono scelte originali.
04
Sistema di design React Suite — configurazione dell’agente per il sistema di progettazione
Punto di partenza per l’implementazione
Esempio nativo realizzato con React 19 e React Suite 6.2.4. Non viene usato alcun servizio di calendario esterno. L’applicazione completa e gli stili sono forniti sopra.
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
Un prompt per il tuo progetto
Prompt per l’agente
Usa la composizione di calendario e agenda di React Suite 6.2.4 con CustomProvider e il foglio di stile nativo. Mantieni la selezione dei giorni feriali, il comportamento di disabilitazione dei fine settimana e il flusso Modal/Input per inserire una sessione di revisione locale. Conserva la data selezionata e le voci dell’agenda nello stato dell’applicazione, convalida le informazioni inserite prima di aggiungerle e non modificare l’agenda in caso di annullamento. Mantieni il layout adattabile del calendario e la visualizzazione dell’agenda per la data selezionata. Non suggerire che venga inviato un invito di calendario o che sia usato un servizio di pianificazione esterno.
05
Sistema di design React Suite — fonti e ambito del sistema di progettazione
React Suite 6.2.4. Calendario locale basato solo sulle date, con regola originale per i fine settimana e record di esempio; nessun invito o servizio di pianificazione esterno.
