Documentation

Jewish Calendar

Thank you so much for using our Jewish Calendar.


If you have any questions that are beyond the scope of this help file, Please feel free to email.


How to install

Follow the steps below to set up the Jewish Calendar on your site:

  1. To install the Calendar Component, you have two options:
    • Download the package and include it in your project:
      link to download
    • Or use the links for the specific type of bundle you want to use.
  2. Connect the main files of the calendar to your website:
    For ESM:
    Javascript: import Calendar from 'path/bundle.esm.js';
    CSS: import 'path/bundle.esm.css';
    For UMD:
    Javascript: url/bundle.umd.js
    CSS: url/bundle.umd.css
  3. You are good to go for adding the calendar to your website!

How to use

The calendar can be created in the following way:


// For ECMAScript Modules (ESM), place the code inside a <script type="module"> block.
    import {JewishCalendar, LanguageName, CalendarType} from 'bundle.esm.js';
// For UMD (Universal Module Definition) - almost the same, except that we should use the JL object, which will be in the window after adding <script src="bundle.umd.js"></script>.
    const {JewishCalendar, LanguageName, CalendarType }= window.JL;

    const calendarInstance = JewishCalendar(document.querySelector('#calendar-id'), {
        onChange: (currentDayObject)=>console.log(currentDayObject),
        type: CalendarType.Gregorian,
        lang: LanguageName.English,
    });
                

You can also obtain an instance from a DOM element and use the setCalendarType, setDirection, and setCalendarType methods.


const calendarInstance2 = document.getElementById('calendar-id').calendar;
calendarInstance2.setCalendarType(CalendarType.Jewish);
calendarInstance2.updateProps(); // All changes should be applied manually to avoid re-rendering issues.
                

It is possible to initialize multiple instances using a class.

JewishCalendar('.calendar-class', {
        type: CalendarType.Gregorian,
        lang: LanguageName.English,
    });
                

Options:

Property Features Available values
defaultDate Preset the date using the "m/d/yyyy" format. m/d/yyyy
direction Specifies the calendar's text direction (automatically based on language if not set) ltr | rtl
lang Specifies the language used in the calendar Hebrew | English
type Specifies the type of calendar 0 for Jewish | 1 for Gregorian
showSubheader Controls the visibility of the subheader, which includes the current date input and today button true/false
weekTitles Allows customization of week titles for each combination of calendar type and language {[ CalendarType.Gregorian + LanguageName.English]: ['gregEn', '2', '3', '4', '5', '6', '7'], }
isLoadDateAfterInit Controls whether the calendar fetches a date from the server upon initialization and renders it. If set to false, the calendar will not automatically render. Defaults to true. true/false

Methods:

Property Features Available values
setDirection() Recalculates the calendar's text direction based on the language setting
setLang(lang: LanguageName) Specifies the language used in the calendar Hebrew | English
setCalendarType(calendarType: CalendarType) Specifies the type of calendar 0 for Jewish | 1 for Gregorian
setWeekTitles(weekTitles: WeekTitlesType) Allows customization of week titles for each combination of calendar type and language {[ CalendarType.Gregorian + LanguageName.English]: ['gregEn', '2', '3', '4', '5', '6', '7'], }
getFormattedDate() Returns the date, formatted according to the selected calendar type. Example: Sep 8, 2023 / Elul 20 5783
getValue() Returns the selected date.
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    
setValue(date: Date | string) Manually set a date m/d/yyyy or Date object
updateProps() Fetches data from the server based on the configuration (lang, type, direction) and re-renders the calendar.

Events:

Property Features Return data
onChange(date: IDate) =>void Invoked every time the date changes
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    
onLoad?: (date: IDate) => void Invoked once after the calendar's initial load
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    

If you need more information, please visit the example site: https://calendar.jewishluach.com/


How to Use with React

The calendar can be wrapped in a React component and used in your project:

import { JewishCalendar } from 'bundle.esm.js';

export const CalendarWrapper = ({calendarType = 0, direction, onChange})=> {
   const calendarRef = useRef(null);
   const calendarInstanceRef = useRef(null);

   // Initialize the calendar component
   useEffect(()=>{
      calendarInstanceRef.current = JewishCalendar(calendarRef.current, {
         onChange: onChange,
         onLoad: onChange,
         type: direction === 'rtl' ? 0 : 1,
         lang: direction === 'rtl' ? 'Hebrew' : 'English',
      });
   }, []);

  // Update based on the current state of the site
   useEffect(()=>{
      if (calendarInstanceRef.current) {
         calendarInstanceRef.current.setCalendarType(calendarType);
         calendarInstanceRef.current.setLang(direction === 'rtl' ? 'Hebrew' : 'English');
         calendarInstanceRef.current.updateProps();
      }
   }, [direction, calendarType])

   return <div ref={calendarRef}></div>
};

                

How to use Date Picker

The calendar can be created as dropdown near button or input box in the following way:

// For ECMAScript Modules (ESM), place the code inside a <script type="module"> block.
    import {JewishCalendarPicker, LanguageName, CalendarType} from 'bundle.esm.js';
// For UMD (Universal Module Definition) - almost the same, except that we should use the JL object, which will be in the window after adding <script src="bundle.umd.js"></script>.
    const {JewishCalendarPicker, LanguageName, CalendarType }= window.JL;

    const calendarMain = JewishCalendarPicker(document.querySelector('#calendar-id'), {
        onChange: (currentDayObject)=>console.log(currentDayObject),
        showSubheader: false,
        type: CalendarType.Gregorian,
        lang: LanguageName.English,
    });
                

Options:

Property Features Available values
defaultDate Preset the date using the "m/d/yyyy" format. m/d/yyyy
lang Specifies the language used in the calendar Hebrew | English
type Specifies the type of calendar 0 for Jewish | 1 for Gregorian
showSubheader Controls the visibility of the subheader, which includes the current date input and today button true/false
weekTitles Allows customization of week titles for each combination of calendar type and language {[ CalendarType.Gregorian + LanguageName.English]: ['gregEn', '2', '3', '4', '5', '6', '7'], }
isLoadDateAfterInit Controls whether the calendar fetches a date from the server upon initialization and renders it. If set to false, the calendar will not automatically render. Defaults to true. true/false

Methods:

Property Features Available values
getCalendarInstance() Returns the calendar instance, allowing access to all methods described in the calendar section.
setLang(lang: LanguageName) Specifies the language used in the calendar Hebrew | English
setCalendarType(calendarType: CalendarType) Specifies the type of calendar 0 for Jewish | 1 for Gregorian
openCalendar() Opens the dropdown menu.
closeCalendar() Closes the dropdown menu.
updateProps() Fetches data from the server based on the configuration (lang, type, direction) and re-renders the calendar.

Events:

