diff --git a/crates/frontend/js-components/lib/create-calendar-form.ts b/crates/frontend/js-components/lib/create-calendar-form.ts
index 3817f44..ba5573d 100644
--- a/crates/frontend/js-components/lib/create-calendar-form.ts
+++ b/crates/frontend/js-components/lib/create-calendar-form.ts
@@ -27,6 +27,8 @@ export class CreateCalendarForm extends LitElement {
   @property()
   description: string = ''
   @property()
+  timezone_id: string = ''
+  @property()
   color: string = ''
   @property()
   isSubscription: boolean = false
@@ -65,6 +67,11 @@ export class CreateCalendarForm extends LitElement {
             <input type="text" name="displayname" value=${this.displayname} @change=${e => this.displayname = e.target.value} />
           </label>
           <br>
+          <label>
+            Timezone (optional)
+            <input type="text" name="timezone" .value=${this.timezone_id} @change=${e => this.timezone_id = e.target.value} />
+          </label>
+          <br>
           <label>
             Description
             <input type="text" name="description" @change=${e => this.description = e.target.value} />
@@ -125,6 +132,7 @@ export class CreateCalendarForm extends LitElement {
         <set>
           <prop>
             <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.timezone_id ? `<CAL:calendar-timezone-id>${escapeXml(this.timezone_id)}</CAL:calendar-timezone-id>` : ''}
             ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ''}
             ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ''}
             ${(this.isSubscription && this.subscriptionUrl) ? `<CS:source><href>${escapeXml(this.subscriptionUrl)}</href></CS:source>` : ''}
