{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>A container for displaying calendar data.</p>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Calendar could be used to display dates, such as schedules, timetables, price calendar, lunar calendar, and so on.</p>\n<h3 id=\"Values With Locale\">Values with locale <a class=\"header-anchor scroll-count-item\" href=\"#Values With Locale\" data-scroll-id=\"Values With Locale\">#</a></h3>\n<p>Calendar use moment as a core part to manipulate and display time values. For real usage, it could be used with the latest <code>moment</code> package. Setting moment&apos;s locale by:</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import</span> moment <span class=\"token keyword\">from</span> <span class=\"token string\">&apos;moment&apos;</span><span class=\"token punctuation\">;</span>\n\nmoment<span class=\"token punctuation\">.</span><span class=\"token function\">locale</span><span class=\"token punctuation\">(</span><span class=\"token string\">&apos;zh-cn&apos;</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Calendar\">Calendar <a class=\"header-anchor scroll-count-item\" href=\"#Calendar\" data-scroll-id=\"Calendar\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>defaultValue</td>\n<td>Default selected date (moment object)</td>\n<td>Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>Display shape</td>\n<td>&apos;card&apos; | &apos;fullscreen&apos; | &apos;panel&apos;</td>\n<td>&apos;fullscreen&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Selected date value (moment object)</td>\n<td>Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>Panel mode</td>\n<td>CalendarMode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>showOtherMonth</td>\n<td>Whether to show dates outside the current month</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleMonth</td>\n<td>Default displayed month</td>\n<td>() =&gt; Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onModeChange</td>\n<td>Callback when the panel mode changes<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>mode</em>: mode</td>\n<td>(mode: CalendarMode) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onSelect</td>\n<td>Callback when selecting a date cell</td>\n<td>(value: Moment) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleMonthChange</td>\n<td>Callback when the displayed month changes</td>\n<td>(value: Moment, reason: VisibleMonthChangeType) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateCellRender</td>\n<td>Customize date rendering function</td>\n<td>(value: Moment) =&gt; React.ReactNode</td>\n<td>value =&gt; value.date()</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Customize month rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disabled date</td>\n<td>(calendarDate: Moment, view: CalendarMode) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>modes</td>\n<td>Panel mode list that can be changed, only received once at initialization</td>\n<td>CalendarMode[]</td>\n<td>[&apos;date&apos;, &apos;month&apos;, &apos;year&apos;]</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format(for date title display format)</td>\n<td>string</td>\n<td>&apos;YYYY-MM</td>\n<td></td>\n</tr>\n<tr>\n<td>yearRange</td>\n<td>Year range, [START_YEAR, END_YEAR] (only effective when shape is &apos;card&apos;, &apos;fullscreen&apos;)</td>\n<td>[start: number, end: number]</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Calendar Range Calendar\">Calendar.RangeCalendar <a class=\"header-anchor scroll-count-item\" href=\"#Calendar Range Calendar\" data-scroll-id=\"Calendar Range Calendar\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>mode</td>\n<td>Panel mode</td>\n<td>CalendarMode</td>\n<td>&apos;date&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format(for date title display format)</td>\n<td>string</td>\n<td>&apos;YYYY-MM</td>\n<td></td>\n</tr>\n<tr>\n<td>dateCellRender</td>\n<td>Customize date rendering function</td>\n<td>(value: Moment) =&gt; React.ReactNode</td>\n<td>value =&gt; value.date()</td>\n<td></td>\n</tr>\n<tr>\n<td>onSelect</td>\n<td>Callback when selecting a date cell</td>\n<td>(value: Moment) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleMonthChange</td>\n<td>Callback when the displayed month changes</td>\n<td>(value: Moment, reason: VisibleMonthChangeType) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>showOtherMonth</td>\n<td>Whether to show dates outside the current month</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>startValue</td>\n<td>Start date (moment object)</td>\n<td>Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>endValue</td>\n<td>End date (moment object)</td>\n<td>Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultStartValue</td>\n<td>Default start date (moment object)</td>\n<td>Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultEndValue</td>\n<td>Default end date (moment object)</td>\n<td>Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Customize month rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleMonth</td>\n<td>Default displayed month</td>\n<td>() =&gt; Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disabled date</td>\n<td>(calendarDate: Moment, view: CalendarMode) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>Display shape</td>\n<td>&apos;card&apos; | &apos;fullscreen&apos; | &apos;panel&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearRange</td>\n<td>Year range, [START_YEAR, END_YEAR] (only effective when shape is &apos;card&apos;, &apos;fullscreen&apos;)</td>\n<td>[number, number]</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Calendar Mode\">CalendarMode <a class=\"header-anchor scroll-count-item\" href=\"#Calendar Mode\" data-scroll-id=\"Calendar Mode\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">CalendarMode</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;date&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;month&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;year&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Visible Month Change Type\">VisibleMonthChangeType <a class=\"header-anchor scroll-count-item\" href=\"#Visible Month Change Type\" data-scroll-id=\"Visible Month Change Type\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">VisibleMonthChangeType</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;cellClick&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;buttonClick&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;yearSelect&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;monthSelect&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"}