कैलेंडर

अवलोकन

link

Web

tanrei-calendar

schedule

SwiftUI

TanreiCalendar

radio_button_unchecked

Jetpack Compose

TanreiCalendar

radio_button_unchecked

Flutter

TanreiCalendar

radio_button_unchecked

React Native

Calendar

radio_button_unchecked

इससे जनरेट किया गया: docs/status/status.json, specs/calendar.spec.json

कैलेंडर महीने का एक इनलाइन ग्रिड है। इसकी अपनी कोई सरफ़ेस, पैडिंग या एलिवेशन नहीं है, इसलिए यह पेज में दूसरे कॉन्टेंट के बग़ल में रहता है, जैसे बुकिंग का फ़ॉर्म या किसी रिपोर्ट का फ़िल्टर, या किसी DateTimePicker के भीतर, जो इसे बिना बदले इस्तेमाल करता है। यह एक तारीख़ चुनता है (mode single) या तारीख़ों की एक लगातार रेंज (mode range)।

आज वेब पर; बाक़ी जगह नियोजित

वेब कंपोनेंट कैलेंडर को वैसे ही इम्प्लीमेंट करता है जैसा यह पेज बताता है: महीने हफ़्तों का एक ही कॉलम हैं जो स्क्रॉल और ड्रैग के साथ चलता है। डेमो वही कंपोनेंट हैं। SwiftUI, Compose, Flutter और React Native ने इसे अभी नहीं बनाया है। उनके पैकेजों में अब भी हटाए जा चुके तारीख़ पिकर का कोड है, जिसके बारे में यह पेज कुछ नहीं बताता।

एक तारीख़। महीना बदलने के लिए दिनों को स्क्रॉल या ड्रैग करें, या बटन इस्तेमाल करें

इस्तेमाल

link

जब व्यक्ति कोई दिन चुनता है, तो कैलेंडर अपना value (या start और end) ख़ुद सेट करता है, और फिर change एमिट करता है। आप भी उन्हें सेट कर सकते हैं: स्क्रीन पर दिख रहे महीने से बाहर की तारीख़ अपने महीने को सामने ले आती है।

<tanrei-calendar id="check-in" label="चेक-इन की तारीख़" value="2026-09-17" min="2026-09-01"></tanrei-calendar>

<!-- एक रेंज, जिसमें ख़ाली सेल में पड़ोसी महीनों के दिन हैं। -->
<tanrei-calendar id="stay" mode="range" label="ठहरने की अवधि" show-adjacent-days
  disabled-dates="2026-09-21 2026-09-22"></tanrei-calendar>

<script type="module">
  import '@tanrei/web/components/calendar';
  const checkIn = document.querySelector('#check-in');
  // जो नियम किसी सूची में नहीं समा सकता, वह एक प्रॉपर्टी है: ISO तारीख़ से boolean देने वाला फ़ंक्शन।
  checkIn.isDateDisabled = (iso) => bookedDays.has(iso);
  // change फ़ायर होते समय एलिमेंट के पास पहले से नई तारीख़ होती है।
  checkIn.addEventListener('change', (e) => save(e.detail.value));

  // रेंज हर चुनाव के बाद change फ़ायर करती है; अकेली शुरुआत के बाद end "" होता है।
  document.querySelector('#stay').addEventListener('change', (e) => show(e.detail.start, e.detail.end));
</script>

import { Calendar } from '@tanrei/react';

<Calendar
  label="चेक-इन की तारीख़"
  value={checkIn}
  min="2026-09-01"
  isDateDisabled={(iso) => bookedDays.has(iso)}
  onChange={(e) => setCheckIn(e.detail.value)}
/>

<Calendar
  mode="range"
  label="ठहरने की अवधि"
  start={stay.start}
  end={stay.end}
  showAdjacentDays
  disabledDates={['2026-09-21', '2026-09-22']}
  onChange={(e) => setStay({ start: e.detail.start, end: e.detail.end })}
/>

SwiftUI, Compose, Flutter या React Native के उदाहरण नहीं हैं, क्योंकि इन प्लैटफ़ॉर्मों ने कैलेंडर नहीं बनाया है। वहाँ इसके जो नाम होंगे, वे स्पेक के नीचे प्लैटफ़ॉर्म मैपिंग में हैं।

तारीख़ पिकर कहाँ गया

link

तारीख़ और समय दो कंपोनेंट से चुने जाते हैं: यह कैलेंडर, और DateTimePicker जो इसे अपने भीतर रखता है।

पहले	अब
तारीख़ पिकर, मोडल या docked	date मोड में एक DateTimePicker, modal या docked
पेज में रखा महीने का ग्रिड	एक कैलेंडर
रेंज वाला तारीख़ पिकर	mode range वाला कैलेंडर, या range वाला DateTimePicker
तारीख़ पिकर का टेक्स्ट एंट्री वाला रूप	type date वाला एक टेक्स्ट फ़ील्ड, जिसका पिकर बटन एक DateTimePicker खोलता है
तारीख़ पिकर के टोकन	ग्रिड के लिए comp.calendar.*, सरफ़ेस, हेडर और क्रियाओं के लिए comp.date-time-picker.*

वेब पर पहले का वह एलिमेंट जो तारीख़ चुनता था, अब नहीं है। जो पेज उसका ग्रिड वहीं पेज में बनाता था, वह <tanrei-calendar> इस्तेमाल करता है, उन्हीं value, min, max, disabled-dates, today, locale और first-day-of-week के साथ; जो पेज उसे खोलता था, वह <tanrei-date-time-picker> इस्तेमाल करता है।

Material 3 और Apple के नाम

link

• Material 3 के docked और modal date picker date मोड में एक DateTimePicker हैं। उसका date range picker range के साथ वही है। m3-like प्रीसेट इन्हें Material के कंटेनर और कोनों के साथ बनाता है, महीनों को पेज की तरह अगल-बग़ल पलटता है और अंत में text क्रियाएँ रखता है।
• पेज में रखा कैलेंडर Flutter का CalendarDatePicker और SwiftUI की graphical date picker style है: SwiftUI, Compose और Flutter पर TanreiCalendar, और React Native पर Calendar।
• Material के टेक्स्ट एंट्री पर ले जाने वाले पेंसिल और कीबोर्ड टॉगल का यहाँ कोई समकक्ष नहीं है: तारीख़ टेक्स्ट फ़ील्ड में टाइप की जाती है।
• Apple का graphical date picker आड़े अक्ष वाला कैलेंडर है, जिसे cupertino प्रीसेट सेट करता है।

स्पेक

link

संरचना

भाग	विवरण
1 navigation-row	The top row: the view toggle at the start, and the previous and next buttons at the end.
2 view-toggle	The displayed month and year with a chevron (expand_more). Pressing it switches between the day view and the year view. It is drawn with the unselected condition's colors.
3 navigation	The previous-month and next-month buttons: Tanrei icon-only Buttons of the text variant whose arrows follow the axis the months move along. They are hidden in the year view. A scroll of a wheel or a trackpad, a drag with a finger, a pen or a mouse, and Page Up and Page Down move the month too.
4 weekday-row	The narrow names of the seven weekdays, from the first day of the week.
5 day	One day in the grid (an item the calendar generates): its number on a round container that carries the day's condition and its state answer. The containers of the days inside a range join into one band. On the vertical axis the days are one unbroken column of weeks: a week two months share is one row, which a month change carries from its place in the one view to its place in the other.
6 year · वैकल्पिक	One year of the year view (an item the calendar generates), on a container that carries the year's condition and its state answer.
7 focus-ring	Gap-then-ring indicator around the container of the day, year or view toggle that has keyboard focus.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
mode	single | range	"single"	single: one date, in value. range: one contiguous span of dates, from start to end inclusive.
value	string	""	The chosen date in single mode, as an ISO 8601 calendar date ("2026-09-17"); empty when none is chosen. The calendar sets it when the person chooses a day and emits change; the product may also set it. A calendar date has no time and no time zone.
start	string	""	The first date of the chosen range in range mode, as an ISO 8601 calendar date; empty when none is chosen.
end	string	""	The last date of the chosen range in range mode, as an ISO 8601 calendar date, never before start; empty while only start is chosen.
min	string	""	The earliest date that can be chosen, as an ISO 8601 calendar date; empty for no limit.
max	string	""	The latest date that can be chosen, as an ISO 8601 calendar date; empty for no limit.
disabledDates	strings		Dates inside min and max that cannot be chosen (booked, closed), as ISO 8601 calendar dates. Every platform also takes a predicate (isDateDisabled) for a rule no list can hold, such as every weekend; a day is unavailable when either says so.
today	string	""	The date drawn as today, as an ISO 8601 calendar date. Empty uses the device's current date in its own time zone. Set it when the product's today is another (a venue's time zone, a server's date) and in tests.
firstDayOfWeek	locale | sunday | monday | tuesday | wednesday | thursday | friday | saturday	"locale"	The weekday in the first column. locale takes it from the locale (Sunday in the United States and Japan, Monday in most of Europe).
locale	string	""	A BCP 47 language tag ("en-US", "ja-JP") for month and weekday names, digits and the first day of the week. Empty uses the platform's current locale. The calendar is the Gregorian calendar in every locale.
startView	day | year	"day"	Whether the calendar first shows the days of a month or the list of years. year suits a date far from today, such as a birthday.
showAdjacentDays	boolean	false	Fills the grid's spare cells with the days of the previous and next month, drawn quieter than the month's own. Such a day can be chosen when it is available, and a range may start or end on it; choosing one also shows its month.
label	string	""	The accessible name of the whole calendar ("Check-in date"). Needed when a page has more than one calendar, or when nothing near it says what the date is for. A picker that holds the calendar names it with its own label.
startLabel	string	""	Range mode: the description of the start day, in the product's language ("Start date"). The product's: Tanrei has no words for it. Empty reads the product's words.
endLabel	string	""	Range mode: the description of the end day, in the product's language ("End date"). The product's: Tanrei has no words for it. Empty reads the product's words.
previousMonthLabel	string	""	The accessible name of the previous-month button, in the product's language ("Previous month"). The product's: Tanrei has no words for it. Empty reads the product's words. Required: a glyph alone is not a name.
nextMonthLabel	string	""	The accessible name of the next-month button, in the product's language ("Next month"). The product's: Tanrei has no words for it. Empty reads the product's words. Required: a glyph alone is not a name.
yearViewLabel	string	""	The description of the view toggle, whose name is the month and year it shows, in the product's language ("Choose a year"). The product's: Tanrei has no words for it. Empty reads the product's words.
todayLabel	string	""	Read after today's date and the current year, where the platform has no property that says so (the web's aria-current), in the product's language ("Today"). The product's: Tanrei has no words for it. Empty reads the product's words. With neither, the platform's own word for the present day in the locale, where it has one.

