Composants

calendar

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

32 sur 32

Activity cell heatmap

1840Activity cell heatmapGraphiquesUne grille de calendrier composée de petits carrés teintés qui balaye une onde diagonale et permet à une bande de niveau d'isoler une intensité à la fois.

Appointment Range Card

2108Appointment Range CardChamps de saisieUne carte qui associe une grille de date sur un mois avec un champ d'heure de début et d'heure de fin en dessous, pour choisir un jour plus une fenêtre horaire dans un bloc compact.

Appointment Scheduler Card

2109Appointment Scheduler CardChamps de saisieUn sélecteur de date unique encadré à l'intérieur d'une carte titrée avec un bouton de passage à aujourd'hui dans le coin, conçu pour prendre un rendez-vous.

Booked Dates Picker

2114Booked Dates PickerChamps de saisieUn sélecteur de date unique dans lequel une série de jours déjà réservés affiche une barre sur le numéro et ne peut pas être sélectionné, laissant les jours ouverts sélectionnables normalement.

Bounded Stay Range Picker

2116Bounded Stay Range PickerChamps de saisieUn sélecteur de plage de deux mois qui applique à la fois un nombre minimum et maximum de nuits, de sorte que seules les dates de fin à l'intérieur de cette fenêtre restent sélectionnables une fois le début défini.

Caption Style Date Picker

2118Caption Style Date PickerChamps de saisieUn sélecteur de date unique associé à un menu de sélection qui permute son en-tête entre une liste déroulante combinée mois et année, une liste déroulante mois uniquement ou une liste déroulante année uniquement.

Compact Time Range Picker

2126Compact Time Range PickerChamps de saisieUne carte de calendrier mensuel avec une bande de plage horaire à deux cellules dans le pied de page, les deux champs horaires étant divisés uniquement par un court tiret, de sorte que la paire se lit comme un seul contrôle de plage.

Date Range Picker

2139Date Range PickerChamps de saisieUn calendrier mensuel unique pour choisir une date de début et de fin, où chaque jour entre eux se remplit comme une bande continue en surbrillance une fois les deux extrémités sélectionnées.

Dropdown Date Picker

2143Dropdown Date PickerChamps de saisieUn sélecteur de date d'un seul mois dont l'en-tête utilise une liste déroulante de mois et une liste déroulante d'année côte à côte, donc passer à une date distante nécessite une sélection au lieu de plusieurs clics de flèche.

Dual Month Date Picker

2144Dual Month Date PickerChamps de saisieDeux grilles mensuelles adjacentes partageant une date sélectionnée, avec une seule paire de flèches qui avancent ou reculent les deux mois.

Future-Only Date Picker

2158Future-Only Date PickerChamps de saisieUn sélecteur de date unique où chaque jour avant une date limite fixe est grisé et non cliquable, de sorte que seule cette date ou une date ultérieure peut être sélectionnée.

Localized booking calendar

2185Localized booking calendarChamps de saisieUn sélecteur de plage de deux mois à l'intérieur d'une carte dont le titre, le sous-titre et les noms de mois basculent entre deux langues à partir d'un petit menu de sélection dans l'en-tête.

Minimal Single Date Picker

2189Minimal Single Date PickerChamps de saisieUn calendrier mensuel simple avec un titre de mois et d'année en texte brut et deux boutons fléchés, conçu pour choisir une date avec le moins de parties visuelles possible.

Minimum-Stay Range Picker

2190Minimum-Stay Range PickerChamps de saisieUn sélecteur de plage mensuelle unique qui impose un nombre minimum de nuits entre les deux dates sélectionnées, avec une courte légende sous la grille expliquant la règle.

Multi-Date Picker

2196Multi-Date PickerChamps de saisieUn calendrier de deux mois pour sélectionner une poignée de dates individuelles non consécutives jusqu'à un nombre maximum, chaque sélection étant affichée comme son propre jour rempli.

Quick Pick Date Card

2213Quick Pick Date CardChamps de saisieUne carte de calendrier mensuel avec une rangée de boutons de raccourci de date relative en dessous, de sorte qu'une date commune est à portée de clic sans ouvrir de menu.

Seasonal Range Picker

2223Seasonal Range PickerChamps de saisieUn sélecteur de plage de deux mois limité à une saison d'ouverture fixe, atténuant chaque date avant ou après la fenêtre autorisée sur les deux mois visibles.

Single Date Grid

