Hijri Date Widget - Embeddable Islamic Calendar

Hijri Date Widget

Embed accurate Islamic calendar dates on your website with our lightweight, customizable widget that supports Arabic and English languages.

Live Demo

Basic Widget

Arabic Widget

Dark Theme

Compact Theme

Minimal Theme

Auto Theme

Saudi Arabia

Morocco

Turkey

Egypt

How to Use

Basic Usage

Add the widget to your page with minimal configuration:

<!-- Basic widget -->
<div data-hijri-widget></div>
<script src="https://hijri-today-4yy.pages.dev/hijri-widget.js"></script>

Arabic Language

Display the widget in Arabic with RTL support:

<!-- Arabic widget -->
<div data-hijri-widget
     data-lang="ar"
     data-theme="light">
</div>
<script src="https://hijri-today-4yy.pages.dev/hijri-widget.js"></script>

Custom Country

Specify a country for region-specific calculation methods:

<!-- Custom country widget -->
<div data-hijri-widget
     data-lang="en"
     data-country="MA"
     data-theme="dark">
</div>
<script src="https://hijri-today-4yy.pages.dev/hijri-widget.js"></script>

Multiple Widgets

Use multiple widgets with different configurations:

<!-- Multiple widgets -->
<div data-hijri-widget data-lang="en" data-country="SA"></div>
<div data-hijri-widget data-lang="ar" data-country="EG"></div>
<div data-hijri-widget data-lang="en" data-country="TR"></div>
<script src="https://hijri-today-4yy.pages.dev/hijri-widget.js"></script>

Configuration Options

AttributeValuesDefaultDescription
data-langar, enenDisplay language and text direction
data-countrySA, MA, TR, EG, etc.auto-detectCountry code for calculation method
data-themelight, dark, auto, compact, minimallightVisual theme and size variant for the widget
data-methodummalqura, moonsighting_national, diyanetcountry defaultOverride calculation method

Supported Countries

Gulf Countries

  • 🇸🇦 Saudi Arabia (SA)
  • 🇦🇪 UAE (AE)
  • 🇰🇼 Kuwait (KW)
  • 🇶🇦 Qatar (QA)
  • 🇧🇭 Bahrain (BH)
  • 🇴🇲 Oman (OM)

Middle East

  • 🇪🇬 Egypt (EG)
  • 🇯🇴 Jordan (JO)
  • 🇱🇧 Lebanon (LB)
  • 🇸🇾 Syria (SY)
  • 🇮🇶 Iraq (IQ)
  • 🇮🇷 Iran (IR)

Other Regions

  • 🇲🇦 Morocco (MA)
  • 🇹🇷 Turkey (TR)
  • 🇵🇰 Pakistan (PK)
  • 🇮🇳 India (IN)
  • 🇧🇩 Bangladesh (BD)
  • 🇲🇾 Malaysia (MY)
  • 🇮🇩 Indonesia (ID)

JavaScript API

Global Methods

HijriWidget.refresh()

Refresh all widgets on the page

HijriWidget.getInstance(element)

Get widget instance for programmatic control

HijriWidget.getStats()

Get statistics about loaded widgets

Example Usage

// Refresh all widgets
HijriWidget.refresh();

// Get widget instance and update configuration
const widget = HijriWidget.getInstance('my-widget-element');
if (widget) {
    widget.updateConfig({
        lang: 'ar',
        country: 'EG',
        theme: 'dark'
    });
}

// Get widget statistics
const stats = HijriWidget.getStats();
console.log('Total widgets:', stats.totalWidgets);

Features

Lightweight & Fast

Minimal JavaScript footprint with sub-100ms API responses

Accurate Calculations

Based on official Umm al-Qura calendar tables

Multi-language Support

Arabic with RTL support and English

Regional Methods

Country-specific calculation methods and offsets

Responsive Design

Works on all screen sizes and devices

Copy Functionality

One-click copying of dates to clipboard

Auto-detection

Automatically detects user's country and preferences

No Dependencies

Pure JavaScript with no external dependencies

Need Help?

If you encounter any issues or need assistance with the widget integration, please check our documentation or contact support.

API Documentation Back to Main Site