Встроенный календарь проверок React Suite с проверенными переменными CSS для v6, маркерами ячеек дат, программой выбранного дня, проверкой в модальном окне и явно заданными правилами локального планирования.
Нативные компоненты React Suite 6.2.4: Calendar, Panel, Modal, Input, Message, Button и Tag. · Справочник по реализации
02
Справочник по дизайн-системе React Suite
Скомпилированная таблица стилей React Suite 6.2.4 сверена с актуальной документацией по переменным v6 CSS. Приведённые ниже значения — первые определения или значения по умолчанию; семантические псевдонимы могут разрешаться иначе в других темах провайдера. Отдельно указаны оригинальные правила компоновки календаря.
Дизайн-система React Suite: нативный календарь с отдельным списком событий
Нативный календарь с отдельным списком событий
React Suite предназначена для приложений с большим количеством компонентов и предлагает как элементы управления, так и более крупные рабочие поверхности, например Calendar. В этом примере используется версия 6.2.4 с её скомпилированной таблицей стилей. Приложение обёрнуто в CustomProvider, а Calendar, Panel, Modal и другие компоненты импортируются из rsuite.
Этот календарь не изображает подключённый сервис планирования. В нём есть два начальных примера событий, а пользователи могут добавлять и удалять записи на устройстве. Выбранный день и список записей — отдельные состояния React, поэтому переход к другой дате не меняет расписание. Все изменения состояния можно проследить в полном исходном коде App.
Справочник переменных дизайн-система React Suite A v6 CSS
Справочник переменных v6 CSS
Спецификация основана на установленной версии v6 CSS, а не на старом руководстве по Less. Для типографики, отступов, радиусов, палитры и семантических ролей доступны переменные --rs. Для основного текста по умолчанию используется малый размер шрифта — 0.875rem, при этом корневой размер остаётся равным шестнадцати пикселям. Поэтому стандартная поверхность компонента может выглядеть плотнее, чем статья с текстом размером шестнадцать пикселей.
На странице под панелями --rs-bg-card используется фон --rs-bg-well, а для разделителей списка событий — --rs-border-primary. Для маркера применяется primary-500, для ошибки поля — семантическая роль text-error. В справочнике сохранены псевдонимы текста и поверхностей, чтобы роли оставались понятными, даже если тема провайдера задаёт им другие значения.
Дизайн-система React Suite: используйте масштаб библиотеки для элементов вокруг календаря
Используйте масштаб библиотеки для элементов вокруг календаря
Реальная шкала радиусов включает значения четыре, шесть, восемь и двенадцать пикселей для размеров от sm до xl при размере корневого шрифта по умолчанию. Базовый шаг отступов составляет 0.25rem. Вместо того чтобы воспринимать эти значения как декоративную палитру, в предоставленной CSS используются реальные переменные поверхностей и текста для списка событий и вспомогательного содержимого.
Для заголовка приложения задан размер 32px и межстрочный интервал 1.2; на узких экранах размер уменьшается до 28px. Названия событий набраны шрифтом размером семнадцать пикселей, чтобы помещаться в компактные строки списка. Эти настройки страницы не переопределяют глобальные переменные типографики библиотеки. Поэтому метки календаря и элементы управления модального окна сохраняют нативный размер компонентов.
Дизайн-система React Suite: управление выбранной датой без смещения из-за UTC
Управление выбранной датой без смещения из-за UTC
Calendar получает значение Date, а onSelect обновляет выбранное значение. Параметр isoWeek задаёт начало отображаемой недели в понедельник. Для начального значения используется new Date(2026,9,14), где девять соответствует октябрю, поскольку месяцы JavaScript отсчитываются с нуля. Это намеренно фиксированный пример, а не утверждение о сегодняшней дате.
Функция формирования ключа использует getFullYear, getMonth и getDate, чтобы получить локальный ключ в формате YYYY-MM-DD. Она не использует toISOString().slice(0,10), который преобразует дату через UTC и в некоторых часовых поясах может сдвинуть локальный календарный день. Эти записи обозначают даты без времени, поэтому неявное преобразование в UTC добавило бы данным отсутствующий в них смысл.
Дизайн-система React Suite: маркеры дат и содержимое выбранного дня
Маркеры дат и содержимое выбранного дня
renderCell проверяет, есть ли в локальных записях событие на эту дату, и выводит небольшой маркер. Маркер служит лишь дополнением: после выбора даты в списке отображаются названия событий. Одна цветная точка не сообщила бы пользователю, что запланировано, и не помогла бы удалить нужную запись.
Компактный календарь достаточно узкий, чтобы удобно отображаться на мобильном устройстве. Список событий вынесен в отдельную Panel с заголовком даты, карточками событий и действием для локального добавления. При исходной точке перехода 760px список перемещается под календарь. Такая компоновка не вынуждает втискивать полные названия событий в каждую ячейку календаря и не создаёт нечитаемый горизонтальный календарь.
Выберите пример дня с обзором навигации.
Сверяйте заголовок встречи в расписании, а не полагайтесь на точку.
Удалите встречу и убедитесь, что маркер даты исчез, когда записей не осталось.
Правила планирования в дизайн-системе React Suite заданы явно
Правила планирования приложения заданы явно
Планирование на выходные отключено с помощью значений getDay() — нуля и шести. Календарь по-прежнему позволяет выбирать эти даты, чтобы расписание могло объяснить это правило, а не создавать впечатление, будто день работает некорректно. Появляется предупреждение, а кнопка добавления отключается. Это локальная политика команды, а не ограничение календаря React Suite.
Для буднего дня без встреч отображается специальное сообщение, а действие добавления остаётся доступным. Удаление встречи изменяет записи и показывает локальное уведомление. При этом не утверждается, что участник получил уведомление. Объекты Date, массив записей и простая политика явно представлены в исходном коде, поэтому их можно осознанно заменить для реального продукта.
Диалог добавления с проверкой данных в дизайн-системе React Suite
Удобное диалоговое окно добавления с проверкой данных
При открытии окна «Добавить сеанс проверки» заголовок и все предыдущие ошибки сбрасываются. Модальное окно состоит из заголовка, названия, основного содержимого и нижней панели; его открытие и onClose контролируются состоянием React. У поля ввода есть связанная с ним подпись, состояние ошибки и описание ошибки. Если заголовок короче трёх символов после удаления пробелов по краям, окно остаётся открытым и отображает предупреждение.
При отправке корректных данных к выбранной дате добавляется одна запись, модальное окно закрывается и появляется информационное сообщение. Компонент Modal отвечает за поведение диалога, включая закрытие клавишей Escape и управление фокусом. Кнопка отмены только закрывает черновик. Приложение не закрывает модальное окно, пока не проверит заголовок по собственному правилу.
Отмена удаляет несохранённый заголовок.
Отклонённый заголовок остаётся доступным для исправления.
Корректный заголовок добавляет одну локальную запись и обновляет маркер в календаре.
Подключите стили v6 и завершите приложение на дизайн-системе React Suite
Подключите стили v6 и завершите приложение
Установите [email protected] в проект React и импортируйте rsuite/dist/rsuite.min.css. Пример App включает этот импорт, исходный style.css и обёртку CustomProvider. В точке входа настройка использует React createRoot и не зависит от удалённого CDN. В автономную предварительную версию включены те же нативные компоненты и CSS.
React Suite также предоставляет дистрибутив таблицы стилей без сброса стилей. В этом примере намеренно используется стандартная таблица стилей: одновременное подключение обоих дистрибутивов привело бы к дублированию стилей и затруднило бы определение того, какой сброс применяется на странице. В существующем приложении выберите дистрибутив, подходящий к окружающей архитектуре стилей, и проверьте совместное отображение форм и заголовков.
Для настоящего календаря в дизайн-системе React Suite нужны дополнительные данные предметной области
Для настоящего календаря нужны дополнительные данные предметной области
Подключённому планировщику потребовались бы время, часовые пояса, участники, права доступа и результат сохранения данных. В этом примере только с датами такие поля не выдумываются и не создаётся впечатление, будто успешное обновление состояния отправило приглашение. Нижняя часть окна и уведомления подчёркивают локальный характер примера. Локальная функция формирования ключей дат подходит для этих записей, но не является полноценным решением для встреч с учётом часовых поясов.
При добавлении удалённого запроса оставляйте черновик в модальном окне до подтверждения результата или отображайте ошибку, которую можно исправить. Предотвращайте повторную отправку и сохраняйте выбранную дату и заголовок после сбоя. Библиотека предоставляет элементы интерфейса, а корректность приложения зависит от того, связаны ли эти элементы с реальной операцией.
Управляемый Calendar с маркерами в ячейках дат, локальными ключами дат и добавлением записей через модальное окно.
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>}
Заголовок страницы и точка адаптации 760px выбраны для этого примера.
04
Настройка агента дизайн-системы React Suite
Отправная точка для реализации
Нативный пример на 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-агента
Используйте компоненты календаря и расписания React Suite 6.2.4 вместе с CustomProvider и нативной таблицей стилей. Сохраните возможность выбирать будние дни, отключённое поведение для выходных и сценарий Modal/Input для добавления локальной записи об отзыве. Храните выбранную дату и записи расписания в состоянии приложения, проверяйте введённые сведения об отзыве перед добавлением и не изменяйте расписание при отмене. Сохраните адаптивную компоновку календаря и отображение расписания для выбранной даты. Не создавайте впечатление, будто отправляется приглашение в календарь или используется внешний сервис планирования.
05
Источники и область применения дизайн-системы React Suite
React Suite 6.2.4. Локальный календарь только с датами, собственная политика для выходных и примеры записей; приглашения и внешнее планирование не предусмотрены.
