React Ant Calendar remove month, year buttons

Question

Need a help in Ant Calendar

    import { Calendar } from 'antd';

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

ReactDOM.render(
  <Calendar onPanelChange={onPanelChange} />,
  mountNode);

I need remove default MONTH, YEAR buttons and other options.

Thank you!

score 2 · Answer 1 · answered Jun 03 '20 at 19:45

2

const headerRender = () => null;

<Calendar
  headerRender={headerRender}
/>

answered Jun 03 '20 at 19:45

user13675227

21
2

3

Welcome to StackOverflow. Plain code answers can almost always be improved by providing some explanation. Consider adding a sentence or two, or a link to the documentation that led you to your solution, for example. – jdaz Jun 03 '20 at 23:27
This works. It returns a null node. – Garrick Crouch Jul 23 '23 at 04:11

score 1 · Answer 2 · answered Oct 22 '18 at 19:51

1

.ant-fullcalendar-header{
  display:none;
}

https://github.com/ant-design/ant-design/issues/12373

answered Oct 22 '18 at 19:51

bkent

11
1

So, what happens when this project dies and the link is dead? Is this an answer that has a lifetime worthy of more than a comment? – Oct 22 '18 at 20:06

score 1 · Answer 3 · answered Sep 22 '19 at 06:25

1

For now, there exist no exact solution. But you can use some trick:

Give a custom class name to the calendar component and add below css code

.<customClassName>  .ant-fullcalendar-header .ant-radio-group {
    display: none !important
}

answered Sep 22 '19 at 06:25

prasid444

325
1
10

React Ant Calendar remove month, year buttons

3 Answers3