diff --git a/crates/frontend/js-components/lib/edit-calendar-form.ts b/crates/frontend/js-components/lib/edit-calendar-form.ts
index b5e10b7..6a41791 100644
--- a/crates/frontend/js-components/lib/edit-calendar-form.ts
+++ b/crates/frontend/js-components/lib/edit-calendar-form.ts
@@ -23,6 +23,8 @@ export class EditCalendarForm extends LitElement {
   @property()
   description: string = ''
   @property()
+  timezone_id: string = ''
+  @property()
   color: string = ''
   @property({
     converter: {
@@ -47,6 +49,11 @@ export class EditCalendarForm extends LitElement {
             <input type="text" name="displayname" .value=${this.displayname} @change=${e => this.displayname = e.target.value} />
           </label>
           <br>
+          <label>
+            Timezone (optional)
+            <input type="text" name="timezone" .value=${this.timezone_id} @change=${e => this.timezone_id = e.target.value} />
+          </label>
+          <br>
           <label>
             Description
             <input type="text" name="description" .value=${this.description} @change=${e => this.description = e.target.value} />
@@ -100,6 +107,7 @@ export class EditCalendarForm extends LitElement {
         <set>
           <prop>
             <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.timezone_id ? `<CAL:calendar-timezone-id>${escapeXml(this.timezone_id)}</CAL:calendar-timezone-id>` : ''}
             ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ''}
             ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ''}
             <CAL:supported-calendar-component-set>
diff --git a/crates/frontend/public/assets/js/create-calendar-form.mjs b/crates/frontend/public/assets/js/create-calendar-form.mjs
index c99a116..2db8317 100644
--- a/crates/frontend/public/assets/js/create-calendar-form.mjs
+++ b/crates/frontend/public/assets/js/create-calendar-form.mjs
@@ -21,6 +21,7 @@ let CreateCalendarForm = class extends i {
     this.cal_id = "";
     this.displayname = "";
     this.description = "";
+    this.timezone_id = "";
     this.color = "";
     this.isSubscription = false;
     this.subscriptionUrl = "";
@@ -57,6 +58,11 @@ let CreateCalendarForm = class extends i {
             <input type="text" name="displayname" value=${this.displayname} @change=${(e2) => this.displayname = e2.target.value} />
           </label>
           <br>
+          <label>
+            Timezone (optional)
+            <input type="text" name="timezone" .value=${this.timezone_id} @change=${(e2) => this.timezone_id = e2.target.value} />
+          </label>
+          <br>
           <label>
             Description
             <input type="text" name="description" @change=${(e2) => this.description = e2.target.value} />
@@ -120,6 +126,7 @@ let CreateCalendarForm = class extends i {
         <set>
           <prop>
             <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.timezone_id ? `<CAL:calendar-timezone-id>${escapeXml(this.timezone_id)}</CAL:calendar-timezone-id>` : ""}
             ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ""}
             ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ""}
             ${this.isSubscription && this.subscriptionUrl ? `<CS:source><href>${escapeXml(this.subscriptionUrl)}</href></CS:source>` : ""}
@@ -150,6 +157,9 @@ __decorateClass([
 __decorateClass([
   n$1()
 ], CreateCalendarForm.prototype, "description", 2);
+__decorateClass([
+  n$1()
+], CreateCalendarForm.prototype, "timezone_id", 2);
 __decorateClass([
   n$1()
 ], CreateCalendarForm.prototype, "color", 2);
diff --git a/crates/frontend/public/assets/js/edit-calendar-form.mjs b/crates/frontend/public/assets/js/edit-calendar-form.mjs
index 7a29dd1..6daf904 100644
--- a/crates/frontend/public/assets/js/edit-calendar-form.mjs
+++ b/crates/frontend/public/assets/js/edit-calendar-form.mjs
@@ -16,6 +16,7 @@ let EditCalendarForm = class extends i {
     super();
     this.displayname = "";
     this.description = "";
+    this.timezone_id = "";
     this.color = "";
     this.components = /* @__PURE__ */ new Set();
     this.dialog = e();
@@ -35,6 +36,11 @@ let EditCalendarForm = class extends i {
             <input type="text" name="displayname" .value=${this.displayname} @change=${(e2) => this.displayname = e2.target.value} />
           </label>
           <br>
+          <label>
+            Timezone (optional)
+            <input type="text" name="timezone" .value=${this.timezone_id} @change=${(e2) => this.timezone_id = e2.target.value} />
+          </label>
+          <br>
           <label>
             Description
             <input type="text" name="description" .value=${this.description} @change=${(e2) => this.description = e2.target.value} />
@@ -91,6 +97,7 @@ let EditCalendarForm = class extends i {
         <set>
           <prop>
             <displayname>${escapeXml(this.displayname)}</displayname>
+            ${this.timezone_id ? `<CAL:calendar-timezone-id>${escapeXml(this.timezone_id)}</CAL:calendar-timezone-id>` : ""}
             ${this.description ? `<CAL:calendar-description>${escapeXml(this.description)}</CAL:calendar-description>` : ""}
             ${this.color ? `<ICAL:calendar-color>${escapeXml(this.color)}</ICAL:calendar-color>` : ""}
             <CAL:supported-calendar-component-set>
@@ -123,6 +130,9 @@ __decorateClass([
 __decorateClass([
   n$1()
 ], EditCalendarForm.prototype, "description", 2);
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "timezone_id", 2);
 __decorateClass([
   n$1()
 ], EditCalendarForm.prototype, "color", 2);
diff --git a/crates/frontend/public/templates/components/sections/calendars_section.html b/crates/frontend/public/templates/components/sections/calendars_section.html
index 5820ccb..7021e7f 100644
--- a/crates/frontend/public/templates/components/sections/calendars_section.html
+++ b/crates/frontend/public/templates/components/sections/calendars_section.html
@@ -28,6 +28,7 @@
         <edit-calendar-form
           principal="{{ calendar.principal }}"
           cal_id="{{ calendar.id }}"
+          timezone_id="{{ calendar.timezone_id.as_deref().unwrap_or_default() }}"
           displayname="{{ calendar.displayname.as_deref().unwrap_or_default() }}"
           description="{{ calendar.description.as_deref().unwrap_or_default() }}"
           color="{{ calendar.color.as_deref().unwrap_or_default() }}"