इवेंट

इवेंट	विवरण
change	The person chose a day that changes the choice. Carries value in single mode, or start and end in range mode (end empty after a start alone). The calendar has already set the props it carries.

आइटम

वे आइटम के प्रकार जिन्हें कंपोनेंट दोहराता है। फ़िक्स्चर अपने आइटम क्रम से सूचीबद्ध करता है; हर प्लैटफ़ॉर्म हर प्रकार को अपने तरीक़े से नाम देता है।

day

One day in the grid. The calendar generates the days from the month, the bounds, the disabled dates and showAdjacentDays; a product and a fixture never list them.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
date	string	""	The day, as an ISO 8601 calendar date.
disabled	boolean	false	Whether the day is unavailable: before min, after max, in disabledDates or named by isDateDisabled.
adjacent	boolean	false	Whether the day belongs to the previous or next month, shown because showAdjacentDays is true.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	renderDay	TanreiCalendarDay	TanreiCalendarDay	TanreiCalendarDay	CalendarDay
date · प्रॉपर्टी	date	date	date	date	date
disabled · प्रॉपर्टी	disabled	disabled	disabled	disabled	disabled
adjacent · प्रॉपर्टी	adjacent	isAdjacent	adjacent	adjacent	adjacent
टिप्पणियाँ	A gridcell button in the shadow root with part="day", data-date and, for a day of the neighbouring month, data-adjacent, rendered by renderDay.

year

