Business Hours

The “Business Hours” element is a useful tool that enables companies to manage and communicate their daily operating hours effectively. It provides two timing options: Predefined and Custom. When you choose Predefined timing, you can display customized messages before opening or closing, which helps to keep clients and employees informed and engaged, The Custom option allows you complete freedom to display business hours details in accordance with your specific needs.

This Element features a clear and concise interface, providing real-time updates on the office’s currently open or closed status. Additionally, the Business Hours element showcase live timing, keeping your customers informed and up-to-date on your company’s schedule.

The “Business Hours” Element features the following controls:

Content

Business Hours

  • Business Timing: You have two options to choose from, Predefined or Custom. The Predefined option comes with pre-set days from Monday to Sunday, while the Custom option gives you the flexibility to manage your days according to your specific needs.
  • Days: Add days by using the “Add Item” option. This feature lets you customize your day based on your specific needs when working with a custom business timing option.
    • Icon: Add the icon from the list.
    • Days: Select the day from the dropdown list.
    • Closed: Enable the option if needed.
      • Closed Text: Enter the text.
    • No. of slots: Enter the number of slots as per your need.
    • Opening: Enter the opening time in 12 hours or 24-hour format only(1:00 AM/PM or 14:00).
    • Closing: Enter the closing time in 12 hours or 24-hour format(1:00 AM/PM or 14:00).
    • Label: Enter the label that you want to display.
Business Hours: Individual Day Content Setting
Business Hours: Individual Day Content Setting

Style(Individual day Styling)

You have the option to customize the style of each day to meet your specific requirements.

  • Background: Choose the background color.
  • Weekday Color: Select the weekday color.
  • Time Color: Select the color for time.
  • Icon Color: Select the color for the icon.
  • Label Color: Select the label color.
  • Padding: Adjust the padding.
Business Hours: Individual Day Style Settings
Business Hours: Individual Day Style Settings
  • Global Icon: Choose an icon from the given options.
  • Day Format: Choose either a short or long day format.
  • Show Current Day Only: Enable the option to show the current day only.
  • Highlight Current Day: Enable the option to highlight the current day.
  • Time Layout: Choose either Horizontal or Vertical layout.
  • Gap: Adjust the gap between the timing.
  • Time Separator: Enter the separator.
  • Slots Separator: Enter the separator for slots(This setting will only work for Horizontal Time Layout).
  • Show Business Indicator: Enable the option if you want to display Business Indicator.
Business Hours: Content Settings
Business Hours: Content Settings

Business Indicators

Note: Display only if the Business indicator option is enabled.

  • Title: Enter the title for the business indicator.
  • Date: Enable the option if you want to display the date.
    • Format: Select the date format from the list.
  • Time: Enable the option if you want to display the time.
    • Format: Select from 12 hours or 24 hour format options.
Business Indicator Content Settings
Business Indicator Content Settings

Note: These options are only applicable if you select Predefined Business Timing in the above Business Hours section.

Opening Warning Message

  • Opening Warning Text: Enable the option to display an open warning message.
    • Minutes: Specify, How many minutes before the message will display(Max Value you can enter is 60).
    • Opening Warning Text: Enter the warning message.

Close Warning Message

  • Closing Warning Text: Enable the option to display a closing warning message.
    • Minutes: Specify, How many minutes before the message will display(Max Value you can enter is 60).
    • Closing Warning Text: Enter the warning message.

Open/Close Label

  • Label: Enable the option if you want to display Label.
    • Opening Text: Enter the text to display open status
    • Closing Text: Enter the text to display close status.
Business Hour: Open/Close Label Settings
Business Hour: Open/Close Label Settings

Business Hours Style

  • Box Width: Enter the width of the box.
  • Border: Set the border properties.
  • Box Shadow: Add the box shadow effect around the box.
  • Box Padding: Adjust the padding.
Business Hours Style Settings
Business Hours Style Settings

Row Style

  • Color: Enter the color for the row.
  • Alternate Color: Select the alternate color for the row.
  • Background: Select the background color for the row.
  • Alternate Background Color: Select the alternate background color for the row.
  • Typography: Set the typography.
  • Border: Set the border.
  • Box Shadow: Add the box shadow effect around the row.
  • Padding: Set the padding.
  • Gap: Specify the gap between the rows.
  • Top row gap: Specify the top row gap.
Business Hour: Row Styling settings
Business Hour: Row Styling settings

Day Style

  • Color: Select the color for the days.
  • Typography: Set the typography.

Time Style

  • Color: Select the color for the time.
  • Typography: Set the typography.

Icon Style

  • Color: Select the color for the icon.
  • Icon Size: Specify the size of an icon.
  • Gap: Specify the gap.

Label Style

  • Color: Select the color for the label.
  • Background: Select the background color for the label.
  • Typography: Set the typography.
  • Border: Set the border.
  • Padding: Set the padding.
  • Gap: Set the gap.
Business Hour: Label Style Settings
Business Hour: Label Style Settings

Closed Row: Apply Styling to the closed row, which is defined in the Business Hours section.

  • Background: Select the background color for the closed row.
  • Date: Set the date color.
  • Time: Set the time color.
  • Icon: Set the icon color.

Business Indicator Style

Note: Display only if the Business indicator option is enabled.

  • Background: Choose either from Image or Gradient.
  • Image
    • Background: Set the background properties.
  • Gradient
    • Background Gradient
      • Apply To: Select from background, image, or overlay.
      • CSS Selector: Enter the CSS selector.
      • Angle in: Set the angle.
      • Color: Set the multiple colors for gradient.
  • Border: Set the border properties.
  • Box Shadow: Specify the box shadow.
  • Padding: Set the padding.
  • Margin: Adjust the margin.
  • Layout: Display the Label on either the Right or Left side(applicable for Predefined Business Timing only).
  • Label Position: Select from the start, center, or end label position(applicable for Predefined Business Timing only).
  • Content Alignment: Choose from the start, center, or end alignment options.
Business Indicator Style Settings
Business Indicator Style Settings

Title

  • Color: Set the color of the title.
  • Typography: Set the typography.
  • Spacing: Specify the gap.

Date

  • Color: Set the color of the date.
  • Typography: Set the typography.
  • Spacing: Specify the gap.

Time

  • Color: Set the color of the time.
  • Typography: Set the typography.
  • Spacing: Specify the gap.

Note: These options are only applicable if you select Predefined Business Timing in Business Hours Section.

Opening Warning Message

  • Color: Set the color of the title.
  • Typography: Set the typography.
  • Spacing: Specify the gap.

Closing Warning Message

  • Color: Set the color of the title.
  • Typography: Set the typography.
  • Spacing: Specify the gap.

Label

  • Typography: Set the typography.
  • Padding: Specify the padding.

Open Text

  • Color: Select the color for open text.
  • Background: Select the background properties.

Close Text

  • Color: Select the color for close text.
  • Background: Select the background properties.

Highlight Current Day

Note: Display only if the Highlight current day option is enabled and business timing is selected as predefined.

The following settings only apply to the current day.

  • Color: Set the color of the title.
  • Background: Select the background properties.
  • Typography: Set the typography.
Business Hour: Highlight Current Day Settings
Business Hour: Highlight Current Day Settings

Click here to check out a demo page of Business Hours element.