Property Features Return data
onChange(date: IDate) =>void Invoked every time the date changes
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    
onLoad?: (date: IDate) => void Invoked once after the calendar's initial load
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    

If you need more information, please visit the example site: https://calendar.jewishluach.com/


How to Use Date Picker with React

The Date Picker can be wrapped in a React component and used in your project:

import { JewishCalendarPicker } from 'bundle.esm.js';

export const DatePickerWrapper = ({calendarType = 0, direction, defaultValue = null, onChange})=> {
   const calendarRef = useRef(null);
   const calendarInstanceRef = useRef(null);

   // Initialize the date picker component
   useEffect(()=>{
      calendarInstanceRef.current = JewishCalendarPicker(calendarRef.current, {
         showSubheader: false,
         defaultValue: defaultValue,
         onChange: onChange,
         type: direction === 'rtl' ? 0 : 1,
         lang: direction === 'rtl' ? 'Hebrew' : 'English',
      });
   }, []);

  // Update based on the current state of the site
   useEffect(()=>{
      if (calendarInstanceRef.current) {
         calendarInstanceRef.current.setCalendarType(calendarType);
         calendarInstanceRef.current.setLang(direction === 'rtl' ? 'Hebrew' : 'English');
         calendarInstanceRef.current.updateProps();
      }
   }, [direction, calendarType])

   return <input type="text" ref={calendarRef} className="jewish-picker" />
};

                

How to Change Styles

You can modify the styles using CSS.

This can be achieved using the following code:


<!-- Just add a class to your div -->
<div id="calendar-will-init-by-the-id" class="custom-style"></div>

<style>
.custom-style .jl-calendar {
  width: 100%;
  min-width: 100%;
}
</style>
  

Background calendar

We can use calendar for retrieving the date in diffident format in background without UI. Please refer to the API section for more details.

It can be achieved using the flowing code:


const fetchDate = async (fetchedDate) => {
  const url = new URL(`https://calendar.jewishluach.com/api/Calendar/GetCalendarWidgetData?date=${fetchedDate}&calendarType=0&language=English&herb_day=-1`);

  try {
    const response = await fetch(url);
    const data = JSON.parse(await response.json());

    for (const week of data.listOfWeeks) {
      const currentDate = week.days.find((day) => day.formats.dateShort === fetchedDate);
      if (currentDate) {
        return currentDate;
      }
    }
  } catch (e) {
    console.error(e);
  }
  return null;
};

fetchDate('9/6/2023').then((currentDayObject)=>{
    console.log(currentDayObject);
})
                    
                

The functionality works at the same way as with UI, but in this case date will be transform to diffident format of date and UI won't be shown.

Result:

                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0, // For more details about all available values, see the DayType enum below.
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}

enum DayType {
    REGULAR_DAY = 0,
    YOM_TOV = 1,
    MINOR_HOLIDAY = 2,
    FAST_HOLIDAY = 3,
}
                        
                    

How to install Zmanim Widget

Follow the steps below to set up the Zmanim Calendar on your site:

  1. First of all, activate the Google Map API and connect globally by adding a script like the following in header:

    
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=YOUR_GOOGLE_API_KEY&libraries=places"></script>
    
  2. To install the Zmanim Widget, you have two options:
    • Download the package and include it in your project:
      link to download
    • Or use the links for the specific type of bundle you want to use.
  3. Connect the main files of the calendar to your website:
    For ESM:
    Javascript: import { ZmanimWidget } from 'path/bundle.esm.js';
    CSS: import 'path/bundle.esm.css';
    For UMD:
    Javascript: url/bundle.umd.js
    CSS: url/bundle.umd.css
  4. You are good to go for adding the calendar to your website!

How to use Zmanim Widget

The Zmanim Widget can be created in the following way:


// For ECMAScript Modules (ESM), place the code inside a <script type="module"> block.
    import { ZmanimWidget } from 'bundle.esm.js';
// For UMD (Universal Module Definition) - almost the same, except that we should use the Zmanim object, which will be in the window after adding <script src="bundle.umd.js"></script>.
    const { ZmanimWidget }= window.Zmanim;

    const zmainInstance = new ZmanimWidget({
       is24HTimeFormat: false,
       container: document.querySelector('#zmanimBlock')
   })
                

Options:

Property Features Available values
container DOM element where the component will be built. document.querySelector('#zmanimBlock')
date Preset the date using the "m/d/yyyy" format. m/d/yyyy
direction Specifies the widget's text direction (automatically based on language if not set) ltr | rtl
lang Specifies the language used in the calendar Hebrew | English
lat Specifies the default latitude. Float number, e.g., 41.34
lng Specifies the default longitude. Float number, e.g., -74.168
fullZmanim If set to 1, displays an extended list of Zmanim. 1 / 0
localStoreName The widget can save the last selected position under a specified name; defaults to "zmanimData". String (default: "zmanimData")
is24HTimeFormat Determines the time format, either 24-hour (23:00) or 12-hour (11:00 PM). true/false
showSeconds Controls whether to display seconds in the time format (e.g., 12:00 vs. 12:00:00). true/false
presetedLocations A list of predefined locations.
                                        
[{
    locationName: 'Kiryas Joel',
    shortCode: 'KJ',
    zipCode: '10950',
    lat: '41.341',
    lng: '-74.168',
}]
                                        
                                    

Methods:

Property Features Available values
setDate(date: string) Sets a specific date for the widget in the format m/d/yyyy. m/d/yyyy
setDirection(direction: LanguageDirectionType) Sets the text direction of the widget's content. rtl | ltr
setLang(lang: LanguageName) Specifies the language used in the widget. Hebrew | English
setFullZmanim(fullZmanim: number) If set to 1, displays an extended list of Zmanim. 1 / 0
setLocation(lat: number, lng: number) Sets the latitude and longitude coordinates for the widget. Example: 41.34, -74.168
set24H(is24: boolean) Determines the time format, either 24-hour (23:00) or 12-hour (11:00 PM). true/false
setShowSecond(isShowSecond: boolean) Controls whether to display seconds in the time format (e.g., 12:00 vs. 12:00:00). true/false
fetchData() Fetches an updated list of Zmanim times from the server.
isData() Returns true if the widget is currently displaying the Zmanim list, and false if the preset list is being displayed.
reset() Resets the widget to its default state.

How to Use with React

The Zmanim can be wrapped in a React component and used in your project:

import { ZmanimWidget } from 'bundle.esm.js';

