# 캘린더 위젯 커스터마이징

## 캘린더 위젯 커스터마이징

#### 커뮤니티 추가 튜토리얼

<https://youtu.be/RSU2w1qPNSs>

<https://youtu.be/yWd2HvfQgG0>

<https://youtu.be/gSwhkno90Zc>

<https://youtu.be/xhPyG7cGLf8>

***

### 중요 업데이트: 캘린더 위젯 'Continue(계속)' 버튼 위치 변경

안내드립니다. 캘린더 위젯(Calendar Widget)의 Continue(계속) 버튼을 새로운 위치로 이동했습니다. CSS 커스터마이징을 적용하신 경우, **업데이트된 위치**에 맞게 수정해주세요.

![캘린더 위젯 새 위치 안내](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014897818/original/gjK47oHkNCfIh1EE1GujIBvd3VT6uyg_Vg.png?1702299491)

![캘린더 위젯 위치 변경 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014897647/original/xQ9cBD4JkovK-dPivscHoaZTnruf6fRZAg.png?1702299406)

***

## 캘린더 위젯 커스터마이징이란?

캘린더 위젯 커스터마이징(Calendar Widget Customization)은 위젯의 외관과 기능을 직접 제어할 수 있는 기능입니다. 이 강력한 기능으로 위젯을 개인 취향에 맞게 개인화하여 나만의 고유한 위젯을 만들 수 있어요.

***

### 위젯을 커스터마이징하는 방법

* Calendars(캘린더) → Calendar Settings(캘린더 설정)으로 이동하세요.
* 커스터마이징하고 싶은 캘린더의 Edit(편집)을 클릭하세요.
* Advanced settings(고급 설정) → Widget appearance(위젯 외관)를 열어 위젯 커스터마이징 옵션을 업데이트하세요.

**참고**: 위젯 커스터마이징은 **NEO 위젯에서만** 작동합니다.

***

### 커스터마이징 옵션 이해하기

캘린더 위젯을 취향에 맞게 맞춤 설정할 수 있는 다음 옵션들을 살펴보세요:

* **Primary Colour(기본 색상)**: 버튼, 날짜, 시간 슬롯, Staff Selection(직원 선택), Add Guests(게스트 추가) 등 위젯 내 다양한 액션에 영향을 줍니다.
* **Background Colour(배경 색상)**: 날짜-시간 선택기와 폼 모두의 배경 색상을 설정합니다. **커스텀 폼**을 사용하는 경우, 폼의 배경은 선택한 배경 색상과 일치하지만 폼 필드는 특정 커스텀 폼 설정에 따라 결정됩니다.

![캘린더 위젯 색상 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014006095/original/NJAVE46q85aAL4fkmXnC4ppgKsH9vmx5XA.png?1701335069)

![캘린더 위젯 색상 적용 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014398017/original/XvNYZLuXiGZTLY-WH9ch3Jt2Lei0XtfQmA.png?1701774357)

**참고**: 커스텀 폼을 사용할 때는 테마가 위젯 커스터마이징과 일치하도록 동기화하여 일관성 있는 외관을 유지하세요.

***

#### 커스텀 폼이 적용된 커스터마이징 위젯 예시

![커스텀 폼 위젯 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014014926/original/zLgNtEM6IsBh8QNfvYInGPsjbAKYbrSO0g.png?1701338728)

* **Button Text(버튼 텍스트)**: 예약 시 버튼에 표시되는 텍스트를 맞춤 설정하세요. 예약의 마지막 단계에서 표시될 텍스트입니다. **예시:** 지금 예약, 미팅 예약, 상담 신청.

![버튼 텍스트 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014007583/original/aDiDCOr27lN0jT77qxYPGn_v9_Wz3Bc1Bw.png?1701335595)

* **Hide Calendar Details(캘린더 세부사항 숨기기)**: 좌측 패널에서 캘린더 이름, 설명, 그리고 소요시간, 날짜 및 시간, 반복 세부사항, 시간대 등의 세부사항을 숨길 수 있습니다.

**참고**: 로고를 표시하지 않으려면 미팅 세부사항 탭에서 로고를 제거하세요.

![캘린더 세부사항 숨기기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014398556/original/SsBTXgr3tI0qRumH1PL4AdbJNGSDBnrWIQ.png?1701774492)

* **Preview Your Changes(변경사항 미리보기)**: "Preview Widget(위젯 미리보기)" 기능을 활용하여 예약 과정에서 변경사항이 어떻게 보일지 확인하세요. 새로운 변경사항이 있을 때마다 "Preview Widget" 옵션을 클릭해야 업데이트된 설정을 볼 수 있습니다.
* **Resetting to Default(기본값으로 재설정)**: 필요시 "Reset to Default(기본값으로 재설정)" 옵션으로 모든 커스터마이징을 기본 파란색과 흰색 캘린더 위젯 설정으로 되돌릴 수 있습니다.

![미리보기 및 재설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014008386/original/1VCnPDtft7VclBxvCMTAZoZIjroZE_xmhw.png?1701336017)

***

### 자주 묻는 질문(FAQ)

**Q: 어떤 캘린더가 커스터마이징을 지원하나요?**

A: Event(이벤트), Round Robin(라운드 로빈), Class Booking(수업 예약), Collective(공동 예약), Service Calendars(서비스 캘린더) 등 모든 캘린더 유형에서 커스터마이징 기능을 사용할 수 있습니다.

**참고**: \*\*Service Menu(서비스 메뉴)\*\*에서는 커스터마이징이 작동하지 **않습니다**.

**Q: 커스텀 폼을 추가할 수 있나요?**

A: 네! 커스텀 폼을 추가할 수 있습니다. 다만 커스텀 폼 테마가 전체 위젯 커스터마이징과 잘 어우러지도록 하세요.

**Q: CSS 커스터마이징을 추가한 경우는 어떻게 되나요?**

A: CSS 커스터마이징이 위젯 설정보다 우선적으로 적용됩니다. 커스텀 스타일이 우선순위를 갖기 때문에 캘린더 위젯에서 개인화된 디자인 선택이 그대로 반영됩니다.

**Q: 좌측 패널 전체를 비활성화하고 싶은데 설정을 꺼도 여전히 보여요. 어떻게 해야 하나요?**

A: 좌측 패널을 완전히 비활성화하려면 다음 설정을 확인하세요:

캘린더 세부사항 설정:

* Calendar Name(캘린더 이름) 비활성화
* Calendar Description(캘린더 설명) 비활성화
* Calendar Details(캘린더 세부사항) 비활성화

로고 제거:

* 캘린더와 연결된 로고 제거

Customizations(커스터마이징) 탭:

* "Allow Select Staff(직원 선택 허용)" 옵션 비활성화

### 프로 팁

최상의 시각적 결과를 위해서는 대비되는 기본 색상과 배경 색상을 선택하는 것을 권장합니다. 밝은 색상과 어두운 색상 사이의 균형을 맞추면 가장 미적으로 만족스러운 결과를 얻을 수 있어요. 완벽한 커스터마이징 캘린더 위젯 모양을 찾을 때까지 다양한 조합을 실험해보세요.

***

*원문 최종 수정: Tue, 10 Mar, 2026 at 7:40 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# 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://hyperclass.gitbook.io/hyperclass-docs/and-calendars/workflow-action-book-appointment/calendar-widget-customization.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.