One year of the year view, from min's year to max's year. The calendar generates them; a product and a fixture never list them.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
year	number	0	The year.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	renderYear	TanreiCalendarYear	TanreiCalendarYear	TanreiCalendarYear	CalendarYear
year · प्रॉपर्टी	year	year	year	year	year
टिप्पणियाँ	A button in the shadow root with part="year", rendered by renderYear.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
CAL-1	THE calendar SHALL lay out, from top to bottom, the navigation row, the weekday row and six rows of seven cells, each cell a square of comp.calendar.cell.size but never smaller than sys.target.touch for touch input and sys.target.pointer for fine pointers (a platform that cannot tell the input type SHALL use sys.target.touch), because the cells are the days' hit areas and cannot extend over each other; the first day of the displayed month SHALL sit in the column of its weekday, and all six rows SHALL be kept when the month needs fewer, so that the calendar keeps its height when the month changes. The navigation row and the weekday row are each one cell tall. THE calendar SHALL draw no surface and no padding of its own: it is as wide as its seven columns, and the page or the picker that holds it gives it its background and inset.
CAL-2	THE calendar SHALL draw each day from exactly one condition, by precedence: selected for the date of single mode and for a range's start and end; in-range for a day strictly between a range's start and end; today for the date today names (or the device's current date) when it is neither; adjacent for a shown day of the previous or next month (CAL-15) when it is none of these; otherwise unselected. It SHALL draw each year of the year view from selected for the displayed year, today for the current year when it is not displayed, and otherwise unselected, and the view toggle from unselected. WHILE a day is unavailable THE calendar SHALL draw it from the disabled tokens of its condition.
CAL-3	THE calendar SHALL draw a day's number in the locale's digits, centred in its cell, in comp.calendar.day.label.typescale and the label color of its condition (comp.calendar.unselected.label.color, and so on), on a container of side comp.calendar.day.container.size centred in the cell, with comp.calendar.day.container.shape corners eased by sys.shape.corner-smoothing, in the container color of its condition, with an outline of comp.calendar.outline.width in the outline color of its condition. The container of an in-range day SHALL instead span the full width of its cell at the same height, so that the containers of consecutive in-range days join into one band that breaks at the ends of a row with square ends; WHILE a range's start and end differ each of them SHALL also draw, behind its own container, the half of its cell toward the other in comp.calendar.in-range.container.color, so that the band runs into it. The band SHALL cover every day the grid shows between start and end, and no empty cell.
CAL-4	THE calendar SHALL draw each weekday's narrow name from the locale ("S", "M" in English; "日", "月" in Japanese) centred in its column, in comp.calendar.weekday.typescale and comp.calendar.weekday.color, and SHALL expose it as a column header named by the weekday's full name; weekday names SHALL take no focus.
CAL-5	THE calendar SHALL draw the navigation row with the view toggle at the start and, in the day view, the previous-month and next-month buttons at the end, comp.calendar.navigation.gap apart, each a Tanrei Button of the text variant and the medium size with an icon and no label, named previousMonthLabel and nextMonthLabel. WHILE comp.calendar.navigation.axis is vertical their glyphs SHALL be arrow_upward and arrow_downward; WHILE it is horizontal they SHALL be arrow_back for the previous month and arrow_forward for the next in every layout direction, pointing toward the start and the end: in a right-to-left layout the icon helper mirrors both, because the icon set marks them as mirrored, and the calendar SHALL NOT exchange the two names or mirror a glyph itself. The previous button SHALL be disabled while the displayed month is min's month and the next button while it is max's month, and in the year view both SHALL be hidden. THE calendar SHALL NOT change the buttons' variant, size or tokens.
CAL-6	THE calendar SHALL draw the view toggle as a container at least comp.calendar.view-toggle.container.height tall with comp.calendar.view-toggle.container.shape corners eased by sys.shape.corner-smoothing, padded by comp.calendar.view-toggle.container.padding-inline at each end, holding the displayed month and year in the locale's form ("September 2026", "2026年9月") in comp.calendar.view-toggle.label.typescale and, comp.calendar.view-toggle.gap after it, the expand_more glyph at comp.calendar.view-toggle.icon.size with the family and fill of an unselected icon, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, both in comp.calendar.unselected.label.color on comp.calendar.unselected.container.color; the glyph SHALL be turned half a turn while the year view is shown, over comp.calendar.motion.state-duration with comp.calendar.motion.state-easing (at once where motion is reduced). WHERE the view toggle is shorter than the minimum target it SHALL extend its hit area to sys.target.touch for touch input and sys.target.pointer for fine pointers without changing its visual size. WHEN it is activated it SHALL switch between the day view and the year view.
CAL-7	WHEN the year view is shown THE calendar SHALL draw, in the space of the weekday row and the six rows of days, the years from min's year to max's year (1900 to 2100 when min or max is empty) in rows of three cells, each a third of the grid's width and comp.calendar.cell.size tall, each year centred in its cell in the locale's digits in comp.calendar.year.label.typescale on a container of comp.calendar.year.container.width by comp.calendar.year.container.height with comp.calendar.year.container.shape corners, colored and outlined as a day of its condition is; the list SHALL scroll, and SHALL open scrolled so that the displayed year's row is the third row in view, or as near to it as the list's ends allow. WHEN the user chooses a year THE calendar SHALL show the day view of the month with the displayed month's number in that year, clamped between min's and max's months, move focus to its active day and SHALL NOT change the choice; WHEN the view toggle is activated in the year view it SHALL show the day view unchanged.
CAL-8	WHILE mode is single, WHEN the user chooses an available day by pointer, touch, Enter or Space THE calendar SHALL set value to it and, if it differs from the value before, emit change once with it.
CAL-9	WHILE mode is range, WHEN the user chooses an available day THE calendar SHALL make it the start and clear the end when no start is chosen, when both are chosen, or when the day is before the start, and otherwise SHALL make it the end (a start and end on the same day make a one-day range); after each choice it SHALL set start and end and emit change once with both, end empty after a start alone. A range SHALL be one contiguous span from start to end inclusive; unavailable days between them SHALL stay inside it, drawn and exposed as unavailable (a product that cannot accept such a span says so after change).
CAL-10	THE calendar SHALL give the day grid one tab stop, the active day: WHEN a month is shown the active day SHALL be the chosen date (single mode) or start (range mode) when it lies in that month, otherwise today when it does, otherwise the first available day of the month, otherwise its first day; only the active day SHALL take focus from Tab, and the keys of CAL-11 move it.
CAL-11	WHILE focus is on a day THE calendar SHALL move the active day and focus with Right Arrow and Left Arrow one day in the direction the arrow points (the next and the previous day left to right, the previous and the next right to left), with Down Arrow and Up Arrow one week later and earlier, with Home and End to the first and last day of its week row, with Page Down and Page Up to the same day of the next and previous month (the last day of that month when it is shorter), and with Shift+Page Down and Shift+Page Up to the same day of the next and previous year, whatever comp.calendar.navigation.axis is; WHEN the new active day lies in another month THE calendar SHALL show that month; it SHALL NOT move the active day before min or after max; unavailable days SHALL be reachable but SHALL NOT be chosen; Enter and Space SHALL choose the active day.
CAL-12	WHILE focus is in the year view THE calendar SHALL give the list one tab stop, the displayed year, and SHALL move focus with Right Arrow and Left Arrow one year in the direction the arrow points, with Down Arrow and Up Arrow one row, and with Home and End to the first and last year, scrolling the focused year into view; Enter and Space SHALL choose the focused year (CAL-7).
CAL-13	WHEN the previous-month or next-month button is activated, a step of a detented wheel moves the month (CAL-33), a scroll or a drag ends on another month than the one shown when it began (CAL-34, CAL-31) or a day of a neighbouring month is chosen (CAL-15), THE calendar SHALL show that month, keep focus where it was, make the active day the same day number of the new month (its last day when the month is shorter; the chosen day, WHEN a day was chosen) and announce the new month and year once, politely; WHEN a year is chosen in the year view it SHALL announce the month and year it shows the same way. A month that a scroll only passes through is shown without an announcement (CAL-34).
CAL-14	WHEN the displayed month changes by a button, a key, a step of a detented wheel (CAL-33) or a chosen day THE calendar SHALL play the change over comp.calendar.motion.page-duration with comp.calendar.motion.page-easing: WHILE comp.calendar.navigation.axis is vertical as one continuous scroll of the weeks, every frame of it being the in-between look of CAL-29 at the progress the easing gives, so that the two months are never drawn as two separate grids and a week they share is neither drawn twice nor replaced; WHILE the axis is horizontal as two pages, the old month's grid sliding out toward the start and the new one in from the end for a later month, and the reverse for an earlier one. Every way of moving the month SHALL move the same thing — on the vertical axis the one progress of CAL-29, on the horizontal one the place of the two pages — and none SHALL have a look of its own: a scroll of a wheel or a trackpad is followed as CAL-33 says and settles as CAL-34 says, and a drag is followed as CAL-30 says and settles as CAL-31 says. WHEN one of them begins while the days are still moving — a month change is playing, or the days are settling after a scroll or a drag — THE calendar SHALL carry on from what is on screen, without a jump and without waiting for the motion to end. WHEN it switches between the day view and the year view it SHALL cross-fade them over the same duration and easing; WHERE motion is reduced it SHALL make all of these changes at once. The weekday row, the navigation row and the calendar's size SHALL NOT move.
CAL-15	WHILE showAdjacentDays is true THE calendar SHALL fill the cells before the displayed month's first day and after its last with the days of the previous and next month, in order, drawn from the adjacent condition unless a higher one applies (CAL-2), and treated as any day for availability (CAL-16), choosing (CAL-8, CAL-9) and the range's band (CAL-3); WHEN the user chooses such a day by pointer or touch THE calendar SHALL choose it as any day, emitting change as CAL-8 and CAL-9 say, and SHALL then show that day's month (CAL-13) with the motion of CAL-14, where the chosen day is one of the month's own and the active day, taking focus if focus was in the grid; a range's start and its end SHALL both do so. A press on an unavailable one SHALL choose nothing and show no other month. WHILE showAdjacentDays is false those cells SHALL be empty, take no press and be hidden from assistive technology.
CAL-16	THE calendar SHALL treat as unavailable every day before min, after max, listed in disabledDates or named by the platform's isDateDisabled predicate. WHILE a day is unavailable THE calendar SHALL render its container, label, outline and opacity from the disabled tokens of its condition (comp.calendar.unselected.container.color at rest, and so on), SHALL NOT make it the chosen date, start or end, SHALL expose it to assistive technology as unavailable (disabled), and SHALL keep it reachable by the arrow keys. WHEN value, start or end names an unavailable day THE calendar SHALL still draw it as chosen, from the disabled tokens of the selected condition, until the person chooses another.
CAL-17	WHEN the calendar is first shown THE calendar SHALL show the month of value or start, otherwise of today, clamped between min's month and max's month, or the year view WHERE startView is year; WHEN the product sets value, start or end to a date outside the displayed month THE calendar SHALL show that date's month, without the motion of CAL-14.
CAL-18	WHILE a day, a year or the view toggle is hovered, keyboard-focused or pressed THE calendar SHALL render its container, label, outline and opacity from the component tokens of its condition in the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. WHEN these colors change between states THE calendar SHALL animate them over comp.calendar.motion.state-duration with comp.calendar.motion.state-easing, and SHALL change them at once where motion is reduced.
CAL-19	WHEN a day, a year or the view toggle receives keyboard focus THE calendar SHALL show the focus ring around its container — around the circle of comp.calendar.day.container.size for every day, an in-range day included — without animation; focus gained by pointer or touch SHALL NOT show it.
CAL-20	WHEN the calendar's day, year or view toggle is pressed by pointer, touch, Enter or Space THE calendar SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
CAL-21	WHILE pressed THE calendar's day, year or view toggle SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, outline, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.calendar.motion.feedback-duration with comp.calendar.motion.state-easing, fades over comp.calendar.motion.state-duration with comp.calendar.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
CAL-22	THE calendar's day, year and view toggle SHALL ease their container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show their keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
CAL-23	THE calendar SHALL expose itself as a group named by label while label is not empty, the day grid as a grid named by the displayed month and year with the weekday names as its column headers, and each shown day as a cell that can be activated, named by its full date in the locale ("Thursday, September 17, 2026") followed by todayLabel for today where the platform has no property for the current date, with its selected state (true for the chosen date and for every day of a range), described by startLabel or endLabel for a range's start and end, and with its disabled state while unavailable; empty cells SHALL be hidden. It SHALL expose the view toggle as a button named by its visible month and year, described by yearViewLabel, with its expanded state (true while the year view is shown), and each year as a button with its selected state and todayLabel for the current year.
CAL-24	THE calendar SHALL take month and weekday names, digits and the locale's first day of the week from locale, or from the platform's current locale while locale is empty, and SHALL use firstDayOfWeek instead of the locale's while it is not locale; WHERE the platform has no week data for the locale it SHALL use the first days of CLDR's weekData, which the platform package embeds. Every date SHALL be a Gregorian calendar date without a time or a time zone, and WHILE today is empty THE calendar SHALL read the device's current date in its own time zone WHEN it is first shown and WHEN the date changes while it is shown.
CAL-25	THE calendar's days, years, weekday names and view toggle SHALL grow with enlarged text rather than clip it: a day's container SHALL grow to hold its number. WHERE the space given to the calendar is narrower than seven minimum targets, the cells SHALL narrow equally so that the grid fits it, keeping their numbers at their size, and the calendar SHALL never be wider than the space it is given.
CAL-26	WHEN the layout direction is right-to-left THE calendar SHALL mirror its layout — the first day of the week in the rightmost column, the view toggle at the right and the navigation buttons at the left, and, on the horizontal axis, the slide of CAL-14 and the side each neighbouring month lies on (the next month toward the left, so that a drag toward the right brings it, CAL-30) — and SHALL NOT mirror the vertical scroll of the weeks, a vertical drag or the vertical arrows. A drag SHALL move the days where the pointer goes, and a scroll of a wheel or a trackpad SHALL move them where it moves the content of a scrolled list, in every layout direction.
CAL-27	WHEN mode, startView or firstDayOfWeek names a value the calendar does not define THE calendar SHALL behave as its default value and in debug builds report the unknown value; WHEN value, start, end, min, max, today or an entry of disabledDates is not an ISO 8601 calendar date, end is before start, value is set in range mode or start or end in single mode THE calendar SHALL ignore it and in debug builds report it; WHEN min is later than max THE calendar SHALL ignore both and report it in debug builds.
CAL-28	THE calendar SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the calendar is shown THE calendar SHALL draw itself for the new direction at once, without a motion of its own, keeping the displayed month, the selection and its focus.
CAL-29	WHILE comp.calendar.navigation.axis is vertical THE calendar SHALL treat the days as one unbroken column of week rows, in which a month's view is the six rows from the row of its first day, and SHALL draw every look between the views of two neighbouring months from one progress, 0 at the one and 1 at the other, with no threshold. The rows SHALL be offset along the column by the progress times the distance between the two views' first rows (four or five rows, each comp.calendar.cell.size tall) and clipped to the grid's six rows, so that a week the two views share is one row that travels from its place in the one to its place in the other. Every day SHALL be drawn at the linear interpolation by the progress between what the one view draws for it and what the other draws: its container, label and outline colors between the tokens of the adjacent condition and those of the unselected condition (comp.calendar.adjacent.label.color and comp.calendar.unselected.label.color, and so on, in the state the day is in) WHERE it is a neighbouring month's day in the one view and the month's own in the other (CAL-2), and its opacity between 1 where a view draws it and 0 where a view does not — a row outside that view's six, or a cell that view leaves empty because showAdjacentDays is false — so that a day coming into view fades in and a day leaving it fades out as far as the weeks have moved. A day that both views draw alike SHALL NOT change, and the band of a range (CAL-3) SHALL follow the same rule, each piece with its day. WHERE the two months are not neighbours (a step of a year, CAL-11; a date the keys reach in a further month) the distance SHALL be six rows, as if the later month's view began where the earlier one's ends.
CAL-30	WHILE the day view is shown, WHEN the user presses the day grid with touch, a pen or the primary button of a mouse and drags past the platform's touch slop (8 points where the platform names none, for every kind of pointer), further along the axis comp.calendar.navigation.axis names than across it, THE calendar SHALL take the drag: the press SHALL choose no day when it ends (CAL-8, CAL-9), the day under it SHALL leave its pressed state as it does when a press ends (CAL-20), and from then until the drag ends THE calendar SHALL move the days by the distance the pointer has travelled along the axis since the press, in the frame the pointer moves and without a motion of its own — toward the next month for a drag toward the top (vertical) or the start (horizontal), toward the previous month for the reverse — never further than the view of the month next to the displayed one, and never past min's or max's month, where the days SHALL stop. WHILE the axis is vertical THE calendar SHALL draw the in-between look of CAL-29 at the progress that travel gives (the travel over the distance between the two views), so that the scroll of the weeks, the fading in of the days coming into view and the change of a neighbouring month's day into one of the month's own all follow the pointer continuously; WHILE the axis is horizontal the two pages of CAL-14 SHALL travel with the pointer, side by side. A press that ends before it has passed the slop SHALL choose the day under it as CAL-8 and CAL-9 say, with every kind of pointer, so that a click of a mouse on a day still chooses it. WHILE a drag the calendar has taken lasts, THE calendar SHALL follow the pointer wherever it goes, outside the grid and the calendar included; no day SHALL be drawn hovered; nothing the calendar draws SHALL be selected as text or picked up by the platform's drag and drop; and a fine pointer SHALL show the platform's cursor for something held and dragged (grabbing) until the drag ends. At rest the cursor over a day SHALL stay the one a pressable day shows: the grid does not advertise the drag, which is a shortcut. A press of another mouse button SHALL take no drag. A drag that is further across the axis than along it when it passes the slop SHALL be left to the scrolling ancestor for its whole length; a scroll of a wheel or a trackpad is followed as CAL-33 says.
CAL-31	WHEN the user releases a drag the calendar has taken THE calendar SHALL choose one month: the neighbouring month the days have moved toward WHERE they are a quarter or more of the distance from the displayed month's view toward its view, and otherwise the displayed month — the same quarter that ends a scroll (CAL-34) — or, WHEN the release is a fling along the axis, the one of the two the fling is toward; a fling is a release faster than the platform's minimum fling velocity (Android's ViewConfiguration.getScaledMinimumFlingVelocity, Flutter's kMinFlingVelocity) or, where the platform names none (the web, SwiftUI, React Native), 0.5 points per millisecond, with every kind of pointer. A release's velocity is the pointer's over its last moves: WHERE the pointer has not moved for longer than the time after which the platform's velocity tracker takes a pointer as stopped (40 milliseconds in Android's VelocityTracker, Jetpack Compose's VelocityTracker and Flutter's VelocityTracker) or, where the platform names none (the web, SwiftUI, React Native), 40 milliseconds before the release THE calendar SHALL take the release as having no velocity, so that a drag that stops where it is wanted and is let go there is no fling, however fast it moved before it stopped. WHERE the chosen month is not the displayed one THE calendar SHALL show it as CAL-13 says and bring the days from where the release left them to its view over comp.calendar.motion.page-duration with comp.calendar.motion.page-easing; WHERE it is the displayed month THE calendar SHALL return them over the same motion and announce nothing. The quarter decides only what a release chooses; nothing drawn changes at it. The release SHALL NOT also choose the day under the pointer, and a drag SHALL never change value, start or end, nor emit change.
CAL-32	WHEN a drag the calendar has taken is cancelled — the platform cancels the pointer (a system gesture, a lost capture), Escape is pressed while it lasts, the product sets value, start or end (CAL-17), or the year view is shown — THE calendar SHALL return the days to the view of the displayed month (the month the product's date has just named, where it named one) over comp.calendar.motion.page-duration with comp.calendar.motion.page-easing and announce nothing; WHEN the product sets value, start or end, or the year view is shown, while a scroll is being followed THE calendar SHALL do the same and SHALL ignore what is left of that scroll (CAL-34). WHILE a drag or a scroll holds the days between two views THE calendar SHALL NOT change the month and year that the view toggle and the grid's name show, the active day, keyboard focus or what it exposes to assistive technology: the days of the month coming into view SHALL be hidden from assistive technology and take no focus and no press until that month is the displayed one, which it becomes by the release that chooses it (CAL-31), by the end of the scroll that chooses it or by the scroll reaching its view (CAL-34). WHERE motion is reduced THE calendar SHALL still move the days with the pointer and with the scroll and draw the in-between look, which the person's own hand moves, and SHALL put them at the chosen month's view at once when the drag is released or cancelled or the scroll ends.
CAL-33	WHILE the day view is shown, WHEN a wheel or a trackpad scrolls over the day grid further along the axis comp.calendar.navigation.axis names than across it, THE calendar SHALL take the scroll and move the days by the distance the scroll reports, one point for each point and in the frame it arrives, as the content of a scrolled list moves — toward the next month for a scroll toward the bottom (vertical) or toward the end (horizontal), toward the previous month for the reverse — without a motion of its own and with no least amount: the slightest scroll moves the days by that much and no further. WHILE the axis is vertical THE calendar SHALL draw the in-between look of CAL-29 at the progress that travel gives; WHILE it is horizontal the two pages of CAL-14 SHALL travel side by side. A scroll that goes on SHALL go on through month after month: WHEN the days reach the view of the neighbouring month THE calendar SHALL make that month the displayed one (CAL-34) and carry on toward the month after it with the distance that is left, in the same frame, so that a scroll never waits for an earlier one to end and no part of it is dropped. The days SHALL stop at the view of min's or max's month; a scroll along the axis that can move them no further SHALL still be the calendar's and SHALL NOT be passed on to a scrolling ancestor. A scroll further across the axis than along it SHALL be left to the scrolling ancestor, and so SHALL a scroll that zooms (a pinch on a trackpad, a wheel turned with the platform's zoom key). WHERE the platform reports a scroll as steps of a detented wheel and not as a distance (a delta in lines or pages on the web; a mouse wheel's notch where the platform tells it from a trackpad), each step SHALL instead move one month, as a press of the previous or next button does (CAL-13, CAL-14), one step after another without waiting for the motion to end.
CAL-34	THE calendar SHALL take a scroll it follows (CAL-33) as ended WHEN the platform says that it has ended, its momentum included, where the platform reports that; where it does not (the web), WHEN no scroll event has arrived for 150 milliseconds, or WHEN the scroll has slowed below 0.1 points per millisecond, measured over its events of the last 100 milliseconds — the tail of a momentum scroll, which need not be waited out: THE calendar SHALL then ignore the events that follow for as long as they are no faster than that, until a faster one arrives or 150 milliseconds pass without any. WHEN a scroll ends with the days between two views THE calendar SHALL choose one of the two — the neighbouring month WHERE the days are a quarter or more of the distance from the displayed month's view toward its view, and otherwise the displayed month, so that a slight scroll returns and a deliberate one need not reach halfway — and SHALL bring the days to the chosen view over comp.calendar.motion.page-duration with comp.calendar.motion.page-easing (at once where motion is reduced, CAL-32). The displayed month SHALL be the month whose view the days last rested on or reached: WHEN a scroll that goes on reaches a neighbouring month's view THE calendar SHALL show that month in the view toggle and the grid's name at once, make its days the ones that take focus and presses, and move the active day and a focused day as CAL-13 says, but SHALL announce nothing yet; the quarter is then counted from that view. THE calendar SHALL announce the month and year once, politely, WHEN a scroll has ended and the days have been given their view, and only WHERE that month is not the one that was displayed when the scroll began; a scroll that returns SHALL announce nothing. WHEN a faster scroll event arrives, a drag is taken or a button or a key moves the month while the days are settling THE calendar SHALL carry on from what is on screen (CAL-14). A scroll SHALL never change value, start or end, nor emit change.
CAL-35	THE calendar SHALL have no words of its own: it SHALL take startLabel, endLabel, previousMonthLabel, nextMonthLabel, yearViewLabel and todayLabel from the instance's prop and, WHILE that is empty, from the product's words of the same name; WHILE neither gives todayLabel it SHALL take the word from the platform's locale data WHERE the platform has the locale's own word for the present day, and it SHALL take no other word from anywhere. IF neither gives a navigation button its name, or a range's start or end its description, THE calendar SHALL still draw the part and keep it working, and in debug builds SHALL report the missing words once, naming the prop. WHILE neither gives yearViewLabel the view toggle SHALL have no description: its name and its expanded state (CAL-23) still say what it shows.
CAL-36	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE calendar SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its group, which it SHALL be WHILE it has a name: its label, or one given so — an id reference by the elements it names in the host's tree or a tree around it, a description after its own. WHILE label is not empty it is the group's name, over a name given so. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE calendar SHALL take it off that element.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-calendar	TanreiCalendar	TanreiCalendar	TanreiCalendar	Calendar
mode · प्रॉपर्टी	mode	range	mode	mode	mode
value · प्रॉपर्टी	value	selection	value	value	value
start · प्रॉपर्टी	start	range	start	start	start
end · प्रॉपर्टी	end	range	end	end	end
min · प्रॉपर्टी	min	minDate	min	firstDate	min
max · प्रॉपर्टी	max	maxDate	max	lastDate	max
disabledDates · प्रॉपर्टी	disabledDates	disabledDates	disabledDates	disabledDates	disabledDates
today · प्रॉपर्टी	today	today	today	currentDate	today
firstDayOfWeek · प्रॉपर्टी	firstDayOfWeek	firstDayOfWeek	firstDayOfWeek	firstDayOfWeek	firstDayOfWeek
locale · प्रॉपर्टी	locale	locale	locale	locale	locale
startView · प्रॉपर्टी	startView	startView	startView	startView	startView
showAdjacentDays · प्रॉपर्टी	showAdjacentDays	showsAdjacentDays	showAdjacentDays	showAdjacentDays	showAdjacentDays
label · प्रॉपर्टी	label	label	label	label	accessibilityLabel
startLabel · प्रॉपर्टी	startLabel	startLabel	startLabel	startLabel	startLabel
endLabel · प्रॉपर्टी	endLabel	endLabel	endLabel	endLabel	endLabel
previousMonthLabel · प्रॉपर्टी	previousMonthLabel	previousMonthLabel	previousMonthLabel	previousMonthLabel	previousMonthLabel
nextMonthLabel · प्रॉपर्टी	nextMonthLabel	nextMonthLabel	nextMonthLabel	nextMonthLabel	nextMonthLabel
yearViewLabel · प्रॉपर्टी	yearViewLabel	yearViewLabel	yearViewLabel	yearViewLabel	yearViewLabel
todayLabel · प्रॉपर्टी	todayLabel	todayLabel	todayLabel	todayLabel	todayLabel
change · इवेंट	change	selection	onChange	onChanged	onChange
टिप्पणियाँ	Attributes are kebab-case (disabled-dates is a space-separated list of ISO dates, first-day-of-week, start-view, show-adjacent-days, start-label, …); isDateDisabled is a property only (a function from an ISO date string to a boolean). value, start and end are set before change fires, as a native control does. The navigation buttons are <tanrei-button variant="text"> elements with a slotted glyph and no label, in the shadow root. The calendar is not form-associated: the product's field is. A vertical axis reads wheel events with deltaY and a horizontal axis deltaX: a delta in pixels (deltaMode 0) is a distance and is followed point for point (CAL-33), a delta in lines or pages is a step of one month; an event with ctrlKey is a zoom and is left alone. The web reports neither the end of a scroll nor its momentum, so a scroll ends by the 150 ms of silence or the slow-down of CAL-34, and a mouse wheel that the browser reports in pixels is followed as a distance like a trackpad (the web cannot tell them apart). Drags of touch, a pen and a mouse's primary button are followed along the axis (pointer events with setPointerCapture once the drag is taken; touch-action: pan-x on a vertical grid and pan-y on a horizontal one, so the page keeps its pan across it); while a drag is taken the grid shows cursor: grabbing, draws no hover, and the click that follows the release chooses nothing. On the vertical axis the day grid is one keyed list of week rows — the rows of the displayed month and, while a change plays or a drag lasts, those of the month it moves toward — offset by one custom property for the progress (CAL-29), which a drag and a scroll write in each frame and a button's change and a settle transition; a day's colors are mixed by that progress with color-mix() and its opacity follows it, so a shared week is one element throughout. The rows coming into view are inert and aria-hidden until their month is the displayed one. The slop is 8 points for every pointer and a fling 0.5 points per millisecond, as the tabs' and the sheets'. The axis is read from the resolved comp.calendar.navigation.axis custom property once per system. Locale data comes from Intl.DateTimeFormat and Intl.Locale's week info where the browser has it; otherwise the embedded CLDR table. Without locale it reads the nearest lang attribute, then navigator.language. Snapshot harness: the element on a 400 × 440 stage of the surface color (CAL-1's verify). Words: the element has no words of its own. start-label, end-label, previous-month-label, next-month-label, year-view-label and today-label left empty read the product's words, set once with setWords() from @tanrei/web; the element draws again when they change. The present day's word, where neither the instance nor the product gives one, is Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(0, "day").	Planned. A view: TanreiCalendar(selection: Binding<DateComponents?>, …) for a date and TanreiCalendar(range: Binding<TanreiDateRange>, …) for a range, where TanreiDateRange holds start and end as DateComponents?; the initializer is the mode. Dates are DateComponents with year, month and day in the Gregorian calendar, so no time zone enters. Writing the binding is change. minDate, maxDate, today and disabledDates (Set<DateComponents>) take DateComponents; isDateDisabled is a closure. The words are fields of a TanreiCalendarLabels passed as labels:, whose field names are the spec's; label is the view's own. locale defaults to the \.locale environment. Arrow keys through .onKeyPress; the drag of CAL-30 through a DragGesture(minimumDistance:) on the axis whose predictedEndTranslation gives the fling, which a mouse drives on macOS and iPadOS as a finger does; on macOS the scroll through an NSEvent monitor, whose phase and momentumPhase say when a scroll ends (CAL-34) and whose hasPreciseScrollingDeltas tells a trackpad's distance from a wheel's steps (CAL-33). On the vertical axis the weeks are one column offset by an animatable progress (animatableData), not two pages (CAL-29). The navigation buttons are TanreiButtons with an icon and no label. Built from the date picker's calendar view, which the DateTimePicker also shows. The product's words are read from the \.tanreiWords environment value.	Planned. TanreiCalendar(mode, value, start, end, onChange, min, max, disabledDates, isDateDisabled, today, firstDayOfWeek, locale, startView, showAdjacentDays, label, labels, modifier). Dates are TanreiDate(year, month, day), the date picker's value class (API 23 has no java.time.LocalDate). onChange receives a TanreiDateSelection(value, start, end); the caller keeps the state (hoisting). The other words are fields of a TanreiCalendarLabels. Compose has no grid role: the grid sets collectionInfo (7 columns) and each day collectionItemInfo, Role.Button, selected and disabled(). The drag of CAL-30 through pointerInput on the axis with a VelocityTracker for the fling, for touch, a stylus and a mouse alike; a scroll (CAL-33) through PointerEventType.Scroll, a mouse wheel's being steps. On the horizontal axis a HorizontalPager with one page a month is the likely primitive; on the vertical axis the weeks are one column offset by a progress with lerp for the colors (CAL-29), which a pager cannot draw, since it lays out two pages. Arrow keys through onPreviewKeyEvent. The navigation buttons are TanreiButtons with an icon and no label. The product's words are read from LocalTanreiWords.	Planned. A widget, as Flutter's own CalendarDatePicker is an inline calendar: TanreiCalendar(mode:, value:, start:, end:, onChanged:, firstDate:, lastDate:, currentDate:, …); firstDate, lastDate and currentDate keep Flutter's names. Dates are DateTimes of which only the year, month and day are read; isDateDisabled is a function. onChanged receives a TanreiDateSelection. Month and weekday names come from TanreiDateLocalizations (English built in, no intl dependency), the first day of the week from the embedded CLDR table. On the horizontal axis paging through a PageView; on the vertical axis the weeks are one column driven by an AnimationController whose value is the progress of CAL-29 (Color.lerp for the colors), moved by a GestureDetector's vertical drag callbacks, with DragEndDetails.primaryVelocity for the fling, for every PointerDeviceKind; a trackpad's scroll (CAL-33) arrives as PointerPanZoomUpdateEvents, whose end event ends it (CAL-34), and a mouse wheel's PointerScrollEvent is a step. The navigation buttons are TanreiButtons with an icon and no label. The product's words are read from the TanreiWords inherited widget, which the app fills from its own localizations.	Planned. Controlled: value (or start and end) and onChange({ value, start, end }); the caller moves them. Dates are ISO 8601 strings, never Date objects, so no time zone enters. isDateDisabled is a function prop. The grid has the grid role; days the button role with accessibilityState selected and disabled. The drag of CAL-30 through a PanResponder on the axis (the release's velocity gives the fling) and, on the web renderer, onWheel read as the web package reads it (CAL-33, CAL-34); on the vertical axis the weeks are one column moved by an Animated.Value that is the progress of CAL-29, with interpolate for the colors and the opacity. Locale data from Hermes's Intl.DateTimeFormat; the first day of the week from the embedded CLDR table. The navigation buttons are the package's Button with an icon and no label. The product's words are read from the TanreiWordsProvider context.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-calendar-adjacent-container-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-disabled-container-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-adjacent-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-adjacent-focused-container-color	—	#4b4b4b · 10%
--tanrei-comp-calendar-adjacent-focused-label-color	—	#4b4b4b
--tanrei-comp-calendar-adjacent-focused-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-focused-state-layer-color	—	#4b4b4b
--tanrei-comp-calendar-adjacent-hovered-container-color	—	#4b4b4b · 8%
--tanrei-comp-calendar-adjacent-hovered-label-color	—	#4b4b4b
--tanrei-comp-calendar-adjacent-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-hovered-state-layer-color	—	#4b4b4b
--tanrei-comp-calendar-adjacent-label-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-calendar-adjacent-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-pressed-container-color	—	#4b4b4b · 10%
--tanrei-comp-calendar-adjacent-pressed-label-color	—	#4b4b4b
--tanrei-comp-calendar-adjacent-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-adjacent-pressed-state-layer-color	—	#4b4b4b
--tanrei-comp-calendar-adjacent-state-layer-color	comp.calendar.adjacent.label.color	#4b4b4b
--tanrei-comp-calendar-cell-size	—	48px
--tanrei-comp-calendar-day-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-calendar-day-container-size	—	40px
--tanrei-comp-calendar-disabled-opacity	—	1
--tanrei-comp-calendar-focused-opacity	—	1
--tanrei-comp-calendar-hovered-opacity	—	1
--tanrei-comp-calendar-in-range-container-color	sys.color.surface-dim	#f1f1f1
--tanrei-comp-calendar-in-range-disabled-container-color	—	#f1f1f1
--tanrei-comp-calendar-in-range-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-in-range-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-in-range-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-in-range-focused-container-color	—	#dcdcdc
--tanrei-comp-calendar-in-range-focused-label-color	—	#1b1b1b
--tanrei-comp-calendar-in-range-focused-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-in-range-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-in-range-hovered-container-color	—	#e0e0e0
--tanrei-comp-calendar-in-range-hovered-label-color	—	#1b1b1b
--tanrei-comp-calendar-in-range-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-in-range-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-in-range-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-calendar-in-range-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-in-range-pressed-container-color	—	#dcdcdc
--tanrei-comp-calendar-in-range-pressed-label-color	—	#1b1b1b
--tanrei-comp-calendar-in-range-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-in-range-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-in-range-state-layer-color	comp.calendar.in-range.label.color	#1b1b1b
--tanrei-comp-calendar-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-calendar-motion-page-duration	sys.motion.duration.medium1	250ms
--tanrei-comp-calendar-motion-page-easing	sys.motion.easing.standard	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-calendar-motion-state-duration	sys.motion.role.state.compact	200ms
--tanrei-comp-calendar-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-calendar-navigation-axis	—	0
--tanrei-comp-calendar-navigation-gap	sys.space.space100	8px
--tanrei-comp-calendar-outline-width	sys.border.hairline	1px
--tanrei-comp-calendar-pressed-opacity	—	1
--tanrei-comp-calendar-selected-container-color	sys.color.primary	#1b1b1b
--tanrei-comp-calendar-selected-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-calendar-selected-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-selected-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-selected-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-selected-focused-container-color	—	#323232
--tanrei-comp-calendar-selected-focused-label-color	—	#ffffff
--tanrei-comp-calendar-selected-focused-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-selected-focused-state-layer-color	—	#ffffff
--tanrei-comp-calendar-selected-hovered-container-color	—	#2d2d2d
--tanrei-comp-calendar-selected-hovered-label-color	—	#ffffff
--tanrei-comp-calendar-selected-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-selected-hovered-state-layer-color	—	#ffffff
--tanrei-comp-calendar-selected-label-color	sys.color.on-primary	#ffffff
--tanrei-comp-calendar-selected-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-selected-pressed-container-color	—	#323232
--tanrei-comp-calendar-selected-pressed-label-color	—	#ffffff
--tanrei-comp-calendar-selected-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-selected-pressed-state-layer-color	—	#ffffff
--tanrei-comp-calendar-selected-state-layer-color	comp.calendar.selected.label.color	#ffffff
--tanrei-comp-calendar-today-container-color	—	#000000 · 0%
--tanrei-comp-calendar-today-disabled-container-color	—	#000000 · 0%
--tanrei-comp-calendar-today-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-today-disabled-outline-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-today-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-today-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-calendar-today-focused-label-color	—	#1b1b1b
--tanrei-comp-calendar-today-focused-outline-color	—	#1b1b1b
--tanrei-comp-calendar-today-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-today-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-calendar-today-hovered-label-color	—	#1b1b1b
--tanrei-comp-calendar-today-hovered-outline-color	—	#1b1b1b
--tanrei-comp-calendar-today-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-today-label-color	sys.color.primary	#1b1b1b
--tanrei-comp-calendar-today-outline-color	sys.color.primary	#1b1b1b
--tanrei-comp-calendar-today-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-calendar-today-pressed-label-color	—	#1b1b1b
--tanrei-comp-calendar-today-pressed-outline-color	—	#1b1b1b
--tanrei-comp-calendar-today-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-today-state-layer-color	comp.calendar.today.label.color	#1b1b1b
--tanrei-comp-calendar-unselected-container-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-disabled-container-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-unselected-disabled-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-calendar-unselected-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-calendar-unselected-focused-label-color	—	#1b1b1b
--tanrei-comp-calendar-unselected-focused-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-unselected-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-calendar-unselected-hovered-label-color	—	#1b1b1b
--tanrei-comp-calendar-unselected-hovered-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-unselected-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-calendar-unselected-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-calendar-unselected-pressed-label-color	—	#1b1b1b
--tanrei-comp-calendar-unselected-pressed-outline-color	—	#000000 · 0%
--tanrei-comp-calendar-unselected-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-calendar-unselected-state-layer-color	comp.calendar.unselected.label.color	#1b1b1b
--tanrei-comp-calendar-view-toggle-container-height	—	36px
--tanrei-comp-calendar-view-toggle-container-padding-inline	sys.space.space150	12px
--tanrei-comp-calendar-view-toggle-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-calendar-view-toggle-gap	sys.space.space50	4px
--tanrei-comp-calendar-view-toggle-icon-size	sys.icon.small	20px
--tanrei-comp-calendar-weekday-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-calendar-year-container-height	—	36px
--tanrei-comp-calendar-year-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-calendar-year-container-width	—	72px
--tanrei-comp-calendar-day-label-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-calendar-view-toggle-label-typescale	sys.typescale.label	500 14px/1.4286
--tanrei-comp-calendar-weekday-typescale	sys.typescale.label-small	500 12px/1.3333
--tanrei-comp-calendar-year-label-typescale	sys.typescale.body	400 14px/1.5714

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

