{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/calendar","result":{"data":{"current":{"frontmatter":{"title":"Calendar 日历","order":64,"brief":"日历组件，允许以日/周/月视图展示对应事件","icon":"doc-calendar"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#日视图","title":"日视图"},{"url":"#周视图","title":"周视图"},{"url":"#月视图","title":"月视图"},{"url":"#设置周起始日","title":"设置周起始日"},{"url":"#多日视图","title":"多日视图"},{"url":"#事件渲染用法","title":"事件渲染用法"},{"url":"#自定义渲染","title":"自定义渲染","items":[{"url":"#自定义渲染事件","title":"自定义渲染事件"},{"url":"#自定义渲染单元格样式","title":"自定义渲染单元格样式"},{"url":"#自定义日期文案","title":"自定义日期文案"}]}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#calendar","title":"Calendar"},{"url":"#event-object","title":"Event Object"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 64,\n \"category\": \"展示类\",\n \"title\": \"Calendar 日历\",\n \"icon\": \"doc-calendar\",\n \"dir\": \"column\",\n \"brief\": \"日历组件，允许以日/周/月视图展示对应事件\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Calendar } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u65E5\\u89C6\\u56FE\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u65E5\\u89C6\\u56FE\\u7684\\u65E5\\u5386\\u6A21\\u677F\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showCurrTime\"), \" \\u63A7\\u5236\\u662F\\u5426\\u663E\\u793A\\u5F53\\u524D\\u65F6\\u95F4\\u7684\\u4F4D\\u7F6E\\u7EA2\\u7EBF\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Calendar } from '@douyinfe/semi-ui';\\n\\n() => ;\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5468\\u89C6\\u56FE\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5468\\u89C6\\u56FE\\u7684\\u65E5\\u5386\\u6A21\\u677F\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showCurrTime\"), \" \\u63A7\\u5236\\u662F\\u5426\\u663E\\u793A\\u5F53\\u524D\\u65F6\\u95F4\\u7684\\u4F4D\\u7F6E\\u7EA2\\u7EBF\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Calendar } from '@douyinfe/semi-ui';\\n\\n() => ;\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6708\\u89C6\\u56FE\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u6708\\u89C6\\u56FE\\u7684\\u65E5\\u5386\\u6A21\\u677F\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Calendar } from '@douyinfe/semi-ui';\\n\\n() => ;\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E\\u5468\\u8D77\\u59CB\\u65E5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 weekStartsOn \\u8BBE\\u7F6E\\u5468\\u51E0\\u4F5C\\u4E3A\\u6BCF\\u5468\\u7B2C\\u4E00\\u5929\\uFF0C0 \\u4EE3\\u8868\\u5468\\u65E5\\uFF0C1 \\u4EE3\\u8868\\u5468\\u4E00\\uFF0C\\u4EE5\\u6B64\\u7C7B\\u63A8\\u3002\\u9ED8\\u8BA4\\u4E3A\\u5468\\u65E5\\u3002weekStartsOn \\u81EA v2.18 \\u8D77\\u63D0\\u4F9B\\uFF0C\\u5BF9\\u6708\\u89C6\\u56FE\\u3001\\u5468\\u89C6\\u56FE\\u751F\\u6548\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState } from 'react';\\nimport { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [v, setV] = useState(0);\\n return (\\n
\\n setV(e.target.value)}>\\n \\u5468\\u65E5\\n \\u5468\\u4E00\\n \\u5468\\u4E8C\\n \\u5468\\u4E09\\n \\u5468\\u56DB\\n \\u5468\\u4E94\\n \\u5468\\u516D\\n \\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u591A\\u65E5\\u89C6\\u56FE\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u591A\\u65E5\\u89C6\\u56FE\\u6A21\\u5F0F\\u3002 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"range\"), \" \\u5FC5\\u4F20\\uFF0C\\u5DE6\\u95ED\\u53F3\\u5F00\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Calendar } from '@douyinfe/semi-ui';\\n\\n() => ;\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4E8B\\u4EF6\\u6E32\\u67D3\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"events\"), \" \\u4F20\\u5165\\u9700\\u8981\\u6E32\\u67D3\\u7684\\u4E8B\\u4EF6\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"events\"), \" \\u662F\\u4E00\\u4E2A\\u7531 event objects \\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\uFF0C\\u5177\\u4F53\\u5F62\\u5F0F\\u8BF7\\u53C2\\u8003 events API\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState } from 'react';\\nimport { Calendar, DatePicker, RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [mode, setMode] = useState('week');\\n const [displayValue, setDisplayValue] = useState(new Date(2019, 6, 23, 8, 32, 0));\\n \\n const onSelect = (e) => {\\n setMode(e.target.value);\\n };\\n\\n const onChangeDate = (e) => {\\n setDisplayValue(e);\\n };\\n\\n const isMonthView = mode === 'month';\\n const dailyEventStyle = {\\n borderRadius: '3px',\\n boxSizing: 'border-box',\\n border: 'var(--semi-color-primary) 1px solid',\\n padding: '10px',\\n backgroundColor: 'var(--semi-color-primary-light-default)',\\n height: '100%',\\n overflow: 'hidden',\\n };\\n const allDayStyle = {\\n borderRadius: '3px',\\n boxSizing: 'border-box',\\n border: 'var(--semi-color-bg-1) 1px solid',\\n padding: '2px 4px',\\n backgroundColor: 'var(--semi-color-primary-light-active)',\\n height: '100%',\\n overflow: 'hidden',\\n };\\n const dailyStyle = isMonthView ? allDayStyle : dailyEventStyle;\\n const events = [\\n {\\n key: '0',\\n start: new Date(2019, 5, 25, 14, 45, 0),\\n end: new Date(2019, 6, 26, 6, 18, 0),\\n children:
6\\u670825\\u65E5 14:45 ~ 7\\u670826\\u65E5 6:18
,\\n },\\n {\\n key: '1',\\n start: new Date(2019, 6, 18, 10, 0, 0),\\n end: new Date(2019, 6, 30, 8, 0, 0),\\n children:
7\\u670818\\u65E5 10:00 ~ 7\\u670830\\u65E5 8:00
,\\n },\\n {\\n key: '2',\\n start: new Date(2019, 6, 19, 20, 0, 0),\\n end: new Date(2019, 6, 23, 14, 0, 0),\\n children:
7\\u670819\\u65E5 20:00 ~ 7\\u670823\\u65E5 14:00
,\\n },\\n {\\n key: '3',\\n start: new Date(2019, 6, 21, 6, 0, 0),\\n end: new Date(2019, 6, 25, 6, 0, 0),\\n children:
7\\u670821\\u65E5 6:00 ~ 7\\u670825\\u65E5 6:00
,\\n },\\n {\\n key: '4',\\n allDay: true,\\n start: new Date(2019, 6, 22, 8, 0, 0),\\n children:
7\\u670822\\u65E5 \\u5168\\u5929
,\\n },\\n {\\n key: '5',\\n start: new Date(2019, 6, 22, 9, 0, 0),\\n end: new Date(2019, 6, 23, 23, 0, 0),\\n children:
7\\u670822\\u65E5 9:00 ~ 7\\u670823\\u65E5 23:00
,\\n },\\n {\\n key: '6',\\n start: new Date(2019, 6, 23, 8, 32, 0),\\n end: new Date(2019, 6, 23, 8, 42, 0),\\n children:
7\\u670823\\u65E5 8:32
,\\n },\\n {\\n key: '7',\\n start: new Date(2019, 6, 23, 14, 30, 0),\\n end: new Date(2019, 6, 23, 20, 0, 0),\\n children:
7\\u670823\\u65E5 14:30-20:00
,\\n },\\n {\\n key: '8',\\n start: new Date(2019, 6, 25, 8, 0, 0),\\n end: new Date(2019, 6, 27, 6, 0, 0),\\n children:
7\\u670825\\u65E5 8:00 ~ 7\\u670827\\u65E5 6:00
,\\n },\\n {\\n key: '9',\\n start: new Date(2019, 6, 26, 10, 0, 0),\\n end: new Date(2019, 6, 27, 16, 0, 0),\\n children:
7\\u670826\\u65E5 10:00 ~ 7\\u670827\\u65E5 16:00
,\\n },\\n ];\\n \\n return (\\n <>\\n \\n \\u65E5\\u89C6\\u56FE\\n \\u5468\\u89C6\\u56FE\\n \\u6708\\u89C6\\u56FE\\n \\u591A\\u65E5\\u89C6\\u56FE\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 dateGridRender \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u65E5\\u671F\\u5355\\u5143\\u683C/\\u5217\\u3002\\u9700\\u8981\\u4F7F\\u7528\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\u3002\"), mdx(\"h4\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u4E8B\\u4EF6\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Calendar } from '@douyinfe/semi-ui';\\n\\n() => {\\n const dailyEventStyle = {\\n position: 'absolute',\\n left: '0',\\n right: '0',\\n borderRadius: '3px',\\n boxSizing: 'border-box',\\n border: 'var(--semi-color-primary) 1px solid',\\n padding: '10px',\\n backgroundColor: 'var(--semi-color-primary-light-default)',\\n overflow: 'hidden',\\n };\\n const displayValue = new Date(2019, 6, 23, 8, 32, 0);\\n const dateRender = dateString => {\\n if (dateString === new Date(2019, 6, 23).toString()) {\\n return (\\n <>\\n
\\u5403\\u996D \\uD83C\\uDF70
\\n
\\u7761\\u89C9 \\uD83D\\uDE2A
\\n
\\u6253\\u8C46\\u8C46 \\uD83C\\uDFAE
\\n \\n );\\n } else {\\n return null;\\n }\\n };\\n return ;\\n};\\n\")), mdx(\"h4\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5355\\u5143\\u683C\\u6837\\u5F0F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 dateGridRender \\u81EA\\u5B9A\\u4E49\\u5355\\u5143\\u683C\\u7684\\u80CC\\u666F\\uFF0C\\u6708\\u89C6\\u56FE\\u7684\\u6587\\u5B57 zIndex \\u9ED8\\u8BA4\\u4E3A 3\\uFF0C\\u5982\\u9700\\u5B8C\\u5168\\u8986\\u76D6\\u5355\\u5143\\u683C\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u66F4\\u5927\\u7684 zIndex \\u6765\\u5B9E\\u73B0\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Calendar } from '@douyinfe/semi-ui';\\n\\n() => {\\n const importantDate = {\\n position: 'absolute',\\n left: '0',\\n right: '0',\\n top: '0',\\n bottom: '0',\\n backgroundColor: 'var(--semi-color-danger-light-default)',\\n };\\n const displayValue = new Date(2019, 6, 23, 8, 32, 0);\\n const importDates = [new Date(2019, 6, 2), new Date(2019, 6, 8), new Date(2019, 6, 19), new Date(2019, 6, 23)];\\n const dateRender = dateString => {\\n if (importDates.filter(date => date.toString() === dateString).length) {\\n return
;\\n }\\n return null;\\n };\\n return ;\\n};\\n\")), mdx(\"h4\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u6587\\u6848\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 renderDateDisplay \\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u6587\\u6848\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { Avatar, Calendar } from '@douyinfe/semi-ui';\\n\\n() => {\\n const displayValue = new Date(2023, 4, 14);\\n\\n const renderDateDisplay = date => {\\n const colors = [\\\"amber\\\", \\\"blue\\\", \\\"cyan\\\", \\\"green\\\", \\\"grey\\\", \\\"indigo\\\", \\\"lime\\\"];\\n return
{date.getDate()}
;\\n };\\n\\n return ;\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Calendar\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"dateGridRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u5355\\u5143\\u683C/\\u5217\\u6E32\\u67D3\\uFF0C\\u9700\\u8981\\u7EDD\\u5BF9\\u5B9A\\u4F4D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(dateString: string, date: Date)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"allDayEventsRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u65E5/\\u591A\\u65E5/\\u5468\\u89C6\\u56FE\\u4E0B\\u7684\\u9876\\u90E8\\u4E8B\\u4EF6\\u6E32\\u67D3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(events: EventObject[]): ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"displayValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C55\\u793A\\u65E5\\u671F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5F53\\u524D\\u65E5\\u671F\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"events\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6E32\\u67D3\\u4E8B\\u4EF6\\uFF0C\\u5177\\u4F53\\u683C\\u5F0F\\u8BF7\\u53C2\\u8003 event object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"EventObject[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"header\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u5934\\u90E8\\u5185\\u5BB9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"height\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E5\\u5386\\u9AD8\\u5EA6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"600\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"markWeekend\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u533A\\u5206\\u5468\\u672B\\u5217\\u548C\\u5DE5\\u4F5C\\u65E5\\uFF0C\\u4EE5\\u7070\\u8272\\u663E\\u793A\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"minEventHeight\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E5\\u89C6\\u56FE\\u3001\\u591A\\u65E5\\u89C6\\u56FE\\u4EE5\\u53CA\\u5468\\u89C6\\u56FE\\u4E0B\\u4E8B\\u4EF6\\u7684\\u6700\\u5C0F\\u9AD8\\u5EA6(\", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.49.0\"), \")\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Number.MIN_SAFE_INTEGER\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"mode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u521D\\u59CB\\u6A21\\u5F0F\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"day\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"week\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"month\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"range\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\\"day\\\" \", \"|\", \" \\\"week\\\" \", \"|\", \" \\\"month\\\" \", \"|\", \" \\\"range\\\"\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"week\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5355\\u51FB\\u65E5\\u671F\\u683C\\u7684\\u56DE\\u8C03\\uFF0C\\u65E5\\u89C6\\u56FE\\u548C\\u5468\\u89C6\\u56FE\\u4EE5\\u534A\\u5C0F\\u65F6\\u4E3A\\u5355\\u4F4D\\uFF0C\\u6708\\u89C6\\u56FE\\u4EE5\\u65E5\\u4E3A\\u5355\\u4F4D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(e: Event, date: Date\\uFF09\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClose\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6708\\u89C6\\u56FE\\u4E0B\\uFF0C\\u5C55\\u793A\\u6240\\u6709 event \\u7684\\u5361\\u7247\\u5173\\u95ED\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(e: Event\\uFF09\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"range\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u591A\\u65E5\\u89C6\\u56FE\\u6A21\\u5F0F\\u4E0B\\u5C55\\u793A\\u7684\\u65E5\\u671F\\u8303\\u56F4\\uFF0C\\u5DE6\\u95ED\\u53F3\\u5F00\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderTimeDisplay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u65E5/\\u5468\\u89C6\\u56FE\\u4E0B\\u7684\\u65F6\\u95F4\\u6587\\u6848\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(time: number): ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderDateDisplay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u65E5\\u671F\\u6587\\u6848\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(date: Date): ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"scrollTop\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E5\\u89C6\\u56FE\\u548C\\u5468\\u89C6\\u56FE\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u8BBE\\u7F6E\\u5C55\\u793A\\u5185\\u5BB9\\u9ED8\\u8BA4\\u7684\\u6EDA\\u52A8\\u9AD8\\u5EA6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"400\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showCurrTime\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u663E\\u793A\\u5F53\\u524D\\u65F6\\u95F4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u65E5\\u5386\\u5BBD\\u5EA6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"weekStartsOn\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4EE5\\u5468\\u51E0\\u4F5C\\u4E3A\\u6BCF\\u5468\\u7B2C\\u4E00\\u5929\\uFF0C0 \\u4EE3\\u8868\\u5468\\u65E5\\uFF0C1 \\u4EE3\\u8868\\u5468\\u4E00\\uFF0C\\u4EE5\\u6B64\\u7C7B\\u63A8\\u3002v2.18\\u540E\\u652F\\u6301\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"0\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Event Object\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"events\"), \" \\u662F\\u4E00\\u4E2A event object \\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\uFF0Cevent object \\u7EA6\\u5B9A\\u683C\\u5F0F\\u5982\\u4E0B\\uFF1A\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u5F53\\u4E8B\\u4EF6\\u4E3A\\u5168\\u5929\\u4E8B\\u4EF6\\u65F6\\uFF0C\\u82E5\\u6CA1\\u6709\\u4F20\\u5165\\u8D77\\u59CB\\u7ED3\\u675F\\u65F6\\u95F4\\uFF0C\\u5219\\u81EA\\u52A8\\u8FFD\\u52A0\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"displayValue\"), \" \\u7684\\u65E5\\u671F\\u4E2D\\uFF1B\\u5F53\\u4E8B\\u4EF6\\u4E0D\\u662F\\u5168\\u5929\\u4E8B\\u4EF6\\u65F6\\uFF0C\\u8D77\\u59CB\\u7ED3\\u675F\\u65F6\\u95F4\\u81F3\\u5C11\\u4F20\\u5165\\u4E00\\u4E2A\\u624D\\u4F1A\\u88AB\\u89C6\\u4E3A\\u6709\\u6548\\u4E8B\\u4EF6\"), mdx(Notice, {\n type: \"primary\",\n title: \"\\u6CE8\\u610F\",\n mdxType: \"Notice\"\n }, \"\\u4E0D\\u540C event \\u7684 key \\u503C\\u8981\\u6C42\\u5FC5\\u586B\\u4E14\\u552F\\u4E00\\uFF0C\\u4EE5\\u6B64\\u63A7\\u5236\\u4E8B\\u4EF6\\u7684\\u66F4\\u65B0\\u4E0E\\u91CD\\u7ED8\\u3002\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"allDay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5168\\u5929\\u4E8B\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"children\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C55\\u793A\\u65E5\\u671F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"React.node\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"end\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4E8B\\u60C5\\u7ED3\\u675F\\u7684\\u65F6\\u95F4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"key\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"required \\u4E14\\u8981\\u6C42\\u552F\\u4E00\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"start\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4E8B\\u60C5\\u8D77\\u59CB\\u7684\\u65F6\\u95F4\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u9700\\u8981\\u663E\\u793A\\u65F6\\u95F4\\u65F6\\uFF0C12 \\u5C0F\\u65F6\\u5236\\u548C 24 \\u5C0F\\u65F6\\u5236\\u90FD\\u662F\\u53EF\\u4EE5\\u4F7F\\u7528\\u7684\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5982\\u679C\\u91C7\\u752812\\u5C0F\\u65F6\\u5236\\uFF0C\\u9700\\u8981\\u642D\\u914D AM/PM \\u4E00\\u8D77\\u4F7F\\u7528\\uFF0C\\u5177\\u4F53\\u5185\\u5BB9\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4\"\n }, \"\\u65F6\\u95F4\\u89C4\\u8303\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5173\\u4E8E\\u6708\\u4EFD\\u3001\\u661F\\u671F\\u3001\\u65F6\\u95F4\\u7684\\u7F29\\u5199\\u4F7F\\u7528\\u89C4\\u5219\\uFF0C\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/content-guidelines#1.%20%E7%BC%A9%E5%86%99\"\n }, \"\\u7F29\\u5199\\u89C4\\u8303\")))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/calendar","next":{"fields":{"slug":"en-US/show/card"},"id":"0b4f1b96-1aa5-5632-ac07-5bb1fcaf2012","frontmatter":{"title":"Card","localeCode":"en-US","icon":"doc-card","showNew":null}},"previous":{"fields":{"slug":"en-US/show/calendar"},"id":"86a47fc7-821b-595a-9b61-54e253d5253e","frontmatter":{"title":"Calendar","localeCode":"en-US","icon":"doc-calendar","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}