Need to create custom navigation header for calendar

I have an Antd calendar I’m using as part of a larger React project. This component will load data from an API response and map a set of dates and times AM, PM, ANY, each with their own unique ID, to the dates on the calendar for a date/time selection like 07/12/2019 and PM

Out of the box, the default header styles for selecting a month and a year look like this.

I’m trying to change those to include a custom header that simply lists the month name and year (example:July 2019) and a left and right chevron for navigating between the months.

I’ve included the chevrons but when it comes to implementing the navigation functionality and how to render the name of the current month and year I’m completely at a loss.

I’ve included a CodeSandbox here to show my current progress

Edit stoic-mcclintock-0dp6p

My Calendar Component

import React from "react";
import { Calendar, Select, Radio, Col, Row } from "antd";
import { FaChevronRight, FaChevronLeft } from "react-icons/fa";
import styled from "styled-components";

const { Group, Button } = Radio;

function onPanelChange(value, mode) {
  console.log(value, mode);
}

const StylingCalendar = props => (
  <div style={{ width: 300, border: "1px solid #d9d9d9", borderRadius: 4 }}>
    <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: 10 }}>
            <div style={{ marginBottom: "10px" }}>{monthOptions.name}</div>
            <Row type="flex" justify="space-between">
              {/* <Col>
                <Group
                  size="small"
                  onChange={e => onTypeChange(e.target.value)}
                  value={type}
                >
                  <Button value="month">Month</Button>
                  <Button value="year">Year</Button>
                </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 span={8}>
                <LeftArrow onClick={null} />
              </Col>
              <Col span={8}>
                {/* <FaChevronLeft /> */}
                <Select
                  size="small"
                  dropdownMatchSelectWidth={false}
                  value={String(month)}
                  onChange={selectedMonth => {
                    const newValue = value.clone();
                    newValue.month(parseInt(selectedMonth, 10));
                    onChange(newValue);
                  }}
                >
                  {monthOptions}
                </Select>
              </Col>
              <Col span={8}>
                <RightArrow onClick={null} />
              </Col>
            </Row>
          </div>
        );
      }}
      onPanelChange={onPanelChange}
    />
  </div>
);

const RightArrow = styled(FaChevronRight)`
  cursor: pointer;
`;

const LeftArrow = styled(FaChevronLeft)`
  cursor: pointer;
`;

export default StylingCalendar;

Answer

Try using DatePicker with showTime funcionallity, check the example, by pressing on select time.

enter image description here

<div>
  <DatePicker
    showTime
    placeholder="Select Time"
    onChange={onChange}
    onOk={onOk}
  />
</div>

Edit 3vyz0z018p

Moreover, if you use open property you get exactly the component you trying to implement:

<DatePicker open showTime placeholder="Select Time" />

Leave a Reply

Your email address will not be published. Required fields are marked *