single

value: 2026-09-17 today: 2026-09-24 locale: en-US previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

empty

today: 2026-09-24 locale: en-US previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

range

mode: range start: 2026-09-10 end: 2026-09-16 today: 2026-09-24 locale: en-US startLabel: Start date endLabel: End date previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

range-start

mode: range start: 2026-09-10 today: 2026-09-24 locale: en-US startLabel: Start date endLabel: End date previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

monday

value: 2026-09-17 today: 2026-09-24 firstDayOfWeek: monday locale: en-US previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

ja

value: 2026-09-17 today: 2026-09-24 locale: ja-JP previousMonthLabel: 前の月 nextMonthLabel: 次の月 yearViewLabel: 年を選択 todayLabel: 今日

unavailable

value: 2026-09-12 min: 2026-09-03 max: 2026-09-22 disabledDates: ["2026-09-12"] today: 2026-09-24 locale: en-US previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

range-unavailable

mode: range start: 2026-09-10 end: 2026-09-16 disabledDates: ["2026-09-13"] today: 2026-09-24 locale: en-US startLabel: Start date endLabel: End date previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

adjacent-days

value: 2026-09-17 today: 2026-09-24 locale: en-US showAdjacentDays: true previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

adjacent-days-range

mode: range start: 2026-09-28 end: 2026-10-02 today: 2026-09-24 locale: en-US showAdjacentDays: true startLabel: Start date endLabel: End date previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

