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 us.

Installation

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

  1. The main requirement: the website should use jQuery version 3.x and jQuery UI version 1.12.x. You can link the libraries to your site directly from the 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. Add the calendar's main files to your website:
    JavaScript: https://dtpicker.jewishluach.com/Scripts/jewishluach.js
    CSS: https://dtpicker.jewishluach.com/Content/calendar/cangas.datepicker.css
  3. You are good to go — add the calendar to your website!

Dropdown calendar

The calendar can be created as a dropdown next to a 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
hebrewDateLongContainer Output the Hebrew Long Date to the container CSS class 
טו תשרי תשפב
gregorianDateContainer Output the Gregorian Date to the container CSS class 
9/21/2021
yiddishDateContainer Output the Yiddish Date to the container CSS class 
טו תשרי תשפב
parsheDateContainer Output the Parshe Date to the container CSS class 
ג' וזאת הברכה, א' דסוכות תשפב
hebrewDateContainer Output the Hebrew Date to the container 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 a date is selected. true/false
loaded Hook called after the calendar finishes loading function

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

Background calendar

The calendar can be used to retrieve the date in different formats in the background, without UI.

It can be achieved using the following 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 the same way as with UI, but in this case date will be transformed to a different date format and the UI won't be shown. The result can be received in the loaded hook, and all containers will be filled with the received values.

Options:

Property Features Available values Result of output
onlyLoadData Indicates that only the date data should be loaded, without showing the UI true/false
loaded The hook for receiving 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

          
You can create a static (always-visible) calendar. Use the same setup as the dropdown, but change hideAfterClick to false and use a div as the container.
        
        
        
		
        
		

		
		
        

          
Events

          
Supported events for the calendar

        

		
		
        
        

          
OnChange event

          
The onchange event can be used the same way as on any usual jQuery element. The event is fired when a date is selected:
                  
          
Example:
          
          
$("#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, the calendar is completely free to use.

                

              

              

                
                

                  
 MIT

                

              
                
              

            

          

        

          
        
        
		

        
        
        

          
Source & Credits

          
Scripts:

          
        

        
		

		
		
        

          
Support

          
If this documentation doesn't answer your questions, please send us an email.