GivebearCalendar and prayer-time widgets
Embed your event calendar and Muslim prayer times on your own website.
Givebear has two schedule widgets you can paste onto your website: a calendar that lists upcoming events, and a prayer-time display for masjids. Both are generated for you in the dashboard, so you copy a snippet rather than write code.
This guide covers adding each one. To embed giving instead, see donation widgets.
Before you start
Each widget is unlocked by an add-on. Turn on the matching add-on first, or the widget has nothing to show.
- The calendar widget needs a calendar add-on, such as Community Calendar or a tradition-specific one like Church Services.
- The prayer-time widget needs the Muslim Prayer Times add-on.
Enable add-ons from your dashboard. See the add-ons reference for what each one unlocks.
Widgets are display surfaces, not editors. You still manage events, calendar items, and prayer times in the dashboard. The widget shows whatever is public there.
Add a calendar widget
The calendar widget lists your upcoming public schedule on your site. It pulls from two places: events you publish under Events, and calendar items you add under the Calendar tab. Only public items appear, and only those happening now or in the future.
Turn on a calendar add-on if you have not already. This adds Calendar and Website calendar to the Events group in your sidebar.
Add your events and calendar items so the widget has content. An empty calendar shows a "nothing on the calendar yet" message.
In the dashboard, open Website calendar.
Pick a layout: Agenda, Compact, or Next Up. The live preview updates as you choose.
Select Copy to copy the install snippet.
Paste the snippet into your website where the calendar should appear. Publish the page, then load it to confirm the calendar renders.
Visitors can open any event for details and add it to their own calendar (Google Calendar or an .ics download). They can also subscribe to your calendar feed from the widget.
Choose a calendar layout
| Layout | Best for | Shows |
|---|---|---|
| Agenda | A full schedule page. | Every upcoming event, grouped by day. |
| Compact | Sidebars and footers. | A trimmed agenda. |
| Next Up | A homepage highlight. | A single card for the next event only. |
Set up prayer times
The prayer-time widget shows today's prayer and iqamah times plus Jumu'ah details, computed from your location and calculation method. Set everything up first; the widget is the last tab.
With the Muslim Prayer Times add-on on, the Add-ons group in your sidebar gains Prayer times, Prayer schedule, Jumuah times, and Website widget. They open the same Prayer times page on its four tabs: Location, Prayer schedule, Jumu'ah & display, and Embed widget. A save bar at the bottom of the first three tabs offers Save and Save & next, which saves and moves you to the following tab.
On Location, use Search address to find your mosque; picking a result fills the coordinates and Location label for you. You can also type the latitude and longitude, or select Detect location to use your browser's position. Then choose the Calculation method (ISNA, Muslim World League, Egyptian, Karachi, Umm Al-Qura, Dubai, Qatar, Kuwait, Moonsighting Committee, Turkey, Tehran, or Other), the Madhab used for Asr (Shafi/Standard or Hanafi), and your Timezone. Saving requires a valid latitude, longitude, and label.
On Prayer schedule, toggle which rows appear: Fajr, Sunrise, Dhuhr, Asr, Maghrib, Isha, and Midnight. Sunrise and Midnight are display-only markers. For each prayer you show, set an Adjustment in minutes to shift the computed adhan time, and an Iqamah as either Minutes after the adhan or a Fixed time.
On Jumu'ah & display, select Add shift for each Friday prayer and give it a label and time. Under Display preferences, set a Hijri date offset in days if your community's moon sighting differs from the calculated date, and pick the Time format: 12 hour or 24 hour.
Select Save. The times are now live for the widget and, if your donation page layout includes the Prayer Times section, on your public giving page.
Add a prayer-time widget
Open the Embed widget tab (or Website widget in the sidebar).
Under Appearance, choose a Widget theme (light, dark, or auto) and an Accent color to match your site.
In Live preview, pick a layout: Full schedule, Hero card, or Header strip. The preview renders the real widget with your saved times.
In Embed code, choose the html or javascript snippet, then select the copy icon.
Paste the snippet into your website. Publish and load the page to confirm the times render.
Theme and accent color are baked into the snippet and are not saved in the dashboard; to restyle later, copy a fresh snippet. The time format is a saved setting and is included in the snippet too, so changing it on the Jumu'ah & display tab means copying the snippet again.
Choose a prayer-time layout
| Layout | Best for | Shows |
|---|---|---|
| Full schedule | A dedicated prayer-times page. | Every prayer you show, plus Jumu'ah shifts. |
| Hero card | A homepage or sidebar highlight. | The next prayer, highlighted. |
| Header strip | A slim banner across the top of a page. | A compact row of the day's prayers. |
If a widget shows nothing or an error
Work through these in order:
- Confirm the matching add-on is still enabled.
- Confirm you have public, upcoming content. Past or private items do not appear. For prayer times, confirm the Location tab has been saved.
- Confirm the snippet was pasted in full, including the script line.
- Check that your website does not clip or hide the widget. See theming and platforms.
Show only events, or filter the calendar
The dashboard snippet shows your full calendar. To show events only, or to filter by category, a developer can use the SDK directly. See the developer SDK.