year

value: 2026-09-17 today: 2027-01-15 locale: en-US startView: year previousMonthLabel: Previous month nextMonthLabel: Next month yearViewLabel: Choose a year todayLabel: Today

इससे जनरेट किया गया: specs/calendar.spec.json, tokens/comp/calendar.tokens.json, design/tokens/

दिशानिर्देश

link

कब इस्तेमाल करें

link

कैलेंडर तब इस्तेमाल करें जब चुनी जा रही तारीख़ के आसपास की तारीख़ें मायने रखती हों: ठहरने की अवधि, बुकिंग, किसी रिपोर्ट की रेंज, ऐसी तारीख़ जिसमें हफ़्ते का दिन मायने रखता है। जब चुनाव पेज के काम का हिस्सा हो, तो इसे पेज में रखें। जब तारीख़ कई फ़ील्ड में से एक हो, तो type date वाला टेक्स्ट फ़ील्ड इस्तेमाल करें, और उसके पिकर बटन से एक DateTimePicker खोलें। जिसे तारीख़ पता है, वह उसे ढूँढ़ने से जल्दी टाइप कर लेता है।

चुनना

link

• एक तारीख़। single मोड में किसी उपलब्ध दिन पर दबाना या Enter उसे value बनाता है और change एमिट करता है।
• एक रेंज। range मोड में पहला चुनाव शुरुआत है और दूसरा अंत। शुरुआत से पहले का दिन, या दोनों सिरे सेट हो जाने के बाद का चुनाव, रेंज को फिर से शुरू करता है। change हर चुनाव के बाद एमिट होता है, और अकेली शुरुआत के बाद end ख़ाली रहता है, ताकि प्रॉडक्ट आधी चुनी हुई रेंज दिखा सके। एक ही दिन की शुरुआत और अंत एक दिन की रेंज बनाते हैं।
• मान ISO 8601 की कैलेंडर तारीख़ें हैं (2026-09-17), बिना समय और बिना टाइम ज़ोन के। today डिवाइस की मौजूदा तारीख़ है, जब तक आप उसे सेट न करें, किसी जगह के टाइम ज़ोन के लिए या टेस्ट के लिए।

