{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/calendar","result":{"data":{"current":{"frontmatter":{"title":"Calendar","order":64,"brief":"Calendar component that allows to display corresponding events in day/week/month view","icon":"doc-calendar"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#day-mode","title":"Day Mode"},{"url":"#week-mode","title":"Week Mode"},{"url":"#month-mode","title":"Month Mode"},{"url":"#set-week-start-day","title":"Set week start day"},{"url":"#range-mode","title":"Range Mode"},{"url":"#render-events","title":"Render Events"},{"url":"#custom-render","title":"Custom Render","items":[{"url":"#custom-render-events","title":"Custom Render Events"},{"url":"#customized-date-cell-style","title":"Customized Date Cell Style"},{"url":"#customized-date-render","title":"Customized Date Render"}]}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#calendar","title":"Calendar"},{"url":"#event-object","title":"Event Object"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n \"order\": 64,\n \"category\": \"Show\",\n \"title\": \"Calendar\",\n \"subTitle\": \"Calendar\",\n \"icon\": \"doc-calendar\",\n \"dir\": \"column\",\n \"brief\": \"Calendar component that allows to display corresponding events in day/week/month view\"\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 }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), 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 }, \"Day Mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Day mode. You could toggle the red line of current time using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showCurrTime\"), \".\"), 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 \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Week Mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Week mode. You could toggle the red line of current time using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showCurrTime\"), \".\"), 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 \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Month Mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Month Mode.\"), 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 \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Set week start day\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The day of the week can be set as the first day of the week through weekStartsOn, 0 for Sunday, 1 for Monday, and so on. Default is Sunday.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"weekStartsOn\"), \" is available since v2.18, and takes effect for month view and week view.\"), 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 Sunday\\n Mon\\n Tue\\n Wed\\n Thu\\n Fri\\n Sat\\n \\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Range Mode\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Range Mode. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"range\"), \" is required which is a left-closed and right-open interval. \"), 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 \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Render Events\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could pass in an array of event objects to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"events\"), \" to render items. For detailed format, refer to API below.\"), 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:
June 25th 14:45 ~ July 26th 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:
July 18th 10:00 ~ July 30th 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:
July 19th 20:00 ~ July 23rd 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:
July 21st 6:00 ~ July 25th 6:00
,\\n },\\n {\\n key: '4',\\n allDay: true,\\n start: new Date(2019, 6, 22, 8, 0, 0),\\n children:
July 22 full day
,\\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:
July 22nd 9:00 ~ July 23rd 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:
July 23 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:
July 23 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:
July 25th 8:00 ~ July 27th 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:
July 26th 10:00 ~ July 27th 16:00
,\\n },\\n ];\\n \\n return (\\n <>\\n \\n Day view\\n Week view\\n Month view\\n Multi-day view\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Render\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateGridRender\"), \" to render customized date cell or column. Use absolute positioning for elements.\"), mdx(\"h4\", {\n parentName: \"section\"\n }, \"Custom Render Events\"), 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
Eating \\uD83C\\uDF70
\\n
Sleeping \\uD83D\\uDE2A
\\n
Playstation \\uD83C\\uDFAE
\\n \\n );\\n } else {\\n return null;\\n }\\n };\\n return (\\n \\n );\\n};\\n\")), mdx(\"h4\", {\n parentName: \"section\"\n }, \"Customized Date Cell Style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could also use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dateGridRender\"), \" to customize date cell style, e.g. backgroundColor. Please notice that in Month View, the date text on the right corner has a z-index of 3. Use a larger z-index if you would like to cover the text as well.\"), 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 = [\\n new Date(2019, 6, 2),\\n new Date(2019, 6, 8),\\n new Date(2019, 6, 19),\\n new Date(2019, 6, 23)\\n ];\\n const dateRender = (dateString) => {\\n if (importDates.filter(date => date.toString() === dateString).length) {\\n return (\\n
\\n );\\n } \\n return null;\\n };\\n return (\\n \\n );\\n};\\n\")), mdx(\"h4\", {\n parentName: \"section\"\n }, \"Customized Date Render\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderDateDisplay\"), \" to customize the display of date\"), 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 Reference\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), 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 }, \"Custom render for date cell or column. Use absolute positioning for elements.\"), 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 }, \"Custom render for events area at the top of calendar in day/range/week mode.\"), 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 }, \"Display date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"current date\")), 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 }, \"Events for rendering, refer to 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 }, \"Header\"), 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 }, \"height\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Height\"), 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 }, \"Toggle whether to distinguish weekend column with grey background from weekdays\"), 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 }, \"The minimum height of events in daily view, multi-day view and weekly view(\", 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 }, \"Mode, one of \", 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 }, \"Callback invoked when clicking on date, basic unit for day and week mode is 0.5h, for month mode is 1d\"), 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 }, \"Callback invoked when event display card close in the month mode\"), 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 }, \"renderTimeDisplay\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Customize the display of time in day/week mode\"), 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 }, \"Customize the display of date\"), 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 }, \"range\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Date range to display in range mode, left-closed and right-open\"), 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 }, \"scrollTop\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Scroll height for displayed content in day and week mode\"), 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 }, \"Toggle whether to show red line of current time\"), 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 }, \"Width\"), 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 }, \"Take the day of the week as the first day of the week, 0 for Sunday, 1 for Monday, and so on. Support after v2.18\"), 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\"), \" is an array of event objects.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"By default, when the event is an all day event without start or end time, it will be put into \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"displayValue\"), \". If an event is not an all-day event, it must has at least start or end time as a valid input.\"), mdx(Notice, {\n type: \"primary\",\n title: \"Attention\",\n mdxType: \"Notice\"\n }, \"Key property is required and must be unique. It is used for events update and re-render.\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), 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 }, \"Whether it is an all-day event\"), 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 }, \"Displayed content\"), 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 }, \"End time of the event\"), 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 and must be unique.\"), 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 }, \"Start time of the event\"), 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 }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Both 12-hour and 24-hour clocks can be used when the time needs to be displayed\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the 12-hour clock is used, it needs to be used together with AM/PM. For details, please refer to \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4\"\n }, \"Time Specification\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"For the abbreviation rules for month, week and time, please refer to \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/start/content-guidelines#1.%20%E7%BC%A9%E5%86%99\"\n }, \"Abbreviation Specification\")))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/calendar","next":{"fields":{"slug":"zh-CN/show/calendar"},"id":"3bba5920-48eb-526f-a100-7144934b8904","frontmatter":{"title":"Calendar 日历","localeCode":"zh-CN","icon":"doc-calendar","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/badge"},"id":"66e508d2-4aa4-59af-bb31-1a54b71329d3","frontmatter":{"title":"Badge 徽章","localeCode":"zh-CN","icon":"doc-badge","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}