# 🗓️ How to Display Your Services in a Calendar on Any Shopify Page

> Embed a unified calendar view showing all available services on any Shopify page.

The Event Calendar is one of Cowlendar’s most requested features, and now it is finally here! 🎉

With this tool, you can display all your services inside a clean, interactive calendar, allowing customers to browse available events by month, week, list, or grid view on any Shopify page.

This feature is perfect for:
✔ Workshops and classes
✔ Salon or spa appointments
✔ Restaurant bookings
✔ Fitness schedules
✔ Tours, rentals, coworking spaces, and more

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976399879-CALENDAREVENTS.webp)

### ✨ Key Features of the Event Calendar

#### 📆 Multiple Calendar Views

You can allow customers to switch between:

* Month view
* Week view
* List view (automatically used on mobile)
* Grid view

Customers can explore your services in the format that works best for them.

### 🛠 How to Add Your Event Calendar to Any Shopify Page

Follow these steps to create and display your Event Calendar.

#### 1️⃣ Add Services to the Event Calendar

In your Shopify admin dashboard, click **Apps**.
Open **Cowlendar**.
Go to **Settings**.
Click **Event Calendar** in the left panel.
Click **Add service** and choose which services should appear in the calendar.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976399451-ADDSERVICESCALENDAR.webp)

> **⚠️ Warning**
>
> You can edit every service individually.<br>
> Click the pencil icon ✏️ to:  Hide price, Hide duration, Hide location, etc.

#### 2️⃣ Add the Event Calendar to Your Shopify Website

On the left sidebar of Shopify, click **Online Store**.
Select **Themes**.
Click **Customize** to open the theme editor.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976398928-Cow_-_Online_Store_-_Themes_2_.webp)

Navigate to the page where you want to add your **Event Calendar**.
Click **Add section**.
Go to **Apps** and choose **Cowlendar event calendar**.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976398699-opify-store-briansalazartest-themes-169978593303-editor-2025-12-02-18_58_27-edit.webp)

Your Event Calendar will now be displayed on the selected page 🎉

### ⚙️ Calendar Settings and Customization Options

Once inside **Settings → Event Calendar**, you can fully customize the calendar.

#### 📝 Calendar Name

This name is internal only and visible only to you.

To change the public title, go to **Online Store → Click on Cowlendar event Calendar→ Edit it in Section title**. 

#### 🌍 Timezone

Select the timezone in which your events should be displayed
(for example: **America/New York**).

#### ⏱ Hour Format

Choose how times are displayed:

* AM/PM (for example: **10:30 PM**)
* 24-hour (for example: **22:30**)

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976399064-CONFIGURATIONACALENDAR.webp)

### 🧩 Calendar Configuration

#### Available Views

You can enable or disable:

* Month
* Week
* List (mobile)
* Grid

#### Default Calendar View

Choose the view customers see first when opening the calendar.

#### Show Weekends

Turn this on or off depending on your type of business.

#### First Day of the Week

Choose between:

Saturday
Sunday
Monday

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976399176-CALENDARCONFIGURATION.webp)

### 🎨 Calendar Slot Design

#### Event Layout

* **Compact:** shows title and time
* **Expanded:** shows title, time, and description

#### Show Event End Time

Display both start and end time for events.

#### Action Target

Choose what happens when customers click an event:

* Open widget (booking popup)
* Redirect to product page (used automatically if a service has multiple variants)

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976399609-CALENDARSLOTDESIGN.webp)

### 🎨 Calendar Design

Fully customize the calendar’s look with color controls:

* Background color
* Title color
* Text color
* Calendar header color
* Calendar grid color
* Current day background
* Current day text
* Week header background
* Week header text
* Navigation buttons (background, arrows, hover)
* View toggle backgrounds and text
* Previous and next month cells
* Sold out event background and text

This allows you to match your store branding perfectly 🎨.

![](https://orka-chat.fra1.cdn.digitaloceanspaces.com/prod/help/671a5e245d077ea954b2cd4c/import/1791976400064-CALENDARDESIGN.webp)