एक रेंज। पहले शुरुआत चुनें, फिर अंत; तीसरा चुनाव फिर से शुरू करता है

रेंज शुरुआत से अंत तक एक ही पट्टी है। वह हफ़्ते की पंक्ति के अंत पर टूटती है और अगली पंक्ति में जारी रहती है।

अनुपलब्ध दिन

link

अनुपलब्ध दिन min, max, disabledDates और प्लैटफ़ॉर्म के isDateDisabled प्रेडिकेट से आते हैं, जो ऐसे नियम के लिए है जो किसी सूची में नहीं समा सकता, जैसे हर वीकेंड। वे ज़्यादा हल्के बनाए जाते हैं, चुने नहीं जा सकते, और ऐरो कुंजियों से उन तक पहुँचा जा सकता है, ताकि व्यक्ति जान सके कि वह तारीख़ मौजूद है। पिछला और अगला बटन min और max के महीनों पर रुक जाते हैं, और स्क्रॉल और ड्रैग भी।

जो रेंज किसी अनुपलब्ध दिन के आर-पार जाती है, वह उसे अपने भीतर रखती है; अगर आपका प्रॉडक्ट इसे स्वीकार नहीं कर सकता, तो change के बाद यह बताएँ।

7 सितंबर से 20 अक्तूबर तक, जिसमें 21 और 22 सितंबर पहले से भरे हैं