export const ZmanimWrapper = ({date, direction = 'rtl' })=> {
   const calendarRef = useRef(null);
   const calendarInstanceRef = useRef(null);

   useEffect(()=> {
      if (!calendarRef.current) {
         return
      }

      // Initialize the calendar component
      if (!calendarInstanceRef.current) {
         calendarInstanceRef.current = new ZmanimWidget({
            container: calendarRef.current,
            date: date,
            lang: direction === 'rtl' ?  'Hebrew' : 'English',
         });
      } else {
         // Update based on the current state of the site
         calendarInstanceRef.current.setDirection(direction);
         calendarInstanceRef.current.setLang(direction === 'rtl' ? 'Hebrew' : 'English');

         if (calendarInstanceRef.current.isData()) {
            calendarInstanceRef.current.setDate(date);
            calendarInstanceRef.current.fetchData();
         }
      }
   }, [direction, date])

   return <div ref={calendarRef}></div>
};

                

How to Use the Zmanim Widget with Calendar in React

The Zmanim widget can be easily integrated with a Calendar widget in React using the following code:


export const App = ()=> {
   const [dateState, setDateState] = useState(null);

   return  <>
      <CalendarWrapper onChange={setDateState} />
      <ZmanimWrapper date={dateState?.formats?.dateShort} />
   </>
};

                

How to Change Styles

You can modify the styles using CSS.

This can be achieved using the following code:


<!-- Just add a class to your div -->
<div id="zmanim-will-init-by-the-id" class="custom-style"></div>

<style>
.custom-style .zmanim {
  width: 100%;
}
</style>
  

How to install Yuhrzeit Widget

Follow the steps below to set up the Yuhrzeit Widget on your site:

  1. To install the Yuhrzeit Widget, you have two options:
    • Download the package and include it in your project:
      link to download
    • Or use the links for the specific type of bundle you want to use.
  2. Connect the main files of the calendar to your website:
    For ESM:
    Javascript: import { YahrzeitWidget } from 'path/bundle.esm.js';
    CSS: import 'path/bundle.esm.css';
    For UMD:
    Javascript: url/bundle.umd.js
    CSS: url/bundle.umd.css
  3. You are good to go for adding the calendar to your website!

How to use Yahrzeit Widget

The Yahrzeit Widget can be created in the following way:


// For ECMAScript Modules (ESM), place the code inside a <script type="module"> block.
    import { YahrzeitWidget } from 'bundle.esm.js';
// For UMD (Universal Module Definition) - almost the same, except that we should use the Yahrzeit object, which will be in the window after adding <script src="bundle.umd.js"></script>.
    const { YahrzeitWidget }= window.Zmanim;

     const yahrzeitInstance = new YahrzeitWidget({
           container: document.querySelector('#yzBlock')
     });
                

Options:

Property Features Available values
container DOM element where the component will be built. document.querySelector('#zmanimBlock')
date Preset the date using the "m/d/yyyy" format. m/d/yyyy
direction Specifies the widget's text direction (automatically based on language if not set) ltr | rtl
lang Specifies the language used in the calendar Hebrew | English
herbDay Specifies a herb date. Default value is '-1'.

Methods:

Property Features Available values
setDate(date: string) Sets a specific date for the widget in the format m/d/yyyy. m/d/yyyy
setDirection(direction: LanguageDirectionType) Sets the text direction of the widget's content. rtl | ltr
setLang(lang: LanguageName) Specifies the language used in the widget. Hebrew | English
setHerbDay(herbDay: string) Specifies a herb date. Default value is '-1'.
fetchData() Fetches an updated list of Yahrzeit times from the server.

How to Use with React

The Yuhrzeit can be wrapped in a React component and used in your project:

import { YuhrzeitWidget } from 'bundle.esm.js';

export const YuhrzeitWrapper = ({date, direction = 'rtl' })=> {
   const calendarRef = useRef(null);
   const calendarInstanceRef = useRef(null);

   useEffect(()=> {
      if (!calendarRef.current) {
         return
      }

      // Initialize the calendar component
      if (!calendarInstanceRef.current) {
         calendarInstanceRef.current = new YuhrzeitWidget({
            container: calendarRef.current,
            date: date,
            lang: direction === 'rtl' ?  'Hebrew' : 'English',
         });
      } else {
         // Update based on the current state of the site
         calendarInstanceRef.current.setDate(date);
         calendarInstanceRef.current.setDirection(direction);
         calendarInstanceRef.current.setLang(direction === 'rtl' ? 'Hebrew' : 'English');
         calendarInstanceRef.current.fetchData();
      }
   }, [direction, date])

   return <div ref={calendarRef}></div>
};

                

How to Use the Yahrzeit Widget with Calendar in React

The Yahrzeit widget can be easily integrated with a Calendar widget in React using the following code:


export const App = ()=> {
   const [dateState, setDateState] = useState(null);

   return  <>
      <CalendarWrapper onChange={setDateState} />
      <YahrzeitWrapper date={dateState?.formats?.dateShort} />
   </>
};

                

How to Change Styles

You can modify the styles using CSS.

This can be achieved using the following code:


<!-- Just add a class to your div -->
<div id="zmanim-will-init-by-the-id" class="custom-style"></div>

<style>
.custom-style .yz {
  width: 100%;
}
</style>
  

How to install Selected date Widget

Follow the steps below to set up the Selected date Widget on your site:

  1. To install the Yuhrzeit Widget, you have two options:
    • Download the package and include it in your project:
      link to download
    • Or use the links for the specific type of bundle you want to use.
  2. Connect the main files of the calendar to your website:
    For ESM:
    Javascript: import { DateSelectedWidget } from 'path/bundle.esm.js';
    CSS: import 'path/bundle.esm.css';
    For UMD:
    Javascript: url/bundle.umd.js
    CSS: url/bundle.umd.css
  3. You are good to go for adding the calendar to your website!

How to use Selected date Widget

The Selected date Widget can be created in the following way:


// For ECMAScript Modules (ESM), place the code inside a <script type="module"> block.
    import { DateSelectedWidget } from 'bundle.esm.js';
// For UMD (Universal Module Definition) - almost the same, except that we should use the Yahrzeit object, which will be in the window after adding <script src="bundle.umd.js"></script>.
    const { DateSelectedWidget }= window.DateSelectedWidget;

    const dateSelectedInstance = new DateSelectedWidget({
       container: document.querySelector('#selectedBlock'),
       selectedDay: selectedDay
    });
                

Options:

Property Features Available values
container DOM element where the component will be built. document.querySelector('#zmanimBlock')
direction Specifies the widget's text direction (automatically based on language if not set) ltr | rtl
lang Specifies the language used in the calendar Hebrew | English
selectedDay Represents the day selected by the user in the calendar widget; received from the `onChange` response
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    

Methods:

Property Features Available values
setDay(day: ISelectedDay) Sets a specific date for the widget in the format m/d/yyyy.
                        
