{"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 dayjs as a core part to manipulate and display time values. For real usage, it could be used with the latest <code>dayjs</code> package. Setting dayjs&apos;s locale by:</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> DatePicker2<span class=\"token punctuation\">,</span> ConfigProvider <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">&apos;@alifd/next&apos;</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token string\">&apos;dayjs/locale/en&apos;</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> en <span class=\"token keyword\">from</span> <span class=\"token string\">&apos;@alifd/next/lib/locale/en-us&apos;</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">App</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n        <span class=\"token operator\">&lt;</span>ConfigProvider locale<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>en<span class=\"token punctuation\">}</span><span class=\"token operator\">&gt;</span>\n            <span class=\"token operator\">&lt;</span>DatePicker2 <span class=\"token operator\">/</span><span class=\"token operator\">&gt;</span>\n        <span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>ConfigProvider<span class=\"token operator\">&gt;</span>\n    <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\nReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token operator\">&lt;</span>App <span class=\"token operator\">/</span><span class=\"token operator\">&gt;</span><span class=\"token punctuation\">,</span> mountNode<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 (dayjs object)</td>\n<td>ConfigType</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Selected date value (dayjs object)</td>\n<td>ConfigType</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultPanelValue</td>\n<td>Default displayed date</td>\n<td>ConfigType</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>panelValue</td>\n<td>Displayed date</td>\n<td>ConfigType</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>mode</td>\n<td>Date mode</td>\n<td>CalendarMode</td>\n<td>&apos;month&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>panelMode</td>\n<td>Panel mode, will be inferred automatically if not specified</td>\n<td>CalendarPanelMode</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: Dayjs, strVal: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when value changes</td>\n<td>(value: Dayjs, strVal: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onPanelChange</td>\n<td>Callback when date panel changes</td>\n<td>(value: Dayjs, mode: string, reason?: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom style class</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateCellRender</td>\n<td>Custom date rendering</td>\n<td>CustomCellRender</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Custom month rendering function</td>\n<td>CustomCellRender</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearCellRender</td>\n<td>Custom year rendering function</td>\n<td>CustomCellRender</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>quarterCellRender</td>\n<td>Custom quarter rendering function</td>\n<td>CustomCellRender</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disabled date</td>\n<td>(value: Dayjs, mode: CalendarPanelMode) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onPrev</td>\n<td>Callback when clicking the left single arrow</td>\n<td>OnPrevOrNext</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onNext</td>\n<td>Callback when clicking the right single arrow</td>\n<td>OnPrevOrNext</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onSuperPrev</td>\n<td>Callback when clicking the left double arrow</td>\n<td>OnPrevOrNext</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onSuperNext</td>\n<td>Callback when clicking the right double arrow</td>\n<td>OnPrevOrNext</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>headerRender</td>\n<td>Header custom rendering</td>\n<td>(props: HeaderPanelProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>validValue</td>\n<td>Valid year range</td>\n<td>[Dayjs, Dayjs]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderHeaderExtra</td>\n<td>Render header extra content</td>\n<td>(props: HeaderPanelProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>cellClassName</td>\n<td>Cell custom style</td>\n<td>(value: Dayjs) =&gt; Record&lt;string, boolean&gt; | undefined | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>cellProps</td>\n<td>Cell custom property</td>\n<td>{<br> onMouseEnter?: (<br> v: Dayjs,<br> e: React.MouseEvent&lt;HTMLElement&gt;,<br> args: Pick&lt;CellData, &apos;isCurrent&apos; | &apos;label&apos;&gt;<br> ) =&gt; void;<br> onMouseLeave?: (<br> v: Dayjs,<br> e: React.MouseEvent&lt;HTMLElement&gt;,<br> args: Pick&lt;CellData, &apos;isCurrent&apos; | &apos;label&apos;&gt;<br> ) =&gt; void;<br> }</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Cell Data\">CellData <a class=\"header-anchor scroll-count-item\" href=\"#Cell Data\" data-scroll-id=\"Cell Data\">#</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>value</td>\n<td>-</td>\n<td>Dayjs</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>label</td>\n<td>-</td>\n<td>number | string</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>isCurrent</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>key</td>\n<td>-</td>\n<td>string | number</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"On Prev Or Next\">OnPrevOrNext <a class=\"header-anchor scroll-count-item\" href=\"#On Prev Or Next\" data-scroll-id=\"On Prev Or Next\">#</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\">OnPrevOrNext</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span>value<span class=\"token operator\">:</span> Dayjs<span class=\"token punctuation\">,</span> options<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span> unit<span class=\"token operator\">:</span> ManipulateType<span class=\"token punctuation\">;</span> num<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token keyword\">void</span><span class=\"token punctuation\">;</span>\n</code></pre>\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;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=\"Calendar Panel Mode\">CalendarPanelMode <a class=\"header-anchor scroll-count-item\" href=\"#Calendar Panel Mode\" data-scroll-id=\"Calendar Panel 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\">CalendarPanelMode</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;date&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;week&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;quarter&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;year&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;decade&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Custom Cell Render\">CustomCellRender <a class=\"header-anchor scroll-count-item\" href=\"#Custom Cell Render\" data-scroll-id=\"Custom Cell Render\">#</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\">CustomCellRender</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span>value<span class=\"token operator\">:</span> Dayjs<span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span>\n</code></pre>\n"}