महीनों के बीच जाना

link

नेविगेशन पंक्ति में शुरू की ओर व्यू टॉगल (“सितंबर 2026” और एक शेवरॉन) और अंत की ओर पिछला और अगला बटन होते हैं। चार चीज़ें महीना बदलती हैं, और वे सब एक ही चीज़ को चलाती हैं, इसलिए उनमें से कोई भी बिना झटके के दूसरी की जगह ले सकती है:

• बटन और कुंजियाँ (Page Up और Page Down, या वह ऐरो कुंजी जो महीने से बाहर निकलती है) बदलाव को एक छोटे मोशन के रूप में चलाते हैं।
• दिनों के ऊपर ट्रैकपैड या माउस व्हील का स्क्रॉल उन्हें उतना ही चलाता है जितना वह स्क्रॉल करता है, एक के बाद एक महीने से होते हुए, जब तक वह चलता रहे। रुकने पर कैलेंडर किसी एक महीने पर ठहरता है: पड़ोसी महीने पर, अगर दिन वहाँ तक का चौथाई रास्ता तय कर चुके हों, और वरना उसी महीने पर जिसे उसने छोड़ा था। जो व्हील पूरे स्टेप रिपोर्ट करता है, वह हर स्टेप पर एक महीना चलाता है।
• उँगली, पेन या माउस से दिनों का ड्रैग भी यही करता है। छोड़ने पर वह उसी चौथाई के हिसाब से ठहरता है, या उस ओर जिधर फ़्लिंग किया गया। जो दबाना हिलता नहीं, वह अब भी अपने नीचे का दिन चुनता है।

डिफ़ॉल्ट सिस्टम में महीने एक खड़े अक्ष पर रहते हैं और हफ़्तों का एक अटूट कॉलम हैं। महीना उस कॉलम पर छह पंक्तियों की एक खिड़की है। जो हफ़्ता दो महीनों में साझा है, वह एक ही पंक्ति है जो एक महीने में अपनी जगह से दूसरे में अपनी जगह तक जाती है, सामने आ रहे दिन फ़ेड होकर आते हैं, और हफ़्तों के चलने के साथ पड़ोसी महीने का दिन महीने के अपने दिनों में से एक बन जाता है। महीने के दो अलग ग्रिड कभी नहीं दिखाए जाते, और महीना कोई भी हो, कैलेंडर की ऊँचाई वही रहती है।

जहाँ मोशन कम किया गया है, वहाँ बटन या कुंजी महीने को तुरंत बदलती है। दिन अब भी स्क्रॉल और ड्रैग के साथ चलते हैं, जिन्हें व्यक्ति का अपना हाथ चलाता है, और उसके ख़त्म होते ही तुरंत अपनी जगह पहुँच जाते हैं।

अक्ष प्रॉडक्ट की सेटिंग है, comp.calendar.navigation.axis, कोई प्रॉपर्टी नहीं, इसलिए एक प्रॉडक्ट का हर कैलेंडर एक ही तरह चलता है:

अक्ष	बटन	महीने	स्क्रॉल और ड्रैग
vertical (डिफ़ॉल्ट)	ऊपर और नीचे के ऐरो	हफ़्तों का एक कॉलम	खड़े स्क्रॉल और ड्रैग दिनों को चलाते हैं; आड़े पेज को मिलते हैं
horizontal	पीछे और आगे के ऐरो	अगल-बग़ल दो पेज, बाद का महीना अंत की ओर	आड़े स्क्रॉल और ड्रैग दिनों को चलाते हैं; खड़े पेज को मिलते हैं

कुंजियाँ अक्ष के साथ कभी नहीं बदलतीं।

आड़ा अक्ष: महीने पेज हैं

m3-like के साथ

जब तक पॉइंटर दिनों के ऊपर है, अक्ष की दिशा का स्क्रॉल कैलेंडर का होता है, पहले और आख़िरी महीने पर भी, जहाँ दिन रुक जाते हैं। जो पेज उसी दिशा में स्क्रॉल होता है, वह वहाँ से स्क्रॉल नहीं होता: लंबे पेज पर कैलेंडर के बग़ल में या उसके आसपास ऐसी जगह छोड़ें जहाँ स्क्रॉल पेज तक पहुँचे। हफ़्ते के दिनों की पंक्ति, नेविगेशन पंक्ति और कैलेंडर के आसपास की हर चीज़ पेज को हमेशा की तरह स्क्रॉल करती है।

साल व्यू

link

व्यू टॉगल साल व्यू पर ले जाता है, जो min के साल से max के साल तक (उनके बिना 1900 से 2100 तक) की एक स्क्रॉल होने वाली सूची है। कोई साल चुनने पर उस साल का वही महीना दिखता है और कोई चुनाव नहीं बदलता। startView year पहले वहीं खुलता है, आज से बहुत दूर की तारीख़ के लिए, जैसे जन्मदिन।

जन्मदिन के लिए सालों पर खुलना

पड़ोसी महीनों के दिन

link

showAdjacentDays ग्रिड के ख़ाली सेल को पड़ोसी महीनों के दिनों से भरता है, जो ज़्यादा हल्के बनाए जाते हैं। उपलब्ध होने पर वे चुने जा सकते हैं, और रेंज उनमें से किसी पर शुरू या ख़त्म हो सकती है। पॉइंटर से ऐसा दिन चुनने पर वह चुना जाता है और फिर उसका महीना दिखता है, जहाँ वह महीने के अपने दिनों में से एक है। इसके बिना वे सेल ख़ाली रहते हैं और उन पर दबाने से कुछ नहीं होता।

पड़ोसी महीनों के दिनों के साथ: 1 अक्तूबर चुनने पर अक्तूबर दिखता है

लोकेल

link

हफ़्ते के दिनों के नाम, महीने का शीर्षक और अंक लोकेल के होते हैं (locale, या प्लैटफ़ॉर्म का)। firstDayOfWeek लोकेल का होता है, जब तक आप हफ़्ते का कोई दिन न बताएँ। कैलेंडर हर लोकेल में ग्रेगोरियन है। जो शब्द लोकेल का डेटा नहीं हैं, यानी नेविगेशन बटनों के नाम, व्यू टॉगल का विवरण, रेंज की शुरुआत और अंत, वे आपके हैं: Tanrei अपना कोई शब्द साथ नहीं देता। उन्हें कैलेंडर पर दें, या पूरे प्रॉडक्ट के लिए एक बार, हर भाषा के लिए अलग, जैसा यह पेज करता है:

import { setWords } from '@tanrei/web';

setWords(
  {
    previousMonthLabel: 'पिछला महीना',
    nextMonthLabel: 'अगला महीना',
    yearViewLabel: 'साल चुनें',
    todayLabel: 'आज',
    startLabel: 'शुरुआत की तारीख़',
    endLabel: 'अंत की तारीख़',
  },
  { lang: 'hi' },
);

यह वही कॉल है जो यह पेज चलाता है: इस पेज के हर कैलेंडर को उसके नाम इन्हीं शब्दों से मिलते हैं, और उदाहरणों में इनमें से कोई शब्द नहीं लिखा है। जिस कैलेंडर के शब्द अलग हैं, वह अपने शब्द ख़ुद देता है: नीचे वाला जापानी कैलेंडर अपने चार शब्द ऐट्रिब्यूट के रूप में देता है, और ऐट्रिब्यूट हमेशा जीतता है। इनमें से किसी के बिना भी नेविगेशन बटन काम करते हैं पर उनका कोई नाम नहीं होता, और डीबग बिल्ड हर छूटे हुए शब्द की रिपोर्ट करता है। जहाँ आप कोई शब्द नहीं देते, वहाँ सिर्फ़ आज के दिन का शब्द ब्राउज़र के लोकेल डेटा से आता है।

सोमवार से शुरू होने वाला हफ़्ता, और जापानी लोकेल

करें

link

• जब पेज पर एक से ज़्यादा कैलेंडर हों, या उसके पास कुछ भी यह न बताता हो कि तारीख़ किसलिए है, तो कैलेंडर को label दें (“चेक-इन की तारीख़”)।
• min और max को उन्हीं तारीख़ों तक रखें जो सचमुच चुनी जा सकती हैं, ताकि नेविगेशन वहीं रुके जहाँ चुनाव रुकता है।
• जो तारीख़ें व्यक्ति को पहले से पता हैं, उनके लिए कैलेंडर के बग़ल में या उसकी जगह एक टेक्स्ट फ़ील्ड दें।
• बटनों को पहुँच में रखें: स्क्रॉल और ड्रैग शॉर्टकट हैं, और हर कोई उन्हें इस्तेमाल नहीं कर सकता।

न करें

link