{
  "parsheWeek": "נצו\"י",
  "dayTitle": "9/6/2023",
  "dayType": 0,
  "currentMonth": true,
  "formats": {
    "curentHerbDay": "20",
    "dataHerbHebrewdate": "Elul 20 5783",
    "dataHerbParsheday": "ד' נצו\"י תשפג",
    "dataHerbYiddishdate": "כ אלול תשפג",
    "dateLong": "Wednesday, September 6, 2023",
    "dateShort": "9/6/2023",
    "herbDate": "כ אלול תשפג",
    "txtHday": "כ",
    "txtHMonth": "אלול",
    "txtHYear": "תשפג"
  }
}
                        
                    
setDirection(direction: LanguageDirectionType) Sets the text direction of the widget's content. rtl | ltr
setLang(lang: LanguageName) Specifies the language used in the widget. Hebrew | English
reset() Resets the widget to its default state.
update() Re-renders the component if data has been updated.

How to Use Selected date Widget with React

The Selected date Widget can be wrapped in a React component and used in your project:

import { DateSelectedWidget } from 'bundle.esm.js';

export const SelectedDateWrapper = ({selectedDay, direction = 'rtl' })=> {
   const calendarRef = useRef(null);
   const calendarInstanceRef = useRef(null);

   useEffect(()=> {
      if (!calendarRef.current) {
         return
      }

      // Initialize the calendar component
      if (!calendarInstanceRef.current) {
         calendarInstanceRef.current = new DateSelectedWidget({
            container: calendarRef.current,
            selectedDay: selectedDay,
            lang: direction === 'rtl' ?  'Hebrew' : 'English',
         });
      } else {
         // Update based on the current state of the site
         calendarInstanceRef.current.setDay(selectedDay);
         calendarInstanceRef.current.setDirection(direction);
         calendarInstanceRef.current.setLang(direction === 'rtl' ? 'Hebrew' : 'English');
         calendarInstanceRef.current.update();
      }
   }, [direction, date])

   return <div ref={calendarRef}></div>
};

                

How to Use the Selected date Widget with Calendar in React

The Selected date Widget can be easily integrated with a Calendar widget in React using the following code:


export const App = ()=> {
   const [dateState, setDateState] = useState(null);

   return  <>
      <CalendarWrapper onChange={setDateState} />
      <SelectedDateWrapper selectedDay={dateState} />
   </>
};

                

How to Change Styles

You can modify the styles using CSS.

This can be achieved using the following code:


<!-- Just add a class to your div -->
<div id="selected-date-will-init-by-the-id" class="custom-style"></div>

<style>
.custom-style .view-box-wrapper {
  width: 100%;
  max-width: unset;
}
</style>
  

Calendar Widget API

URL

https://calendar.jewishluach.com/api/Calendar/GetCalendarWidgetData

Parameters:

Property Features Available values
date The target date using the "m/d/yyyy" format. m/d/yyyy
calendarType Specifies the type of calendar 0 for Jewish | 1 for Gregorian
language Specifies the language used in the calendar Hebrew | English
herb_day Specifies a herb date. Default value is '-1'.

Example:

async function fetchExample() {
  const response = await fetch("https://calendar.jewishluach.com/api/Calendar/GetCalendarWidgetData?date=9/11/2023&calendarType=1&language=English&herb_day=-1");
  const data = JSON.parse(await response.json());
  console.log(data);
}

fetchExample();

