BadiDateToday script

Purpose

To show the current date from the Badí' calendar.

Designed as a single file to be incorporated into any website.
The date shown is calculated in the browser, using the browser's current date and location.
Please note, this does not calculate or show Holy Days for the Baha'i Faith.
For more advanced scripts and tools, see https://sites.google.com/site/badicalendartools/
This is free to use on any website.

Sample

Here is a sample from Susan Gammage's (old) website, showing the date in two formats:

Usage

Minimum Requirements

1. Identify an element where the Badí' date will be displayed

1. <span class=BadiDate></span>

Add the class "BadiDate" to any element where the date should be displayed.

2. Include this script element in your web page

1. <script type="text/javascript" src="https://wondrous-badi.today/scripts/BadiDateToday.v1.js"></script>

The JS script file can be used from this location.
Or, you may copy it to your own server, and use it from there. If you do, please email Glen Little at glen.little@gmail.com so that you can be informed if the script is updated.
- JQuery is not required for the script to run but is required to do the automatic display with the "BadiDate" class.

Customizing the Badí' date display

The above steps will display today's date in the Badí' calendar using a default format and content.

This display can be customized in many ways.

Make a function to receive the date information

When the page loads, the script can be told to run a JavaScript function to show the date.
1. 1. 1. <script>
    2. BadiDateToday({ onReady: showInfo });
    3. </script>

This script element must come after the one that loads the "js" file.
The "showInfo" function that you write will be given an object with details about today's date in the Badí' calendar.
A simple formatting method is included with the script, called "filledWith". Here is an example of how it can be used:

1. 1. 1. function showInfo(dayInfo){
    2. console.log('{bDay} {bMonthMeaning} ({bMonthNameAr}) {bYear}'.filledWith(dayInfo));
    3. }

This would result in something like "7 Words (Kalimát) 172" being shown in the browser's console.
In this function, you can do anything with the date information. If you use jQuery, you could display date information in various locations on your page, like these examples:

1. 1. 1. function showInfo(di){
    2. $('#badiDayMonth').text(di.bDay + ' ' + di.bMonthMeaning);
    3. $('#badiYear').text(di.bYear);
    4. $('.DayInfo').html('{bYear}-{bMonth}-{bDay} {nearestSunset}'.filledWith(di));
    5. }

Optional Settings

1. 1. 1. var myVariable = BadiDateToday({
    2. language: 'fr',
    3. onReady: showInfo
    4. });

The Settings object passed to BadiDateToday can include:

onReady - a function that is called when the date is determined. One parameter is passed.

language - 'en' or one of the languages defined in _messages (see Translation below)

locationIdentification - one of these options

1 == don't try to customize sunset times, just use 6:30pm

2 == (default) guess the user's location based on how they are connected to the Internet

3 == prompt the user to allow your site to know their location. (This is only supported in Chrome on sites that use https://)

use24HourClock - true or false - used when displaying sunset time

currentTime - used to get the date for a different time or day - if not supplied, the computer's current time is used

If BadiDateToday() is assigned to a variable (above it is to "myVariable"), that variable provides two methods:

getDateInfo() - get the information for today.

refresh() - refresh the BadiDateToday object. The original Settings will be used unless a new one is supplied now. The onReady function is invoked again.

1. 1. 1. var dayInfo = myVariable.getDateInfo();
    2. myVariable.refresh();
    3. myVariable.refresh({ currentTime: new Date('Jan 1, 1985') });

Help

To see all available tags that can be used in your "onReady" code, temporarily add this to your script:

1. 1. 1. function showInfo(dayInfo){
    2. console.log(dayInfo);
    3. }

Or, use the getDateInfo() function:

1. 1. 1. console.log(myVariable.getDateInfo())

Translation

Languages currently embedded:

'en' (English)
'fr' (French)
'pt_PT' (Portuguese)

To translate to another language, copy the script file to your own computer, duplicate the "fr" section of _messages, and supply your language's words. If any particular message is not translated, English will be used. Also set the Setting's "language" to the language code you have defined.

If you would like to share your translation with others, please contact Glen Little!

Script File

The script file can be directly referenced from your website at:

https://wondrous-badi.today/scripts/BadiDateToday.v1.js

This is the currently supported "official" location for the script.

You can also download a copy of the script and put it on your own server.

To contribute to the code, please see this github repository: https://github.com/glittle/BadiDateToday

Google Sites

Report abuse