> For the complete documentation index, see [llms.txt](https://penida.gitbook.io/cowlendar-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://penida.gitbook.io/cowlendar-help/how-to.../how-to-display-your-services-in-a-calendar-on-any-shopify-page.md).

# How to Display Your Services in a Calendar 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

<figure><img src="/files/ELZZlfpfH5zmLkuhdfff" alt=""><figcaption></figcaption></figure>

***

### ✨ 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

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

<figure><img src="/files/Ront9RTi8okAKsKIh6VE" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
You can edit **every service** individually.\
Click the pencil icon ✏️ to:  Hide price, Hide duration, Hide location, etc.
{% endhint %}

***

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

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

<figure><img src="/files/dbMOhQjzucvda3gtJUNH" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/NkxfUMZqzFd4KZXkbYJc" alt=""><figcaption></figcaption></figure>

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.

#### 🗂 Create and Manage Calendars

* **Pro plan:** you can create 1 calendar
* **Elite plan:** you can create up to 10 calendars

***

#### 📝 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**.&#x20;

#### 🌍 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**)

<figure><img src="/files/cavzkjb61jnlukYho4G4" alt=""><figcaption></figcaption></figure>

***

### 🧩 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

<figure><img src="/files/ZoU0WRtv3sRT5ACeC8zr" alt=""><figcaption></figcaption></figure>

***

### 🎨 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)

<figure><img src="/files/xfXT3Ciyc0MFa7Asf69P" alt=""><figcaption></figcaption></figure>

***

### 🎨 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 🎨.

<figure><img src="/files/9iCROEK1cGFeBryfHTOt" alt=""><figcaption></figcaption></figure>