// Response
{
  "previousYear": "9/11/2022",
  "nextYear": "9/11/2024",
  "previousMonth": "8/11/2023",
  "nextMonth": "10/11/2023",
  "listOfYears": [
    {
      "label": "2013",
      "value": "9/11/2013",
      "selected": false
    },
    {
      "label": "2014",
      "value": "9/11/2014",
      "selected": false
    },
    {
      "label": "2015",
      "value": "9/11/2015",
      "selected": false
    },
    {
      "label": "2016",
      "value": "9/11/2016",
      "selected": false
    },
    {
      "label": "2017",
      "value": "9/11/2017",
      "selected": false
    },
    {
      "label": "2018",
      "value": "9/11/2018",
      "selected": false
    },
    {
      "label": "2019",
      "value": "9/11/2019",
      "selected": false
    },
    {
      "label": "2020",
      "value": "9/11/2020",
      "selected": false
    },
    {
      "label": "2021",
      "value": "9/11/2021",
      "selected": false
    },
    {
      "label": "2022",
      "value": "9/11/2022",
      "selected": false
    },
    {
      "label": "2023",
      "value": "9/11/2023",
      "selected": true
    },
    {
      "label": "2024",
      "value": "9/11/2024",
      "selected": false
    },
    {
      "label": "2025",
      "value": "9/11/2025",
      "selected": false
    },
    {
      "label": "2026",
      "value": "9/11/2026",
      "selected": false
    },
    {
      "label": "2027",
      "value": "9/11/2027",
      "selected": false
    },
    {
      "label": "2028",
      "value": "9/11/2028",
      "selected": false
    },
    {
      "label": "2029",
      "value": "9/11/2029",
      "selected": false
    },
    {
      "label": "2030",
      "value": "9/11/2030",
      "selected": false
    },
    {
      "label": "2031",
      "value": "9/11/2031",
      "selected": false
    },
    {
      "label": "2032",
      "value": "9/11/2032",
      "selected": false
    }
  ],
  "listOfMonths": [
    {
      "label": "January",
      "value": "1/11/2023",
      "selected": false
    },
    {
      "label": "February",
      "value": "2/11/2023",
      "selected": false
    },
    {
      "label": "March",
      "value": "3/11/2023",
      "selected": false
    },
    {
      "label": "April",
      "value": "4/11/2023",
      "selected": false
    },
    {
      "label": "May",
      "value": "5/11/2023",
      "selected": false
    },
    {
      "label": "June",
      "value": "6/11/2023",
      "selected": false
    },
    {
      "label": "July",
      "value": "7/11/2023",
      "selected": false
    },
    {
      "label": "August",
      "value": "8/11/2023",
      "selected": false
    },
    {
      "label": "September",
      "value": "9/11/2023",
      "selected": true
    },
    {
      "label": "October",
      "value": "10/11/2023",
      "selected": false
    },
    {
      "label": "November",
      "value": "11/11/2023",
      "selected": false
    },
    {
      "label": "December",
      "value": "12/11/2023",
      "selected": false
    }
  ],
  "daysOfWeek": [
    "Su",
    "Mo",
    "Tu",
    "We",
    "Th",
    "Fr",
    "Sat"
  ],
  "listOfWeeks": [
    {
      "title": "Suvoi",
      "days": [
        {
          "parsheWeek": "תבא",
          "dayTitle": "8/27/2023",
          "dayLabel": "27",
          "dayType": 0,
          "currentMonth": false,
          "extraDate": {
            "bottomContent": [
              "פרשת תבא",
              "Ends: 8:48 PM"
            ],
            "leftBottomCorner": "י",
            "rightBottomCorner": "10"
          },
          "formats": {
            "curentHerbDay": "10",
            "dataHerbHebrewdate": "Elul 10 5783",
            "dataHerbParsheday": "א' תבא תשפג",
            "dataHerbYiddishdate": "י אלול תשפג",
            "dateLong": "Sunday, August 27, 2023",
            "dateShort": "8/27/2023",
            "herbDate": "י אלול תשפג",
            "txtHday": "י",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "תבא",
          "dayTitle": "8/28/2023",
          "dayLabel": "28",
          "dayType": 0,
          "currentMonth": false,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יא",
            "rightBottomCorner": "11"
          },
          "formats": {
            "curentHerbDay": "11",
            "dataHerbHebrewdate": "Elul 11 5783",
            "dataHerbParsheday": "ב' תבא תשפג",
            "dataHerbYiddishdate": "יא אלול תשפג",
            "dateLong": "Monday, August 28, 2023",
            "dateShort": "8/28/2023",
            "herbDate": "יא אלול תשפג",
            "txtHday": "יא",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "תבא",
          "dayTitle": "8/29/2023",
          "dayLabel": "29",
          "dayType": 0,
          "currentMonth": false,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יב",
            "rightBottomCorner": "12"
          },
          "formats": {
            "curentHerbDay": "12",
            "dataHerbHebrewdate": "Elul 12 5783",
            "dataHerbParsheday": "ג' תבא תשפג",
            "dataHerbYiddishdate": "יב אלול תשפג",
            "dateLong": "Tuesday, August 29, 2023",
            "dateShort": "8/29/2023",
            "herbDate": "יב אלול תשפג",
            "txtHday": "יב",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "תבא",
          "dayTitle": "8/30/2023",
          "dayLabel": "30",
          "dayType": 0,
          "currentMonth": false,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יג",
            "rightBottomCorner": "13"
          },
          "formats": {
            "curentHerbDay": "13",
            "dataHerbHebrewdate": "Elul 13 5783",
            "dataHerbParsheday": "ד' תבא תשפג",
            "dataHerbYiddishdate": "יג אלול תשפג",
            "dateLong": "Wednesday, August 30, 2023",
            "dateShort": "8/30/2023",
            "herbDate": "יג אלול תשפג",
            "txtHday": "יג",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "תבא",
          "dayTitle": "8/31/2023",
          "dayLabel": "31",
          "dayType": 0,
          "currentMonth": false,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יד",
            "rightBottomCorner": "14"
          },
          "formats": {
            "curentHerbDay": "14",
            "dataHerbHebrewdate": "Elul 14 5783",
            "dataHerbParsheday": "ה' תבא תשפג",
            "dataHerbYiddishdate": "יד אלול תשפג",
            "dateLong": "Thursday, August 31, 2023",
            "dateShort": "8/31/2023",
            "herbDate": "יד אלול תשפג",
            "txtHday": "יד",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "תבא",
          "dayTitle": "9/1/2023",
          "dayLabel": "1",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "טו",
            "rightBottomCorner": "15"
          },
          "formats": {
            "curentHerbDay": "15",
            "dataHerbHebrewdate": "Elul 15 5783",
            "dataHerbParsheday": "עש\"ק תבא תשפג",
            "dataHerbYiddishdate": "טו אלול תשפג",
            "dateLong": "Friday, September 1, 2023",
            "dateShort": "9/1/2023",
            "herbDate": "טו אלול תשפג",
            "txtHday": "טו",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "תבא",
          "dayTitle": "9/2/2023",
          "dayLabel": "2",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "Candles: 7:12 PM"
            ],
            "leftBottomCorner": "טז",
            "rightBottomCorner": "16"
          },
          "formats": {
            "curentHerbDay": "16",
            "dataHerbHebrewdate": "Elul 16 5783",
            "dataHerbParsheday": "שב\"ק תבא תשפג",
            "dataHerbYiddishdate": "טז אלול תשפג",
            "dateLong": "Saturday, September 2, 2023",
            "dateShort": "9/2/2023",
            "herbDate": "טז אלול תשפג",
            "txtHday": "טז",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        }
      ]
    },
    {
      "title": "Ntzv\"y",
      "days": [
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/3/2023",
          "dayLabel": "3",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "פרשת נצו\"י",
              "Ends: 8:37 PM"
            ],
            "leftBottomCorner": "יז",
            "rightBottomCorner": "17"
          },
          "formats": {
            "curentHerbDay": "17",
            "dataHerbHebrewdate": "Elul 17 5783",
            "dataHerbParsheday": "א' נצו\"י תשפג",
            "dataHerbYiddishdate": "יז אלול תשפג",
            "dateLong": "Sunday, September 3, 2023",
            "dateShort": "9/3/2023",
            "herbDate": "יז אלול תשפג",
            "txtHday": "יז",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/4/2023",
          "dayLabel": "4",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יח",
            "rightBottomCorner": "18"
          },
          "formats": {
            "curentHerbDay": "18",
            "dataHerbHebrewdate": "Elul 18 5783",
            "dataHerbParsheday": "ב' נצו\"י תשפג",
            "dataHerbYiddishdate": "יח אלול תשפג",
            "dateLong": "Monday, September 4, 2023",
            "dateShort": "9/4/2023",
            "herbDate": "יח אלול תשפג",
            "txtHday": "יח",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/5/2023",
          "dayLabel": "5",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יט",
            "rightBottomCorner": "19"
          },
          "formats": {
            "curentHerbDay": "19",
            "dataHerbHebrewdate": "Elul 19 5783",
            "dataHerbParsheday": "ג' נצו\"י תשפג",
            "dataHerbYiddishdate": "יט אלול תשפג",
            "dateLong": "Tuesday, September 5, 2023",
            "dateShort": "9/5/2023",
            "herbDate": "יט אלול תשפג",
            "txtHday": "יט",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/6/2023",
          "dayLabel": "6",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כ",
            "rightBottomCorner": "20"
          },
          "formats": {
            "curentHerbDay": "20",
            "dataHerbHebrewdate": "Elul 20 5783",
            "dataHerbParsheday": "ד' נצו\"י תשפג",
            "dataHerbYiddishdate": "כ אלול תשפג",
            "dateLong": "Wednesday, September 6, 2023",
            "dateShort": "9/6/2023",
            "herbDate": "כ אלול תשפג",
            "txtHday": "כ",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/7/2023",
          "dayLabel": "7",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כא",
            "rightBottomCorner": "21"
          },
          "formats": {
            "curentHerbDay": "21",
            "dataHerbHebrewdate": "Elul 21 5783",
            "dataHerbParsheday": "ה' נצו\"י תשפג",
            "dataHerbYiddishdate": "כא אלול תשפג",
            "dateLong": "Thursday, September 7, 2023",
            "dateShort": "9/7/2023",
            "herbDate": "כא אלול תשפג",
            "txtHday": "כא",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/8/2023",
          "dayLabel": "8",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כב",
            "rightBottomCorner": "22"
          },
          "formats": {
            "curentHerbDay": "22",
            "dataHerbHebrewdate": "Elul 22 5783",
            "dataHerbParsheday": "עש\"ק נצו\"י תשפג",
            "dataHerbYiddishdate": "כב אלול תשפג",
            "dateLong": "Friday, September 8, 2023",
            "dateShort": "9/8/2023",
            "herbDate": "כב אלול תשפג",
            "txtHday": "כב",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "נצו\"י",
          "dayTitle": "9/9/2023",
          "dayLabel": "9",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "Candles: 7:00 PM"
            ],
            "leftBottomCorner": "כג",
            "rightBottomCorner": "23"
          },
          "formats": {
            "curentHerbDay": "23",
            "dataHerbHebrewdate": "Elul 23 5783",
            "dataHerbParsheday": "שב\"ק נצו\"י תשפג",
            "dataHerbYiddishdate": "כג אלול תשפג",
            "dateLong": "Saturday, September 9, 2023",
            "dateShort": "9/9/2023",
            "herbDate": "כג אלול תשפג",
            "txtHday": "כג",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        }
      ]
    },
    {
      "title": "Hazini A",
      "days": [
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/10/2023",
          "dayLabel": "10",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "פרשת האזינו א",
              "Ends: 8:26 PM"
            ],
            "leftBottomCorner": "כד",
            "rightBottomCorner": "24"
          },
          "formats": {
            "curentHerbDay": "24",
            "dataHerbHebrewdate": "Elul 24 5783",
            "dataHerbParsheday": "א' האזינו א, א' סליחות תשפג",
            "dataHerbYiddishdate": "כד אלול תשפג",
            "dateLong": "Sunday, September 10, 2023",
            "dateShort": "9/10/2023",
            "herbDate": "כד אלול תשפג",
            "txtHday": "כד",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/11/2023",
          "dayLabel": "11",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כה",
            "rightBottomCorner": "25"
          },
          "formats": {
            "curentHerbDay": "25",
            "dataHerbHebrewdate": "Elul 25 5783",
            "dataHerbParsheday": "ב' האזינו א תשפג",
            "dataHerbYiddishdate": "כה אלול תשפג",
            "dateLong": "Monday, September 11, 2023",
            "dateShort": "9/11/2023",
            "herbDate": "כה אלול תשפג",
            "txtHday": "כה",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/12/2023",
          "dayLabel": "12",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כו",
            "rightBottomCorner": "26"
          },
          "formats": {
            "curentHerbDay": "26",
            "dataHerbHebrewdate": "Elul 26 5783",
            "dataHerbParsheday": "ג' האזינו א תשפג",
            "dataHerbYiddishdate": "כו אלול תשפג",
            "dateLong": "Tuesday, September 12, 2023",
            "dateShort": "9/12/2023",
            "herbDate": "כו אלול תשפג",
            "txtHday": "כו",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/13/2023",
          "dayLabel": "13",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כז",
            "rightBottomCorner": "27"
          },
          "formats": {
            "curentHerbDay": "27",
            "dataHerbHebrewdate": "Elul 27 5783",
            "dataHerbParsheday": "ד' האזינו א תשפג",
            "dataHerbYiddishdate": "כז אלול תשפג",
            "dateLong": "Wednesday, September 13, 2023",
            "dateShort": "9/13/2023",
            "herbDate": "כז אלול תשפג",
            "txtHday": "כז",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/14/2023",
          "dayLabel": "14",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כח",
            "rightBottomCorner": "28"
          },
          "formats": {
            "curentHerbDay": "28",
            "dataHerbHebrewdate": "Elul 28 5783",
            "dataHerbParsheday": "ה' האזינו א תשפג",
            "dataHerbYiddishdate": "כח אלול תשפג",
            "dateLong": "Thursday, September 14, 2023",
            "dateShort": "9/14/2023",
            "herbDate": "כח אלול תשפג",
            "txtHday": "כח",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/15/2023",
          "dayLabel": "15",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "כט",
            "rightBottomCorner": "29"
          },
          "formats": {
            "curentHerbDay": "29",
            "dataHerbHebrewdate": "Elul 29 5783",
            "dataHerbParsheday": "עש\"ק האזינו א, ערב ראש השנה תשפג",
            "dataHerbYiddishdate": "כט אלול תשפג",
            "dateLong": "Friday, September 15, 2023",
            "dateShort": "9/15/2023",
            "herbDate": "כט אלול תשפג",
            "txtHday": "כט",
            "txtHMonth": "אלול",
            "txtHYear": "תשפג"
          }
        },
        {
          "parsheWeek": "האזינו א",
          "dayTitle": "9/16/2023",
          "dayLabel": "16",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "Candles: 6:48 PM"
            ],
            "leftBottomCorner": "א",
            "rightBottomCorner": "1"
          },
          "formats": {
            "curentHerbDay": "1",
            "dataHerbHebrewdate": "Tishrei 1 5784",
            "dataHerbParsheday": "שב\"ק האזינו א, א' דראש השנה תשפד",
            "dataHerbYiddishdate": "א תשרי תשפד",
            "dateLong": "Saturday, September 16, 2023",
            "dateShort": "9/16/2023",
            "herbDate": "א תשרי תשפד",
            "txtHday": "א",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        }
      ]
    },
    {
      "title": "Hazini B",
      "days": [
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/17/2023",
          "dayLabel": "17",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "פרשת האזינו ב",
              "Ends: 8:14 PM"
            ],
            "leftBottomCorner": "ב",
            "rightBottomCorner": "2"
          },
          "formats": {
            "curentHerbDay": "2",
            "dataHerbHebrewdate": "Tishrei 2 5784",
            "dataHerbParsheday": "א' האזינו ב, ב' דראש השנה תשפד",
            "dataHerbYiddishdate": "ב תשרי תשפד",
            "dateLong": "Sunday, September 17, 2023",
            "dateShort": "9/17/2023",
            "herbDate": "ב תשרי תשפד",
            "txtHday": "ב",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/18/2023",
          "dayLabel": "18",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "ג",
            "rightBottomCorner": "3"
          },
          "formats": {
            "curentHerbDay": "3",
            "dataHerbHebrewdate": "Tishrei 3 5784",
            "dataHerbParsheday": "ב' האזינו ב, צום גדלי' תשפד",
            "dataHerbYiddishdate": "ג תשרי תשפד",
            "dateLong": "Monday, September 18, 2023",
            "dateShort": "9/18/2023",
            "herbDate": "ג תשרי תשפד",
            "txtHday": "ג",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/19/2023",
          "dayLabel": "19",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "ד",
            "rightBottomCorner": "4"
          },
          "formats": {
            "curentHerbDay": "4",
            "dataHerbHebrewdate": "Tishrei 4 5784",
            "dataHerbParsheday": "ג' האזינו ב תשפד",
            "dataHerbYiddishdate": "ד תשרי תשפד",
            "dateLong": "Tuesday, September 19, 2023",
            "dateShort": "9/19/2023",
            "herbDate": "ד תשרי תשפד",
            "txtHday": "ד",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/20/2023",
          "dayLabel": "20",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "ה",
            "rightBottomCorner": "5"
          },
          "formats": {
            "curentHerbDay": "5",
            "dataHerbHebrewdate": "Tishrei 5 5784",
            "dataHerbParsheday": "ד' האזינו ב תשפד",
            "dataHerbYiddishdate": "ה תשרי תשפד",
            "dateLong": "Wednesday, September 20, 2023",
            "dateShort": "9/20/2023",
            "herbDate": "ה תשרי תשפד",
            "txtHday": "ה",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/21/2023",
          "dayLabel": "21",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "ו",
            "rightBottomCorner": "6"
          },
          "formats": {
            "curentHerbDay": "6",
            "dataHerbHebrewdate": "Tishrei 6 5784",
            "dataHerbParsheday": "ה' האזינו ב תשפד",
            "dataHerbYiddishdate": "ו תשרי תשפד",
            "dateLong": "Thursday, September 21, 2023",
            "dateShort": "9/21/2023",
            "herbDate": "ו תשרי תשפד",
            "txtHday": "ו",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/22/2023",
          "dayLabel": "22",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "ז",
            "rightBottomCorner": "7"
          },
          "formats": {
            "curentHerbDay": "7",
            "dataHerbHebrewdate": "Tishrei 7 5784",
            "dataHerbParsheday": "עש\"ק האזינו ב תשפד",
            "dataHerbYiddishdate": "ז תשרי תשפד",
            "dateLong": "Friday, September 22, 2023",
            "dateShort": "9/22/2023",
            "herbDate": "ז תשרי תשפד",
            "txtHday": "ז",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "האזינו ב",
          "dayTitle": "9/23/2023",
          "dayLabel": "23",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "Candles: 6:37 PM"
            ],
            "leftBottomCorner": "ח",
            "rightBottomCorner": "8"
          },
          "formats": {
            "curentHerbDay": "8",
            "dataHerbHebrewdate": "Tishrei 8 5784",
            "dataHerbParsheday": "שב\"ק האזינו ב תשפד",
            "dataHerbYiddishdate": "ח תשרי תשפד",
            "dateLong": "Saturday, September 23, 2023",
            "dateShort": "9/23/2023",
            "herbDate": "ח תשרי תשפד",
            "txtHday": "ח",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        }
      ]
    },
    {
      "title": "Vzos Habruchu A",
      "days": [
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/24/2023",
          "dayLabel": "24",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "פרשת וזאת הברכה א",
              "Ends: 8:02 PM"
            ],
            "leftBottomCorner": "ט",
            "rightBottomCorner": "9"
          },
          "formats": {
            "curentHerbDay": "9",
            "dataHerbHebrewdate": "Tishrei 9 5784",
            "dataHerbParsheday": "א' וזאת הברכה א, ערב יום כפור תשפד",
            "dataHerbYiddishdate": "ט תשרי תשפד",
            "dateLong": "Sunday, September 24, 2023",
            "dateShort": "9/24/2023",
            "herbDate": "ט תשרי תשפד",
            "txtHday": "ט",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/25/2023",
          "dayLabel": "25",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "י",
            "rightBottomCorner": "10"
          },
          "formats": {
            "curentHerbDay": "10",
            "dataHerbHebrewdate": "Tishrei 10 5784",
            "dataHerbParsheday": "ב' וזאת הברכה א, יום כפור תשפד",
            "dataHerbYiddishdate": "י תשרי תשפד",
            "dateLong": "Monday, September 25, 2023",
            "dateShort": "9/25/2023",
            "herbDate": "י תשרי תשפד",
            "txtHday": "י",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/26/2023",
          "dayLabel": "26",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יא",
            "rightBottomCorner": "11"
          },
          "formats": {
            "curentHerbDay": "11",
            "dataHerbHebrewdate": "Tishrei 11 5784",
            "dataHerbParsheday": "ג' וזאת הברכה א תשפד",
            "dataHerbYiddishdate": "יא תשרי תשפד",
            "dateLong": "Tuesday, September 26, 2023",
            "dateShort": "9/26/2023",
            "herbDate": "יא תשרי תשפד",
            "txtHday": "יא",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/27/2023",
          "dayLabel": "27",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יב",
            "rightBottomCorner": "12"
          },
          "formats": {
            "curentHerbDay": "12",
            "dataHerbHebrewdate": "Tishrei 12 5784",
            "dataHerbParsheday": "ד' וזאת הברכה א תשפד",
            "dataHerbYiddishdate": "יב תשרי תשפד",
            "dateLong": "Wednesday, September 27, 2023",
            "dateShort": "9/27/2023",
            "herbDate": "יב תשרי תשפד",
            "txtHday": "יב",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/28/2023",
          "dayLabel": "28",
          "dayType": 0,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יג",
            "rightBottomCorner": "13"
          },
          "formats": {
            "curentHerbDay": "13",
            "dataHerbHebrewdate": "Tishrei 13 5784",
            "dataHerbParsheday": "ה' וזאת הברכה א תשפד",
            "dataHerbYiddishdate": "יג תשרי תשפד",
            "dateLong": "Thursday, September 28, 2023",
            "dateShort": "9/28/2023",
            "herbDate": "יג תשרי תשפד",
            "txtHday": "יג",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/29/2023",
          "dayLabel": "29",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [],
            "leftBottomCorner": "יד",
            "rightBottomCorner": "14"
          },
          "formats": {
            "curentHerbDay": "14",
            "dataHerbHebrewdate": "Tishrei 14 5784",
            "dataHerbParsheday": "עש\"ק וזאת הברכה א, ערב סוכות תשפד",
            "dataHerbYiddishdate": "יד תשרי תשפד",
            "dateLong": "Friday, September 29, 2023",
            "dateShort": "9/29/2023",
            "herbDate": "יד תשרי תשפד",
            "txtHday": "יד",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        },
        {
          "parsheWeek": "וזאת הברכה א",
          "dayTitle": "9/30/2023",
          "dayLabel": "30",
          "dayType": 1,
          "currentMonth": true,
          "extraDate": {
            "bottomContent": [
              "Candles: 6:25 PM"
            ],
            "leftBottomCorner": "טו",
            "rightBottomCorner": "15"
          },
          "formats": {
            "curentHerbDay": "15",
            "dataHerbHebrewdate": "Tishrei 15 5784",
            "dataHerbParsheday": "שב\"ק וזאת הברכה א, א' דסוכות תשפד",
            "dataHerbYiddishdate": "טו תשרי תשפד",
            "dateLong": "Saturday, September 30, 2023",
            "dateShort": "9/30/2023",
            "herbDate": "טו תשרי תשפד",
            "txtHday": "טו",
            "txtHMonth": "תשרי",
            "txtHYear": "תשפד"
          }
        }
      ]
    }
  ],
  "molad": {
    "time": "8/16/2023",
    "cheilek": 17,
    "moladText": "גייט זיין מיטוואך 3:41 PM מיט 17 חלקים"
  }
}
                

