# Month/Day View

The modern monthly calendar view that makes it easier for customers to find availability.

## What is Month/Day View?

The Month/Day View (also called "New Sesami Booking Experience" or "V2 Calendar") is a modern, innovative calendar interface with a monthly layout that clearly shows available days and time slots.

[**View Demo →**](https://demo.sesami.co/products/tai-chi-class-booking)

## Key Features

### Clear Monthly Overview

* **Monthly view** - Customers see an entire month at a glance
* **Available days highlighted** - Easy to spot which days have availability
* **Modern design** - Clean, intuitive interface

### Customizable Appearance

* **Brand colors** - Change the calendar's primary colors to match your brand
* **Configurable options** - Control what customers see and how they interact

### Group Booking Support

For [Group Appointments](/booking/booking-features/group-appointments.md), the calendar shows:

* **Available spots per slot** - "3 spots left", "1 spot left", etc.
* **Real-time availability** - Updates as bookings are made

### Resource Selection Options

* **Show "Any Available" option** - Let customers book with any available resource
* **Hide "Any Available" option** - Force customers to choose a specific resource (team member, room, etc.)

This is useful when you want customers to always choose their preferred provider.

See: [Resource Selection](/booking/booking-experiences/resource-selection.md)

## How to Enable

### For Online Store 2.0 Themes

If your store uses a [Shopify Online Store 2.0](https://help.shopify.com/en/manual/online-store/themes/managing-themes/upgrading-themes) theme:

1. In Shopify Admin, go to **Online Store > Themes**
2. Click **Customize** on your active theme
3. Navigate to the product page where Sesami is installed
4. Click on the Sesami app block
5. Select **Month/Day View** (or "New Sesami Booking Experience")
6. **Save**

Merchants can easily switch between calendars and experiment freely with 2.0 themes.

### For Vintage Themes

If your store uses a [Shopify Vintage Theme](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions):

* The Month/Day View must be added manually by the Sesami team
* Merchants won't have the ability to switch calendars freely (unlike 2.0 themes)
* Contact <help@sesami.co> for assistance

## Customization Options

### Experience Configurator

Use the [Experience Configurator](https://sesami.dev/docs/storefront-integration/configurator/) to customize:

* Primary brand colors
* Layout options
* Display settings
* Resource selection behavior

### Theme Integration

The calendar automatically adapts to your theme's style:

* Responsive design works on desktop, tablet, and mobile
* Fast loading with Lit web components
* Minimal impact on page performance

## When to Use Month/Day View

The Month/Day View is ideal for:

* **Services booked days in advance** - Customers can easily see availability across weeks
* **Group appointments** - Clear display of remaining spots
* **Resource selection** - When customers choose their preferred provider
* **Modern brand aesthetic** - Clean, contemporary design

## Comparison with Multi-day View

| Feature                | Month/Day View        | Multi-day View              |
| ---------------------- | --------------------- | --------------------------- |
| **Layout**             | Monthly grid          | Multi-day horizontal scroll |
| **Best for**           | Advance planning      | Near-term bookings          |
| **Group bookings**     | Shows remaining spots | Standard display            |
| **Resource selection** | Configurable display  | Standard display            |
| **Default**            | Optional              | Yes (after install)         |

See: [Multi-day View](/booking/booking-experiences/multi-day-view.md)

## Best Practices

* **Use brand colors** - Customize to match your store's identity
* **Test on mobile** - Ensure the experience works well on all devices
* **Configure resource options** - Decide whether to show "Any Available" based on your business model
* **Monitor customer feedback** - See if customers prefer the monthly view

## Troubleshooting

<details>

<summary>Can't find the calendar selector in theme editor</summary>

Check:

* You're using a **Shopify 2.0 theme** (Vintage themes require manual setup)
* Sesami app block is **added to the product page**
* You're in **Customize mode** for your live theme (not an unpublished draft)

</details>

<details>

<summary>Calendar not showing available spots for group bookings</summary>

Check:

* Service has **Group Appointments** enabled
* Service has a **capacity** set (max participants per slot)
* Available spots exist for the time slot

See: [Group Appointments](/booking/booking-features/group-appointments.md)

</details>

<details>

<summary>Want to force customers to choose a specific resource</summary>

* In the theme editor, find the Sesami app block settings
* Look for **"Hide Any Available"** option
* Enable it to hide the "Any Available" choice

See: [Resource Selection](/booking/booking-experiences/resource-selection.md)

</details>

## Related

* [Multi-day View](/booking/booking-experiences/multi-day-view.md) - Classic calendar experience
* [Resource Selection](/booking/booking-experiences/resource-selection.md) - Configure resource selection
* [Group Appointments](/booking/booking-features/group-appointments.md) - Multi-participant bookings
* [Localizing the Experience](/booking/booking-experiences/localizing-experience.md) - Language and region customization
* [Experience Configurator](https://sesami.dev/docs/storefront-integration/configurator/) - Advanced customization


---

# 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://help.sesami.co/booking/booking-experiences/month-day-view.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.