• अक्ष को हर स्क्रीन पर अलग से सेट न करें। यह पूरे प्रॉडक्ट का एक ही फ़ैसला है।
• अनुपलब्ध दिनों को न छिपाएँ। उन्हें अनुपलब्ध दिखाएँ, ताकि कैलेंडर का ग्रिड पूरा रहे।
• खड़े अक्ष वाले कैलेंडर को खड़े स्क्रॉल होने वाले पेज में किनारे से किनारे तक न रखें। उसके दिनों के ऊपर शुरू होने वाला स्क्रॉल कभी पेज तक नहीं पहुँचेगा।
• किसी महीने के सामने आने को चुनाव न मानें। स्क्रॉल और ड्रैग सिर्फ़ यह बदलते हैं कि क्या दिख रहा है, value को कभी नहीं, और कुछ एमिट नहीं करते।

सुलभता

link

रोल

group

लेबलिंग

The calendar is a group named by label when it has one. The grid is named by the month and year it shows and its column headers are the weekdays' full names. Each day is named by its full date in the locale, with todayLabel after today's where the platform has no current-date property, and exposes its selected and disabled states; a range's start and end are described by startLabel and endLabel. The view toggle is named by its visible month and year, described by yearViewLabel, and exposes whether the year view is expanded. The navigation buttons are named by previousMonthLabel and nextMonthLabel.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
Tab / Shift+Tab	Moves through the view toggle, the previous and next buttons and the active day (or the displayed year).
Arrow keys	Move the active day by one day (Left and Right, in the direction the arrow points) or one week (Up and Down), changing the month as needed, whatever axis the months move along; in the year view, by one year or one row.
Home / End	The first or last day of the week row; the first or last year.
Page Up / Page Down	The same day of the previous or next month.
Shift+Page Up / Shift+Page Down	The same day of the previous or next year.
Enter / Space	Choose the active day or the focused year; activate the focused button.

टिप्पणियाँ

• The cells are the days' hit areas and are never smaller than the minimum target (CAL-1); the view toggle extends its hit area (CAL-6). The navigation buttons are Tanrei Buttons, which meet the target themselves (BTN-5).
• Unavailable days stay reachable by the arrow keys, as the WAI-ARIA date picker dialog pattern recommends, so a screen-reader user learns that a date exists and cannot be chosen.
• Scrolling and dragging to move the month are pointer and touch shortcuts, with a finger, a pen, a mouse, a wheel or a trackpad. The buttons and Page Up / Page Down do the same, so nothing depends on a gesture, and a drag is never the only way (WCAG 2.5.7). While a drag lasts nothing the calendar exposes changes; while a scroll goes on through several months the title follows each month it reaches, but the month is announced once, when the scroll or the release has chosen it (CAL-31, CAL-32, CAL-34), so a screen reader is not read every month that passes.
• A scroll along the calendar's axis is the calendar's while the pointer is over the day grid (CAL-33): a page that scrolls the same way does not scroll from there. The weekday row, the navigation row and everything around the calendar scroll the page as usual, and a calendar with a horizontal axis leaves the page's vertical scroll alone.
• A day of a neighbouring month that is chosen by pointer brings its month into view (CAL-15), announced as any month change is. The keys never need it: the arrow keys show a day's month before Enter can choose it (CAL-11).
• Typing a date is the Text field's job, not the calendar's: a product that wants both puts a Text field beside it, or uses a DateTimePicker opened from the field's trailing button. Typing is the fastest route for many people and the most direct one for screen reader users.
• The calendar has no words of its own. Month and weekday names, digits and date forms are the platform's locale data, in the locale the calendar was given. Every other word it shows or announces is the product's: a prop of this instance, or the product's words set once.
• The web exposes the grid with role grid, rows, column headers and gridcells with aria-selected and aria-disabled, and today with aria-current="date" (so todayLabel is not added there). The platforms without a grid role expose the rows and columns through their collection semantics where they have them (Compose's collection info), and otherwise each day as a button in reading order.
• How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.

इससे जनरेट किया गया: specs/calendar.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• कैलेंडर एक ग्रुप है जिसका नाम label से आता है। ग्रिड का नाम वह महीना है जो वह दिखाता है, उसके कॉलम हेडर हफ़्ते के दिनों के पूरे नाम हैं, और हर दिन का नाम उसकी पूरी तारीख़ है, और वह यह भी बताता है कि वह चयनित, अनुपलब्ध या आज है या नहीं। रेंज के सिरों का विवरण startLabel और endLabel देते हैं।
• Tab क्रम में एक दिन सक्रिय दिन होता है। ऐरो कुंजियाँ उसे एक दिन या एक हफ़्ता चलाती हैं, Home और End हफ़्ते के सिरों तक, Page Up और Page Down एक महीना, और Shift के साथ एक साल, और ज़रूरत पड़ने पर महीना बदल देती हैं। Enter या Space उसे चुनती है।
• व्यू टॉगल एक बटन है जिसका नाम वह महीना और साल है जो वह दिखाता है, जिसका विवरण yearViewLabel देता है, और जो बताता है कि साल व्यू खुला है या नहीं। सालों की सूची भी एक ही Tab स्टॉप है: ऐरो कुंजियाँ एक साल या एक पंक्ति चलती हैं, और Home और End उसके सिरों पर जाती हैं।
• महीना बदलने पर एक बार, बिना टोके (polite), पढ़कर सुनाया जाता है। जब स्क्रॉल कई महीनों से होकर गुज़रता है, तो शीर्षक हर महीने के साथ बदलता है, पर सिर्फ़ वही महीना पढ़कर सुनाया जाता है जिस पर वह ख़त्म होता है, और जो स्क्रॉल या ड्रैग वापस लौट आता है वह कुछ नहीं सुनाता।
• जब तक ड्रैग दिनों को दो महीनों के बीच थामे रखता है, कैलेंडर जो कुछ सहायक तकनीक को देता है उसमें कुछ नहीं बदलता: शीर्षक, सक्रिय दिन और फ़ोकस वहीं रहते हैं, और सामने आ रहे दिन तब तक न फ़ोकस लेते हैं, न दबाना, जब तक उनका महीना दिखाया जा रहा महीना न बन जाए।
• स्क्रॉल करना और ड्रैग करना शॉर्टकट हैं: बटन और Page Up और Page Down वही काम करते हैं, इसलिए कुछ भी किसी जेस्चर पर निर्भर नहीं है।
• हर सेल कम से कम न्यूनतम टार्गेट जितना है, और बड़े किए गए टेक्स्ट के साथ भी ऐसा ही रहता है। सात टार्गेट से सँकरी जगह में सेल बराबर-बराबर सँकरे होते हैं और संख्याएँ अपना साइज़ रखती हैं, इसलिए कैलेंडर कभी उस जगह से चौड़ा नहीं होता जो उसे दी गई है। नेविगेशन बटन Tanrei के Button हैं।
• दाएँ से बाएँ वाले लेआउट में ग्रिड, नेविगेशन, आड़े ऐरो और वह ओर जहाँ अगला पेज रहता है, मिरर होते हैं। हफ़्तों का खड़ा स्क्रॉल मिरर नहीं होता, और ड्रैग हमेशा दिनों को उधर ही चलाता है जिधर पॉइंटर जाता है।

प्लैटफ़ॉर्म की ज्ञात कमियाँ:

• SwiftUI, Compose, Flutter और React Native ने कैलेंडर नहीं बनाया है: हर एक, जब बराबरी पर आएगा, इसे इसी स्पेक से बनाएगा।
• Web: किसी साल का चयनित स्टेट उसके बटन पर aria-current है, क्योंकि बटन का अपना कोई चयनित स्टेट नहीं होता।
• Web: ब्राउज़र न स्क्रॉल का अंत बताता है, न उसका मोमेंटम, इसलिए कैलेंडर अंत का पता थोड़ी देर की चुप्पी या धीमे पड़ने से लगाता है। जिस व्हील माउस को ब्राउज़र एक बार में कुछ ही पिक्सल के रूप में रिपोर्ट करता है, उसे धीरे घुमाने पर वह हर खाँचे के बाद उसी महीने पर लौट आता है जिसे उसने छोड़ा था।
• Web: ड्रैग अभी किसी डिवाइस पर उँगली से जाँचा नहीं गया है, और कुछ टेस्ट Firefox और WebKit में फ़ेल होते हैं।

आपको क्या करना है

link

• label सेट करें, और वे शब्द दें जो कैलेंडर इस्तेमाल करता है (previousMonthLabel, nextMonthLabel, yearViewLabel, todayLabel, startLabel, endLabel): कैलेंडर पर, या setWords() से पूरे प्रॉडक्ट के लिए एक बार। Tanrei अपना कोई शब्द साथ नहीं देता। इनके बिना नेविगेशन बटन काम करते हैं पर उनका कोई नाम नहीं होता, रेंज के सिरों का कोई विवरण नहीं होता, और डेवलपमेंट में हर छूटे शब्द की रिपोर्ट होती है; सिर्फ़ आज के दिन का शब्द ब्राउज़र के लोकेल डेटा से आता है। देखें प्रॉडक्ट के शब्द।
• तारीख़ टाइप करने का कोई तरीक़ा दें, जैसे type date वाला टेक्स्ट फ़ील्ड। बहुत से लोगों के लिए यही सबसे सीधा रास्ता है।
• अगर आपका प्रॉडक्ट ऐसी रेंज स्वीकार नहीं कर सकता जो किसी अनुपलब्ध दिन के आर-पार जाती है, तो change के बाद यह बताएँ।