2230Single Date GridChamps de saisieUne grille mensuelle simple et sans cadre pour choisir une date, avec un en-tête de mois, une ligne de jour de la semaine et des cellules de jour de taille généreuse.

Two-Month Range Picker

2261Two-Month Range PickerChamps de saisieUn sélecteur de plage de dates qui affiche deux mois consécutifs à la fois, de sorte qu'une plage couvrant une limite mensuelle reste entièrement visible pendant son choix.

Weekday-Only Range Picker

2265Weekday-Only Range PickerChamps de saisieUn sélecteur de plage de deux mois qui démarre tous les samedis et dimanches, de sorte qu'une plage choisie ne peut commencer, se terminer et s'étendre que sur les jours de la semaine.

Birthdate popover picker

2305Birthdate popover pickerChamps de saisieUn bouton étiqueté qui ouvre un calendrier flottant avec des listes déroulantes de mois et d'année pour atteindre rapidement une année de naissance, se fermant dès qu'un jour est choisi.

Date and Time Duo Picker

2332Date and Time Duo PickerChamps de saisieDeux champs étiquetés côte à côte, un bouton de date compact qui ouvre une fenêtre contextuelle de calendrier et un champ d'heure simple, pour définir une date et une heure en deux étapes indépendantes.

Day Agenda Calendar

2333Day Agenda CalendarChamps de saisieUne carte combinant un calendrier mensuel compact avec une liste d'événements programmés pour le jour sélectionné et un bouton pour ajouter un autre événement.

Meeting Slot Scheduler

2385Meeting Slot SchedulerChamps de saisieUne carte de réservation qui place une grille mensuelle à côté d'une liste déroulante de plages horaires d'un quart d'heure, certaines dates désactivées et barrées, se terminant par une ligne récapitulative et un bouton Continuer.

Mobile date drawer

2388Mobile date drawerChamps de saisieUn champ de date conçu pour le toucher qui ouvre son calendrier sous la forme d'une feuille inférieure glissant vers le haut depuis le bord du cadre au lieu d'un petit popover flottant.

Natural Language Date Field

2389Natural Language Date FieldChamps de saisieUn champ de texte qui lit des expressions telles que « dans 2 jours » ou « vendredi prochain » comme une date réelle, avec une fenêtre contextuelle de calendrier et une phrase d'aperçu en direct ci-dessous.

Priced stay range calendar

2406Priced stay range calendarChamps de saisieUn calendrier de plage dans lequel chaque cellule quotidienne affiche un petit prix sous son numéro, les week-ends à un prix plus élevé que les jours de la semaine, avec le mois et l'année choisis dans les listes déroulantes.

Stay Dates Picker

2442Stay Dates PickerChamps de saisieUne paire de champs de style réservation, Check-in et Check-out, chacun ouvrant son propre calendrier déroulant à côté d'une case horaire fixe, pour choisir un séjour à deux fins.

Stay range popover picker

2443Stay range popover pickerChamps de saisieUn bouton de déclenchement qui affiche deux dates reliées par un trait d'union et ouvre un calendrier à plage flottante pour choisir un jour de début et de fin, pour une sélection de séjour de style hôtelier.

2485Rocking icon CTABoutonsUne pilule d'accent solide dont l'icône de calendrier principale bascule comme un métronome en survol et, lorsque vous cliquez dessus, dessine une coche et remplace le libellé par une étiquette confirmée avant de revenir en arrière.

Month grid date picker

2773Month grid date pickerChamps de saisieUne grille de calendrier sur un mois pour choisir une date, avec un en-tête de jour de la semaine, des jours en sourdine des mois voisins, un cercle d'accent rempli sur le jour choisi et un point marquant le jour.

Date Range Picker

2794Date Range PickerChamps de saisieUne grille de calendrier mensuel pour choisir une date de début et de fin ensemble, les jours entre eux étant affichés comme une seule période connectée.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Activity cell heatmap
Une grille de calendrier composée de petits carrés teintés qui balaye une onde diagonale et permet à une bande de niveau d'isoler une intensité à la fois.
Appointment Range Card
Une carte qui associe une grille de date sur un mois avec un champ d'heure de début et d'heure de fin en dessous, pour choisir un jour plus une fenêtre horaire dans un bloc compact.
Appointment Scheduler Card
Un sélecteur de date unique encadré à l'intérieur d'une carte titrée avec un bouton de passage à aujourd'hui dans le coin, conçu pour prendre un rendez-vous.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)