Zmanim Widget

URL

https://calendar.jewishluach.com/api/Zmanim/GetZmanimWidgetData

Parameters:

Property Features Available values
date The target date using the "m/d/yyyy" format. m/d/yyyy
lang Specifies the language used in the calendar Hebrew | English
lat Specifies the default latitude. Float number, e.g., 41.34
lng Specifies the default longitude. Float number, e.g., -74.168
fullzmanim If set to 1, displays an extended list of Zmanim. 1 / 0

Example:

async function fetchExample() {
  const response = await fetch("https://calendar.jewishluach.com/api/Zmanim/GetZmanimWidgetData?date=9/11/2023&lang=English&lat=41.34099884262814&lng=-74.1677854232788&fullzmanim=0");
  const data = await response.json();
  console.log(data);
}

fetchExample();

// Response
[
  {
      title: "Alot",
      caption: "",
      time: "5:21:18 AM",
  },
  {
      title: "Erliest Talit",
      caption: "",
      time: "5:43:18 AM",
  }
 ...
]
                

Zmanim Widget

URL

https://calendar.jewishluach.com/api/Yurtzeit/GetYurtzeitWidgetData

Parameters:

Property Features Available values
date The target date using the "m/d/yyyy" format. m/d/yyyy
language Specifies the language used in the calendar Hebrew | English
herbDay Specifies a herb date. Default value is '-1'.

