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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://penida.gitbook.io/cowlendar-help/how-to.../how-to-display-your-services-in-a-calendar-on-any-shopify-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.