hebrewcalendar
TypeScript icon, indicating that this package has built-in type declarations

0.9.7 • Public • Published

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:

  1. Parashot Hashvua.
  2. 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:

  1. onSelectDate - This is a mandatory attributes which is activated every time the user chooses a specific date. Its argument is a DayObj 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 - An HDate object which describes the hebrew date object which consist the hebrew month, hebrew year, and hebrew day. more details about the HDate 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
  1. selectedDate - optional, This attribute specifies a selected date of the hebrew calendar component. if ommited then the curerent date is selected.
  2. 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.

Readme

Keywords

Package Sidebar

Install

npm i hebrewcalendar

Weekly Downloads

1

Version

0.9.7

License

ISC

Unpacked Size

227 kB

Total Files

30

Last publish

Collaborators

  • krasnoff