Example:

async function fetchExample() {
  const response = await fetch("https://calendar.jewishluach.com/api/Yurtzeit/GetYurtzeitWidgetData?date=9/11/2023&herbDay=-1&language=English");
  const data = JSON.parse(await response.json());
  console.log(JSON.stringify(data));
}

fetchExample();

// Response
[
  {
    "md": "כה",
    "month": "אלול",
    "link": "https://www.ivelt.com/forum/viewtopic.php?f=31&t=5613&start=0&st=0&sk=t&sd=a",
    "yurtzeitName": "English התנא רבי אלעזר ברשב\"י, ג' אלפים תתס\"ג, קבור במירון",
    "isImportant": false
  },
  {
    "md": "כה",
    "month": "אלול",
    "link": "https://www.ivelt.com/forum/viewtopic.php?f=31&t=3815",
    "yurtzeitName": "English רבי יחיאל מיכל מזלאטשוב, תקמ\"ו",
    "isImportant": false
  }
]
                

Documentation

Jewish Calendar

Thank you so much for using our Jewish Calendar.


  • Created: October 1, 2010
  • Updated: October 10, 2021

If you have any questions that are beyond the scope of this help file, Please feel free to email.


Installation

Follow the steps below to setup Jewish Calendar on your site:

  1. The main requirement, web site should use jquery version 3.x and jquery ui version 1.12.x You can connect to your site the libraries directly from jquery site: https://code.jquery.com/jquery-3.2.0.min.js
    https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
    https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css
  2. You should connect to your website the main files of calendar
    Javascript: https://dtpicker.jewishluach.com/Scripts/jewishluach.js
    CSS: https://dtpicker.jewishluach.com/Content/calendar/cangas.datepicker.css
  3. You are good to go for adding calendar to your web site!

