\n
\n
Monthly
\n
![](\"https://raw.githubusercontent.com/mikeham98/react-awesome-calendar/develop/assets/monthly.jpg\")
\n
\n\n
\n
Daily
\n
![](\"https://raw.githubusercontent.com/mikeham98/react-awesome-calendar/develop/assets/daily.jpg\")
\n
\n\n
\n
Yearly
\n
![](\"https://raw.githubusercontent.com/mikeham98/react-awesome-calendar/develop/assets/yearly.jpg\")
\n
\n\n## Basic use\n```bash\nimport Calendar from 'react-awesome-calendar';\n\nconst events = [{\n id: 1,\n color: '#fd3153',\n from: '2019-05-02T18:00:00+00:00',\n to: '2019-05-05T19:00:00+00:00',\n title: 'This is an event'\n}, {\n id: 2,\n color: '#1ccb9e',\n from: '2019-05-01T13:00:00+00:00',\n to: '2019-05-05T14:00:00+00:00',\n title: 'This is another event'\n}, {\n id: 3,\n color: '#3694DF',\n from: '2019-05-05T13:00:00+00:00',\n to: '2019-05-05T20:00:00+00:00',\n title: 'This is also another event'\n}];\n\nclass MyComponent extends React.Component {\n render() {\n return (\n
\n );\n }\n}\n\n```\n\n## Calendar\n### Props\n#### Summary\n|Name |Type |Description |\n|-----------------------|-------------|--------------------------------------------------------------------------------------------------------------|\n|events |array |Events is an array that can be passed into the calendar and will render events on the Monthly and Daily view |\n|header |component |This allows you to provide a custom header component for the calendar |\n|onChange |function |This will be called every time the calendar changes date or mode |\n|onClickEvent |function |This function is called on click of an event on the daily mode |\n|onClickTimeLine |function |This function is called on click of the timeline present on the daily calendar mode |\n|ref |ref |By passing in a ref it enables the ability to call methods on the Calendar class e.g. getDetails | |\n\n#### events\n\nThe events array prop has the following shape\n```bash\n{\n id: (string or numeric) - this is used to uniquely identify an event,\n color: (hex or RBG/RGBA value) - this sets the event color on the calendar,\n from: (utc timestamp) - start date/time of event e.g. '2019-05-05T13:00:00+00:00',\n to: (utc timestamp) - end date/time of event e.g. '2019-05-05T20:00:00+00:00',\n title: (string) - name of event\n}\n```\nI would recommend retrieving events on a per month basis to improve performance.\n\n#### header\nIf you wish to provide a customer header component you can pass in a prop which will override the header used by default. The following props will be passed into this component:\n\n##### props\n\n```bash\n{\n current: {\n year: numeric,\n month: numeric,\n day: numeric\n },\n mode: \"dailyMode\" || \"monthlyMode\" || \"yearlyMode\" - this can be used to determine what the current mode of the calender is. This way you can choose whether to show a year, month or day depending on the mode,\n prev: {\n year: numeric,\n month: numeric,\n day: numeric\n },\n next: {\n year: numeric,\n month: numeric,\n day: numeric\n },\n onClickPrev: function - this will change the calendar to the prev year, month, day depending on the mode\n onClickNext: function - this will change the calendar to the next year, month, day depending on the mode\n}\n```\n\n#### onChange\nThe onChange prop is a function that will be called on change of the mode (year, month, day) or previous/next calendar. the mode, year, month, day values will be passed in.\n##### Example\n```bash\n(date) => {\n console.log(date)\n /* result (1st January 2019 viewed in the monthly calendar view)\n {\n mode: 'monthlyMode',\n year: 2019,\n month: 0,\n day: 1\n }\n */\n}\n```\n\n#### onClickEvent\nThe onClickEvent prop is a function that will be called on click of an event on the Day mode of the calendar. The event id will be passed through to the function as an argument\n##### Example\n```bash\n(event) => {\n console.log(event)\n /* result\n 42\n */\n}\n```\n\n#### onClickTimeLine\nThe onClickTimeLine prop is a function that will be called on click of the timeline present on the on the Day mode of the calendar. The year month date and hour (0-24 with a resolution of 0.5) will be passed through to the function as an argument\n##### Example\n```bash\n(date) => {\n console.log(date)\n /* result\n {\n year: 2019,\n month: 0,\n day: 1,\n hour: 15.5\n }\n */\n}\n```\n\n#### ref\nPassing in a ref allows you to call methods on the Calendar class. A particularly useful method would be getDetails which return the current\nmode, year, month, day.\n##### Example\n```bash\nimport React from 'react';\nimport Calendar from \"react-awesome-calendar\";\n\nexport default class Component extends React.Component {\n constructor(props) {\n super(props);\n this.calendar = React.createRef();\n }\n\n componentDidMount() {\n const details = this.calendar.current.getDetails();\n console.log(details);\n /* result\n {\n mode: 'monthlyMode',\n year: 2019,\n month: 0,\n day: 1\n }\n */\n // call endpoint to retrieve events\n }\n\n render() {\n return (\n
\n );\n }\n}\n```","readmeFilename":"README.md","homepage":"https://github.com/mikeham98/react-awesome-calendar","author":{"name":"Michael Hamilton"},"keywords":["calendar","events","dates","awesome","react","react-awesome-calendar","monthly"],"bugs":{"url":"https://github.com/mikeham98/react-awesome-calendar/issues"},"license":"MIT"}
![](\"https://raw.githubusercontent.com/mikeham98/react-awesome-calendar/master/assets/react-awesome-calendar.svg?sanitize=true\")
\n \n