antd#Calendar JavaScript Examples
The following examples show how to use
antd#Calendar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: select.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
const { value, selectedValue } = this.state;
return (
<>
<Alert
message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
/>
<Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
</>
);
}
Example #2
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Calendar onPanelChange={this.onPanelChange} />
</div>
)
}
Example #3
| Source File: basic.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/calendar', module).add('basic', () => <Calendar onPanelChange={onPanelChange} />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>A basic calendar component with Year/Month switch.</p></>) } });
Example #4
| Source File: card.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/calendar', module).add('card', () =>
<div className="site-calendar-demo-card">
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Nested inside a container element for rendering in limited space.</p></>) } });
Example #5
| Source File: notice-calendar.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/calendar', module).add('notice-calendar', () =>
<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>This component can be rendered by using <code>dateCellRender</code> and <code>monthCellRender</code> with the data you need.</p></>) } });
Example #6
| Source File: locale.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
const info = () => {
Modal.info({
title: 'some info',
content: 'some info',
});
};
const confirm = () => {
Modal.confirm({
title: 'some info',
content: 'some info',
});
};
return (
<div className="locale-components">
<div className="example">
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
<div className="example">
<Select showSearch style={{ width: 200 }}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
</Select>
<DatePicker />
<TimePicker />
<RangePicker style={{ width: 200 }} />
</div>
<div className="example">
<Button type="primary" onClick={this.showModal}>
Show Modal
</Button>
<Button onClick={info}>Show info</Button>
<Button onClick={confirm}>Show confirm</Button>
<Popconfirm title="Question?">
<a href="#">Click to confirm</a>
</Popconfirm>
</div>
<div className="example">
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
</div>
<div className="site-config-provider-calendar-wrapper">
<Calendar fullscreen={false} value={moment()} />
</div>
<div className="example">
<Table dataSource={[]} columns={columns} />
</div>
<Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
<p>Locale Modal</p>
</Modal>
</div>
);
}
Example #7
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
DashboardBeta = () => {
const [taskTableSelectedRowKeys, setTaskTableSelectedRowKeys] = useState([])
const onSelectChange = keys => {
setTaskTableSelectedRowKeys(keys)
}
const taskTableRowSelection = {
taskTableSelectedRowKeys,
onChange: onSelectChange
}
const dropdownMenu = (
<Menu>
<Menu.Item key='1'>1st menu item</Menu.Item>
<Menu.Item key='2'>2nd menu item</Menu.Item>
<Menu.Item key='3'>3rd item</Menu.Item>
</Menu>
)
const taskTableColumns = [
{
title: 'Name',
dataIndex: 'name',
render: text => <a href=''>{text}</a>
},
{
title: 'Username',
dataIndex: 'username',
render: text => <a href=''>{text}</a>
},
{
title: 'Actions',
dataIndex: 'actions',
render: () => (
<div className='pull-right'>
<Dropdown overlay={dropdownMenu}>
<Button style={{ marginLeft: 8 }} size='small'>
Action <DownOutlined />
</Button>
</Dropdown>
</div>
)
}
]
const tableColumns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name'
},
{
title: 'Position',
dataIndex: 'position',
key: 'position'
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age
},
{
title: 'Office',
dataIndex: 'office',
key: 'office'
},
{
title: 'Date',
dataIndex: 'date',
key: 'date'
},
{
title: 'Salary',
dataIndex: 'salary',
key: 'salary',
sorter: (a, b) => a.salary - b.salary
}
]
return (
<div>
<Helmet title='Dashboard: Beta' />
<div className='row'>
<div className='col-lg-12 col-xl-6'>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Account Information</strong>
</div>
<div className='text-muted'>Block with important Account information</div>
</div>
<div className='card-body'>
<General19 />
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Work Progress</strong>
</div>
<div className='text-muted'>Block with important Work Progress information</div>
</div>
<div className='card-body'>
<div>
<strong>{progressGroup.first.name}</strong>
<p className='text-muted mb-1'>{progressGroup.first.description}</p>
<div className='mb-3'>
<Progress
percent={progressGroup.first.progress}
status={progressGroup.first.status}
/>
</div>
<strong>{progressGroup.second.name}</strong>
<p className='text-muted mb-1'>{progressGroup.second.description}</p>
<div className='mb-3'>
<Progress
percent={progressGroup.second.progress}
status={progressGroup.second.status}
/>
</div>
<strong>{progressGroup.third.name}</strong>
<p className='text-muted mb-1'>{progressGroup.third.description}</p>
<div className='mb-3'>
<Progress
percent={progressGroup.third.progress}
status={progressGroup.third.status}
/>
</div>
<strong>{progressGroup.fourth.name}</strong>
<p className='text-muted mb-1'>{progressGroup.fourth.description}</p>
<div className='mb-3'>
<Progress
percent={progressGroup.fourth.progress}
status={progressGroup.fourth.status}
/>
</div>
<strong>{progressGroup.fives.name}</strong>
<p className='text-muted mb-1'>{progressGroup.fives.description}</p>
<div className='mb-3'>
<Progress percent={progressGroup.fives.progress} />
</div>
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Employees</strong>
</div>
<div className='text-muted'>Block with Employees important information</div>
</div>
<div className='card-body'>
<div className='row'>
<div className='col-md-6'>
<div className='card bg-light border-0 mb-0'>
<General23 />
</div>
</div>
<div className='col-md-6'>
<div className='card border-0 mb-0'>
<General23v1 />
</div>
</div>
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Task Table</strong>
</div>
<div className='text-muted'>Block with important Task Table information</div>
</div>
<div className='card-body'>
<div className='row'>
<div className='col-lg-12'>
<div className='kit__utils__table'>
<Table
columns={taskTableColumns}
dataSource={taskTableData}
rowSelection={taskTableRowSelection}
pagination={false}
/>
</div>
</div>
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Information Cards</strong>
</div>
<div className='text-muted'>Block with important Information Cards information</div>
</div>
<div className='card-body'>
<div className='card bg-primary border-0 mb-4'>
<div className='card-body'>
<General24 />
</div>
</div>
<div className='card bg-light border-0 mb-0'>
<div className='card-body'>
<General24v1 />
</div>
</div>
</div>
</div>
</div>
<div className='col-lg-12 col-xl-6'>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Server Info</strong>
</div>
<div className='text-muted'>Block with important Server Info information</div>
</div>
<div className='card-body'>
<div className='row'>
<div className='col-lg-6'>
<div className='overflow-hidden rounded card border-0 mb-0'>
<General20 />
</div>
</div>
<div className='col-lg-6'>
<div className='overflow-hidden rounded card border-0 mb-0'>
<General20v1 />
</div>
</div>
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Server Statistics</strong>
</div>
<div className='text-muted'>Block with important Server Statistics information</div>
</div>
<div className='card-body'>
<div className='row'>
<div className='col-lg-6'>
<General21 />
<General21v1 />
</div>
<div className='col-lg-6'>
<General21v2 />
<General21v3 />
</div>
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Server Configuration</strong>
</div>
<div className='text-muted'>
Block with important Server Configuration information
</div>
</div>
<div className='card-body'>
<div className='mb-5'>
<Slider marks={rangeMarks} defaultValue={rangeSlider.first} />
</div>
<div className='mb-4'>
<Slider range marks={rangeMarks} defaultValue={rangeSlider.second} />
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Week Revenue Statistics, Billions</strong>
</div>
<span className='mr-2'>
<span className='kit__utils__donut kit__utils__donut--primary' />
Nuts
</span>
<span className='mr-2'>
<span className='kit__utils__donut kit__utils__donut--success' />
Apples
</span>
<span className='mr-2'>
<span className='kit__utils__donut kit__utils__donut--yellow' />
Peaches
</span>
</div>
<div className='card-body'>
<ChartistGraph
data={weekChartistData}
options={weekChartistOptions}
type='Line'
className='chart-area height-300 mt-4 chartist'
/>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Month Site Visits Growth, %</strong>
</div>
<span className='mr-2'>
<span className='kit__utils__donut kit__utils__donut--primary' />
Income
</span>
<span className='mr-2'>
<span className='kit__utils__donut kit__utils__donut--success' />
Outcome
</span>
</div>
<div className='card-body'>
<ChartistGraph
data={monthCartistData}
options={monthChartistOptions}
type='Bar'
className='chart-area height-300 mt-4 chartist'
/>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Chat</strong>
</div>
<div className='text-muted'>Block with important Chat information</div>
</div>
<div className='card-body'>
<General14 />
</div>
</div>
</div>
</div>
<div className='row'>
<div className='col-lg-12'>
<div className='card'>
<div className='card-body'>
<div className='mb-4'>
<General22 />
</div>
<div className='kit__utils__table'>
<Table columns={tableColumns} dataSource={tableData} />
</div>
</div>
</div>
<div className='card'>
<div className='card-header'>
<div className='cui__utils__heading mb-0'>
<strong>Calendar</strong>
</div>
<div className='text-muted'>Block with important Calendar information</div>
</div>
<div className='card-body'>
<Calendar dateCellRender={dateCellRender} />
</div>
</div>
</div>
</div>
</div>
)
}
Example #8
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
AppsCalendar = () => {
const getListData = value => {
let listData
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]
break
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]
break
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]
break
default:
}
return listData || []
}
const dateCellRender = value => {
const listData = getListData(value)
return (
<ul className="events">
{listData.map(item => (
<li key={item.content}>
<Badge status={item.type} text={item.content} />
</li>
))}
</ul>
)
}
const getMonthData = value => {
let num
if (value.month() === 8) {
num = 1394
}
return num
}
const monthCellRender = value => {
const num = getMonthData(value)
return num ? (
<div className="notes-month">
<section>{num}</section>
<span>Backlog number</span>
</div>
) : null
}
return (
<div>
<Helmet title="Calendar" />
<div className="card">
<div className="card-body">
<div className="d-flex flex-wrap mb-3">
<div className="mr-5 flex-grow-1">
<div className="text-uppercase text-dark font-weight-bold mb-3">Calendars</div>
<div className="d-flex flex-wrap">
<Checkbox className={style.event} checked>
Gmail
</Checkbox>
<Checkbox className={style.event}>Birthdays</Checkbox>
</div>
</div>
<div className="flex-grow-1">
<div className="text-uppercase text-dark font-weight-bold mb-3">Events</div>
<div className="d-flex flex-wrap">
<div className={style.event}>
<div className="kit__utils__donut kit__utils__donut--danger" />
Meeting
</div>
<div className={style.event}>
<div className="kit__utils__donut kit__utils__donut--primary" />
Holidays
</div>
<div className={style.event}>
<div className="kit__utils__donut kit__utils__donut--orange" />
Milestones
</div>
<div className={style.event}>
<div className="kit__utils__donut kit__utils__donut--success" />
Conference
</div>
</div>
</div>
</div>
<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
</div>
</div>
</div>
)
}
Example #9
| Source File: customize-header.jsx From virtuoso-design-system with MIT License | 4 votes |
|
storiesOf('antd/calendar', module).add('customize-header', () =>
<div className="site-calendar-customize-header-wrapper">
<Calendar
fullscreen={false}
headerRender={({ value, type, onChange, onTypeChange }) => {
const start = 0;
const end = 12;
const monthOptions = [];
const current = value.clone();
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
current.month(i);
months.push(localeData.monthsShort(current));
}
for (let index = start; index < end; index++) {
monthOptions.push(
<Select.Option className="month-item" key={`${index}`}>
{months[index]}
</Select.Option>,
);
}
const month = value.month();
const year = value.year();
const options = [];
for (let i = year - 10; i < year + 10; i += 1) {
options.push(
<Select.Option key={i} value={i} className="year-item">
{i}
</Select.Option>,
);
}
return (
<div style={{ padding: 8 }}>
<Typography.Title level={4}>Custom header</Typography.Title>
<Row gutter={8}>
<Col>
<Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
<Radio.Button value="month">Month</Radio.Button>
<Radio.Button value="year">Year</Radio.Button>
</Radio.Group>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
onChange={newYear => {
const now = value.clone().year(newYear);
onChange(now);
}}
value={String(year)}
>
{options}
</Select>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
value={String(month)}
onChange={selectedMonth => {
const newValue = value.clone();
newValue.month(parseInt(selectedMonth, 10));
onChange(newValue);
}}
>
{monthOptions}
</Select>
</Col>
</Row>
</div>
);
}}
onPanelChange={onPanelChange}
/>
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Customize Calendar header content.</p></>) } });
Example #10
| Source File: dark.jsx From virtuoso-design-system with MIT License | 4 votes |
|
render() {
const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: true,
ellipsis: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: false,
sortOrder: true,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: null,
onFilter: (value, record) => record.address.includes(value),
sorter: false,
sortOrder: true,
ellipsis: true,
},
];
return (
<>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.handleDisable}
style={{ marginBottom: 16 }}
/>
<Card title="Card Title">
<Card.Grid>Content</Card.Grid>
<Card.Grid hoverable={false}>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
</Card>
<Collapse>
<Panel header="This is panel header 1" key="1">
<Collapse defaultActiveKey="1">
<Panel header="This is panel nest panel" key="1">
<p>{text}</p>
</Panel>
</Collapse>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
<Transfer
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={this.handleTransferChange}
onSelectChange={this.handleTransferSelectChange}
render={item => item.title}
disabled={disabled}
/>
<TableTransfer
dataSource={mockData}
targetKeys={targetKeys}
disabled={disabled}
showSearch={showSearch}
onChange={this.handleTableTransferChange}
filterOption={(inputValue, item) =>
item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
}
leftColumns={[
{
dataIndex: 'title',
title: 'Name',
},
{
dataIndex: 'description',
title: 'Description',
},
]}
rightColumns={[
{
dataIndex: 'title',
title: 'Name',
},
]}
/>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.triggerDisable}
style={{ marginTop: 16 }}
/>
<Switch
unCheckedChildren="showSearch"
checkedChildren="showSearch"
checked={showSearch}
onChange={this.triggerShowSearch}
style={{ marginTop: 16 }}
/>
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link
href="#components-anchor-demo-basic"
title="Basic demo with Target"
target="_blank"
/>
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
<Tabs type="card">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
<Calendar />
<Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
<TreeNode title="leaf" key="0-0-0-2" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</TreeNode>
<TreeNode title="parent 1-2" key="0-0-2">
<TreeNode title="leaf" key="0-0-2-0" />
<TreeNode title="leaf" key="0-0-2-1" />
</TreeNode>
</TreeNode>
</Tree>
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
<Table
columns={columnsTable}
dataSource={dataTable}
pagination={false}
id="table-demo-summary"
bordered
summary={pageData => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<tr>
<th>Total</th>
<td>
<Text type="danger">{totalBorrow}</Text>
</td>
<td>
<Text>{totalRepayment}</Text>
</td>
</tr>
<tr>
<th>Balance</th>
<td colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</td>
</tr>
</>
);
}}
/>
<br />
<Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
<Card
hoverable
style={{ width: 240 }}
cover={
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
}
>
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>
<Slider defaultValue={30} />
<DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</Modal>
</>
);
}