Dropdown calendar

The calendar can be created as dropdown near button or input box in the following way:

 $("#calendar").jewishluach({
                          hebrewDateLongContainer: ".hebr-date",
                          gregorianDateContainer: ".greg-date-text",
                          yiddishDateContainer: ".yiddish-date",
                          parsheDateContainer: ".parshe-day",
                          hebrewDateContainer: ".hebrew-date",
                          calendarType: $("#calType").val(),
                          date: sdate,
                          hideAfterClick: true,
                          loaded: function () {
                              $("#test").css("display", "block");

                          }
                      });

Options:

Property Features Available values Result of output
hebrewDateLongContainers Output to container the Hebrew Long Date CSS class
טו תשרי תשפב
gregorianDateContainer Output to container the Gregorian Date CSS class
9/21/2021
yiddishDateContainer Output to container the Yiddish Date CSS class
טו תשרי תשפב
parsheDateContainer Output to container the Parshe Date CSS class
ג' וזאת הברכה, א' דסוכות תשפב
hebrewDateContainer Output to container the Hebrew Date CSS class
Tishrei 15 5782
calendarType Type of calendar. Hebrew, English
date Initial date for calendar Date string in format mm/dd/yyyy
hideAfterClick Hide the calendar after selection of date. true/false
loaded Hook after full loading of calendar function

If you need more information, please visit the example site: https://www.jewishluach.com/dtpicker.html


Background calendar

We can use calendar for retrieving the date in diffident format in background without UI

It can be achieved using the flowing code:

 	$("#calendar-hidden").jewishluach({
                      hebrewDateLongContainer: ".hebr-date",
                      gregorianDateContainer: ".greg-date-text",
                      yiddishDateContainer: ".yiddish-date",
                      parsheDateContainer: ".parshe-day",
                      hebrewDateContainer: ".hebrew-date",
                      calendarType: $("#calType").val(),
                      date: sdate,
                      loaded: function (data) {
                          $("#test").css("display", "block");
                          jQuery('.ui-widget-overlay').bind('click', function () {
                              $('#calendar').hide();
                          });
                          $(".greg-date").prop("value", data.date_short);
                      },
                      onlyLoadData: true
                  });
                

The functionality works at the same way as with UI, but in this case date will be transform to diffident format of date and UI won't be shown. The result can be received in loaded hook and all container will be filled by received values.

Options:

Property Features Available values Result of output
onlyLoadData Indicate that should be downloaded only date without using UI true/false
loaded The hook for recieving the data function(data) -
{
                                curent_herb_day, //requested herb date
                                herb_date, 		 //requested herb date
                                date_short, 	 //short gregorian date
                                date_long,       //long gregorian date
                                data_herb_yiddishdate, //yiddish date
                                data_herb_parsheday, //parshe day
                                data_herb_hebrewdate //hebrew date
                            }

Standalone calendar

We can create the static not hidden calendar. We just need to create the same as dropdown just change the hideAfterClick to false and use container as div


Events

Supporter events for calendar

OnChange event

The onchange event can be used in the same way as usual jquery element. The event is fired when the date was selected:

Example of using:

$("#calendar").on("change", (e, data) => {
                      $(".greg-date").prop("value", data.date_short);
                  });
          

FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

Yes, calendar totally free for using.

Source & Credits

Scripts:


Support

If this documentation doesn't answer your questions, So, Please send us Email