antd#Calendar JavaScript Examples

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} />
      </>
    );
  }

render() {
    return (
      <div>
        <Calendar onPanelChange={this.onPanelChange} />
      </div>
    )
  }

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></>) } });

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></>) } });

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></>) } });

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>
    );
  }

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>
  )
}

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>
  )
}

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></>) } });

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>
      </>
    );
  }