Getting Started with the React Hebrew Calendar component
This component is a simple calendar which displays the gergorian calendar and the hebrew calendar. This component also shows the following:
- Parashot Hashvua.
- Jewish Events
In order to install this component simply execute the following command:
npm i hebrewcalendar
Here is how you implement the component in your react code
import './App.css';
import Cal from 'hebrewcalendar/Cal';
import { DayObj } from 'hebrewcalendar/HebrewCalendar/interfaces/dayObj';
import { Language } from 'hebrewcalendar/HebrewCalendar/enums/language';
function App() {
const selectDateHandler = (selectedDate) => {
console.log('selectDateHandler', selectedDate);
}
return (
<div className="App">
<div className="celendarContainer"><Cal onSelectDate={(selectedDate) => selectDateHandler(selectedDate)} language={Language.Hebrew}></Cal></div>
</div>
);
}
export default App;
This new component has the following attributes:
-
onSelectDate
- This is a mandatory attributes which is activated every time the user chooses a specific date. Its argument is aDayObj
interface which looks like this:
export interface DayObj {
internationalDate: number;
HebrewDate: HDate;
DayOfWeek: number;
ButtonDate: Date;
ParashaShavua?: string;
EventObj?: Array<Event>;
}
-
internationalDate
- Day of the gregorian month -
HebrewDate
- AnHDate
object which describes the hebrew date object which consist the hebrew month, hebrew year, and hebrew day. more details about theHDate
object can be found at: https://github.com/hebcal/hebcal-es6#hdate -
DayOfWeek
- Day of the week where Sunday is 0 and Saturday is 6. -
ButtonDate
- Gergorian javascript date object. -
ParashaShavua
- weekly "Parashat Hashvua" in a string object. -
EventObj
- Special event object in the Jewish year. More details can be found at: https://github.com/hebcal/hebcal-es6#Event
-
selectedDate
- optional, This attribute specifies a selected date of the hebrew calendar component. if ommited then the curerent date is selected. -
language
- optional, language of the compoenent:
export enum Language {
Hebrew = 'he',
English = 'en'
}
If ommited then the default language is english.
Final words
This component is based on the hebcal-es6 javascript library and has its GPL-2.0 license.
A working sample of this component can be seen here.
This component was made by Kobi Krasnoff.