Signed-off-by: 吴文峰 <kevin@lmve.net>

backend/my_work/main.go

@@ -81,6 +81,7 @@ func main() {
 	routers.ApiWorkOrderInit()
 	routers.ApiWarehouseInit()
 	routers.ApiCustomerInit()
+	routers.ApiCalendarInit()
 
 	routers.BindsInit() //最后初始化绑定数据表
 

backend/my_work/routers/api.go

@@ -45,6 +45,7 @@ func ApiRoot(r *gin.RouterGroup) {
 	ApiWarehouse(r.Group("/warehouse"))
 	ApiSysAdmin(r.Group("/admin"))
 	ApiCustomer(r.Group("/customer"))
+	ApiCalendar(r.Group("/calendar"))
 	r.GET("/", func(ctx *gin.Context) {
 		ReturnJson(ctx, "apiOK", gin.H{
 			"isOpsApiRoot": true,

backend/my_work/routers/apiCalendar.go

@@ -0,0 +1,434 @@
+package routers
+
+import (
+	"encoding/json"
+	"ops/models"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/mitchellh/mapstructure"
+	"gorm.io/gorm"
+)
+
+// TabCalendar 日历表
+type TabCalendar struct {
+	ID          uint   `gorm:"primarykey"`
+	UserID      uint   `gorm:"not null;comment:创建人ID"`
+	Name        string `gorm:"size:100;not null;comment:日历名称"`
+	Description string `gorm:"size:500;comment:日历描述"`
+	Color       string `gorm:"size:50;default:#3788d9;comment:日历颜色"`
+	IsPublic    bool   `gorm:"default:false;comment:是否公开"`
+
+	CreatedAt *time.Time     `gorm:"type:datetime;autoCreateTime;comment:创建时间"`
+	UpdatedAt *time.Time     `gorm:"type:datetime;autoUpdateTime;comment:最后修改时间"`
+	DeletedAt gorm.DeletedAt `gorm:"index"`
+}
+
+// TabCalendarEvent 日历事件表
+type TabCalendarEvent struct {
+	ID         uint   `gorm:"primarykey"`
+	CalendarID uint   `gorm:"not null;index;comment:关联日历ID"`
+	UserID     uint   `gorm:"not null;comment:创建人ID"`
+	Title      string `gorm:"size:200;not null;comment:事件标题"`
+	StartDate  string `gorm:"size:10;not null;index;comment:开始日期 YYYY-MM-DD"`
+	EndDate    string `gorm:"size:10;not null;index;comment:结束日期 YYYY-MM-DD"`
+	BgColor    string `gorm:"size:50;default:#3788d9;comment:背景颜色"`
+	Remark     string `gorm:"type:text;comment:备注"`
+
+	CreatedAt *time.Time     `gorm:"type:datetime;autoCreateTime;comment:创建时间"`
+	UpdatedAt *time.Time     `gorm:"type:datetime;autoUpdateTime;comment:最后修改时间"`
+	DeletedAt gorm.DeletedAt `gorm:"index"`
+}
+
+// TabCalendarLog 日历操作日志表
+type TabCalendarLog struct {
+	ID         uint   `gorm:"primarykey"`
+	CalendarID uint   `gorm:"not null;index;comment:关联日历ID"`
+	EventID    uint   `gorm:"not null;index;comment:关联事件ID（可选）"`
+	UserID     uint   `gorm:"not null;comment:操作人ID"`
+	ActionType string `gorm:"size:50;not null;comment:操作类型: create-创建 update-修改 delete-删除"`
+	OldContent string `gorm:"type:text;comment:修改前内容(JSON)"`
+	NewContent string `gorm:"type:text;comment:修改后内容(JSON)"`
+	IP         string `gorm:"size:50;comment:操作IP"`
+	Remark     string `gorm:"size:500;comment:备注/操作描述"`
+
+	CreatedAt *time.Time `gorm:"type:datetime;autoCreateTime;comment:操作时间"`
+}
+
+// 请求结构体
+type fromCreateCalendar struct {
+	Name        string `json:"name" binding:"required"`
+	Description string `json:"description"`
+	Color       string `json:"color"`
+	IsPublic    bool   `json:"is_public"`
+}
+
+type fromUpdateCalendar struct {
+	ID          uint   `json:"id" binding:"required"`
+	Name        string `json:"name" binding:"required"`
+	Description string `json:"description"`
+	Color       string `json:"color"`
+	IsPublic    bool   `json:"is_public"`
+}
+
+type fromDeleteCalendar struct {
+	ID uint `json:"id" binding:"required"`
+}
+
+type fromGetCalendarEvents struct {
+	CalendarID uint   `json:"calendar_id" binding:"required"`
+	Start      string `json:"start" binding:"required"`
+	End        string `json:"end" binding:"required"`
+}
+
+type fromAddCalendarEvent struct {
+	CalendarID uint   `json:"calendar_id" binding:"required"`
+	Title      string `json:"title" binding:"required"`
+	Start      string `json:"start" binding:"required"`
+	End        string `json:"end" binding:"required"`
+	Color      string `json:"color"`
+	Remark     string `json:"remark"`
+}
+
+type fromUpdateCalendarEvent struct {
+	ID         uint   `json:"id" binding:"required"`
+	Title      string `json:"title" binding:"required"`
+	Start      string `json:"start" binding:"required"`
+	End        string `json:"end" binding:"required"`
+	Color      string `json:"color"`
+	Remark     string `json:"remark"`
+}
+
+type fromDeleteCalendarEvent struct {
+	ID uint `json:"id" binding:"required"`
+}
+
+func ApiCalendarInit() {
+	// 初始化数据表
+	models.DB.AutoMigrate(&TabCalendar{})
+	models.DB.AutoMigrate(&TabCalendarEvent{})
+	models.DB.AutoMigrate(&TabCalendarLog{})
+}
+
+func ApiCalendar(r *gin.RouterGroup) {
+	// 创建日历
+	r.POST("/calendar/create", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromCreateCalendar
+			if err := mapstructure.Decode(data, &from); err == nil {
+				calendar := TabCalendar{
+					UserID:      user.ID,
+					Name:        from.Name,
+					Description: from.Description,
+					Color:       from.Color,
+					IsPublic:    from.IsPublic,
+				}
+				if calendar.Color == "" {
+					calendar.Color = "#3788d9"
+				}
+				if models.DB.Create(&calendar).Error == nil {
+					// 记录日志
+					newContent, _ := json.Marshal(calendar)
+					log := TabCalendarLog{
+						CalendarID: calendar.ID,
+						UserID:     user.ID,
+						ActionType: "create",
+						NewContent: string(newContent),
+						IP:         ctx.ClientIP(),
+					}
+					models.DB.Create(&log)
+					ReturnJson(ctx, "apiOK", gin.H{"id": calendar.ID})
+				} else {
+					ReturnJson(ctx, "apiErr", nil)
+				}
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 获取日历列表
+	r.POST("/calendar/list", func(ctx *gin.Context) {
+		isAuth, _, _ := AuthenticationAuthority(ctx)
+		if isAuth {
+			var calendars []TabCalendar
+			models.DB.Where("deleted_at IS NULL").Order("created_at DESC").Find(&calendars)
+			ReturnJson(ctx, "apiOK", gin.H{"list": calendars})
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 更新日历
+	r.POST("/calendar/update", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromUpdateCalendar
+			if err := mapstructure.Decode(data, &from); err == nil {
+				oldCalendar := TabCalendar{}
+				if models.DB.Where("id = ?", from.ID).First(&oldCalendar).Error == nil {
+					// 检查权限（只有创建人可以修改）
+					if oldCalendar.UserID != user.ID {
+						ReturnJson(ctx, "permission_denied", nil)
+						return
+					}
+
+					newCalendar := TabCalendar{
+						Name:        from.Name,
+						Description: from.Description,
+						Color:       from.Color,
+						IsPublic:    from.IsPublic,
+					}
+					if newCalendar.Color == "" {
+						newCalendar.Color = "#3788d9"
+					}
+
+					if models.DB.Model(&oldCalendar).Updates(&newCalendar).Error == nil {
+						// 记录日志
+						newContent, _ := json.Marshal(newCalendar)
+						oldContent, _ := json.Marshal(oldCalendar)
+						log := TabCalendarLog{
+							CalendarID: oldCalendar.ID,
+							UserID:     user.ID,
+							ActionType: "update",
+							OldContent: string(oldContent),
+							NewContent: string(newContent),
+							IP:         ctx.ClientIP(),
+						}
+						models.DB.Create(&log)
+						ReturnJson(ctx, "apiOK", nil)
+					} else {
+						ReturnJson(ctx, "apiErr", nil)
+					}
+				} else {
+					ReturnJson(ctx, "calendar_not_find", nil)
+				}
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 删除日历
+	r.POST("/calendar/delete", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromDeleteCalendar
+			if err := mapstructure.Decode(data, &from); err == nil {
+				oldCalendar := TabCalendar{}
+				if models.DB.Where("id = ?", from.ID).First(&oldCalendar).Error == nil {
+					// 检查权限（只有创建人可以删除）
+					if oldCalendar.UserID != user.ID {
+						ReturnJson(ctx, "permission_denied", nil)
+						return
+					}
+
+					// 软删除日历
+					if models.DB.Delete(&oldCalendar).Error == nil {
+						// 记录日志
+						oldContent, _ := json.Marshal(oldCalendar)
+						log := TabCalendarLog{
+							CalendarID: oldCalendar.ID,
+							UserID:     user.ID,
+							ActionType: "delete",
+							OldContent: string(oldContent),
+							IP:         ctx.ClientIP(),
+						}
+						models.DB.Create(&log)
+						ReturnJson(ctx, "apiOK", nil)
+					} else {
+						ReturnJson(ctx, "apiErr", nil)
+					}
+				} else {
+					ReturnJson(ctx, "calendar_not_find", nil)
+				}
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 获取日历事件
+	r.POST("/calendar/events", func(ctx *gin.Context) {
+		isAuth, _, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromGetCalendarEvents
+			if err := mapstructure.Decode(data, &from); err == nil {
+				var events []TabCalendarEvent
+				models.DB.Where("calendar_id = ? AND start_date <= ? AND end_date >= ? AND deleted_at IS NULL",
+					from.CalendarID, from.End, from.Start).Find(&events)
+
+				// 为事件添加编辑权限标识
+				var relist []map[string]interface{}
+				for _, event := range events {
+					data, _ := json.Marshal(event)
+					var temp map[string]interface{}
+					json.Unmarshal(data, &temp)
+					// 这里可以根据需要添加 edit 字段
+					relist = append(relist, temp)
+				}
+
+				ReturnJson(ctx, "apiOK", gin.H{"list": relist})
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 添加日历事件
+	r.POST("/calendar/addevent", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromAddCalendarEvent
+			if err := mapstructure.Decode(data, &from); err == nil {
+				// 检查日历是否存在
+				var calendar TabCalendar
+				if models.DB.Where("id = ? AND deleted_at IS NULL", from.CalendarID).First(&calendar).Error != nil {
+					ReturnJson(ctx, "calendar_not_find", nil)
+					return
+				}
+
+				event := TabCalendarEvent{
+					CalendarID: from.CalendarID,
+					UserID:     user.ID,
+					Title:      from.Title,
+					StartDate:  from.Start,
+					EndDate:    from.End,
+					BgColor:    from.Color,
+					Remark:     from.Remark,
+				}
+				if event.BgColor == "" {
+					event.BgColor = calendar.Color
+				}
+
+				if models.DB.Create(&event).Error == nil {
+					// 记录日志
+					newContent, _ := json.Marshal(event)
+					log := TabCalendarLog{
+						CalendarID: event.CalendarID,
+						EventID:    event.ID,
+						UserID:     user.ID,
+						ActionType: "create_event",
+						NewContent: string(newContent),
+						IP:         ctx.ClientIP(),
+					}
+					models.DB.Create(&log)
+					ReturnJson(ctx, "apiOK", gin.H{"id": event.ID})
+				} else {
+					ReturnJson(ctx, "apiErr", nil)
+				}
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 更新日历事件
+	r.POST("/calendar/updateevent", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromUpdateCalendarEvent
+			if err := mapstructure.Decode(data, &from); err == nil {
+				oldEvent := TabCalendarEvent{}
+				if models.DB.Where("id = ?", from.ID).First(&oldEvent).Error == nil {
+					// 检查权限（只有创建人可以修改）
+					if oldEvent.UserID != user.ID {
+						ReturnJson(ctx, "permission_denied", nil)
+						return
+					}
+
+					newEvent := TabCalendarEvent{
+						Title:   from.Title,
+						StartDate: from.Start,
+						EndDate: from.End,
+						BgColor: from.Color,
+						Remark:  from.Remark,
+					}
+					if newEvent.BgColor == "" {
+						// 获取日历颜色
+						var calendar TabCalendar
+						models.DB.Where("id = ?", oldEvent.CalendarID).First(&calendar)
+						newEvent.BgColor = calendar.Color
+					}
+
+					if models.DB.Model(&oldEvent).Updates(&newEvent).Error == nil {
+						// 记录日志
+						newContent, _ := json.Marshal(newEvent)
+						oldContent, _ := json.Marshal(oldEvent)
+						log := TabCalendarLog{
+							CalendarID: oldEvent.CalendarID,
+							EventID:    oldEvent.ID,
+							UserID:     user.ID,
+							ActionType: "update_event",
+							OldContent: string(oldContent),
+							NewContent: string(newContent),
+							IP:         ctx.ClientIP(),
+						}
+						models.DB.Create(&log)
+						ReturnJson(ctx, "apiOK", nil)
+					} else {
+						ReturnJson(ctx, "apiErr", nil)
+					}
+				} else {
+					ReturnJson(ctx, "event_not_find", nil)
+				}
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+
+	// 删除日历事件
+	r.POST("/calendar/deleteevent", func(ctx *gin.Context) {
+		isAuth, user, data := AuthenticationAuthority(ctx)
+		if isAuth {
+			var from fromDeleteCalendarEvent
+			if err := mapstructure.Decode(data, &from); err == nil {
+				oldEvent := TabCalendarEvent{}
+				if models.DB.Where("id = ?", from.ID).First(&oldEvent).Error == nil {
+					// 检查权限（只有创建人可以删除）
+					if oldEvent.UserID != user.ID {
+						ReturnJson(ctx, "permission_denied", nil)
+						return
+					}
+
+					if models.DB.Delete(&oldEvent).Error == nil {
+						// 记录日志
+						oldContent, _ := json.Marshal(oldEvent)
+						log := TabCalendarLog{
+							CalendarID: oldEvent.CalendarID,
+							EventID:    oldEvent.ID,
+							UserID:     user.ID,
+							ActionType: "delete_event",
+							OldContent: string(oldContent),
+							IP:         ctx.ClientIP(),
+						}
+						models.DB.Create(&log)
+						ReturnJson(ctx, "apiOK", nil)
+					} else {
+						ReturnJson(ctx, "apiErr", nil)
+					}
+				} else {
+					ReturnJson(ctx, "event_not_find", nil)
+				}
+			} else {
+				ReturnJson(ctx, "jsonErr", nil)
+			}
+		} else {
+			ReturnJson(ctx, "userCookieError", nil)
+		}
+	})
+}

frontend/ops_vue_js/src/api/calendar.js

@@ -0,0 +1,43 @@
+import { api } from './index'
+
+export const calendarApi = {
+  // 创建日历
+  createCalendar(data) {
+    return api.post('/calendar/calendar/create', { data })
+  },
+
+  // 获取日历列表
+  getCalendars() {
+    return api.post('/calendar/calendar/list', { data: {} })
+  },
+
+  // 更新日历
+  updateCalendar(data) {
+    return api.post('/calendar/calendar/update', { data })
+  },
+
+  // 删除日历
+  deleteCalendar(id) {
+    return api.post('/calendar/calendar/delete', { data: { id } })
+  },
+
+  // 获取日历事件
+  getEvents(data) {
+    return api.post('/calendar/calendar/events', { data })
+  },
+
+  // 添加日历事件
+  addEvent(data) {
+    return api.post('/calendar/calendar/addevent', { data })
+  },
+
+  // 更新日历事件
+  updateEvent(data) {
+    return api.post('/calendar/calendar/updateevent', { data })
+  },
+
+  // 删除日历事件
+  deleteEvent(id) {
+    return api.post('/calendar/calendar/deleteevent', { data: { id } })
+  }
+}

frontend/ops_vue_js/src/components/AppHeader.vue

@@ -54,6 +54,7 @@ const normalClass = "rounded-md px-3 py-2 text-sm font-medium text-gray-600 tran
 const navItems = computed(() => [
   { label: t("appname.home"), to: "/" },
   { label: t("appname.schedule"), to: "/schedule" },
+  { label: t("appname.calendar"), to: "/calendars" },
   { label: t("appname.purchase"), to: "/purchase" },
   { label: t("appname.work_order"), to: "/work_order" },
   { label: t("appname.warehouse"), to: "/warehouse" },

frontend/ops_vue_js/src/i18n/en.json

@@ -33,7 +33,8 @@
     "purchase": "Purchase",
     "warehouse": "Warehouse",
     "warehouse_items": "Items Overview",
-    "work_order": "Work Order"
+    "work_order": "Work Order",
+    "calendar": "Calendar"
   },
   "tagadder": {
     "not_fund_item": "No matching items found",
@@ -601,5 +602,41 @@
     "created_by": "Created By",
     "not_found": "Customer not found",
     "related_customers": "Related Customers"
+  },
+  "calendar": {
+    "calendars": "Calendar List",
+    "calendar_detail": "Calendar Detail",
+    "create_calendar": "Create Calendar",
+    "edit_calendar": "Edit Calendar",
+    "delete_calendar": "Delete Calendar",
+    "calendar_not_found": "Calendar not found",
+    "no_calendars": "No calendars yet",
+    "name": "Name",
+    "name_required": "Calendar name is required",
+    "name_placeholder": "Enter calendar name",
+    "description": "Description",
+    "description_placeholder": "Enter calendar description",
+    "color": "Color",
+    "is_public": "Public Calendar",
+    "public": "Public",
+    "private": "Private",
+    "create_success": "Calendar created successfully",
+    "update_success": "Calendar updated successfully",
+    "delete_success": "Calendar deleted successfully",
+    "confirm_delete": "Are you sure you want to delete this calendar?",
+    "loading": "Loading...",
+    "add_event": "Add Event",
+    "edit_event": "Edit Event",
+    "delete_event": "Delete Event",
+    "event_title": "Event Title",
+    "event_title_required": "Event title is required",
+    "event_title_placeholder": "Enter event title",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "remark": "Remark",
+    "remark_placeholder": "Enter remark",
+    "event_save_success": "Event saved successfully",
+    "event_delete_success": "Event deleted successfully",
+    "confirm_delete_event": "Are you sure you want to delete this event?"
   }
 }

frontend/ops_vue_js/src/i18n/zh-CN.json

@@ -33,7 +33,8 @@
     "purchase": "采购",
     "warehouse": "仓库",
     "warehouse_items": "物品总览",
-    "work_order": "工单"
+    "work_order": "工单",
+    "calendar": "日历"
   },
   "tagadder": {
     "not_fund_item": "没有找到匹配项",
@@ -601,5 +602,41 @@
     "created_by": "创建者",
     "not_found": "客户不存在",
     "related_customers": "关联客户"
+  },
+  "calendar": {
+    "calendars": "日历列表",
+    "calendar_detail": "日历详情",
+    "create_calendar": "新建日历",
+    "edit_calendar": "编辑日历",
+    "delete_calendar": "删除日历",
+    "calendar_not_found": "日历未找到",
+    "no_calendars": "暂无日历",
+    "name": "名称",
+    "name_required": "请输入日历名称",
+    "name_placeholder": "请输入日历名称",
+    "description": "描述",
+    "description_placeholder": "请输入日历描述",
+    "color": "颜色",
+    "is_public": "公开日历",
+    "public": "公开",
+    "private": "私有",
+    "create_success": "创建成功",
+    "update_success": "更新成功",
+    "delete_success": "删除成功",
+    "confirm_delete": "确定要删除此日历吗？",
+    "loading": "加载中...",
+    "add_event": "添加事件",
+    "edit_event": "编辑事件",
+    "delete_event": "删除事件",
+    "event_title": "事件标题",
+    "event_title_required": "请输入事件标题",
+    "event_title_placeholder": "请输入事件标题",
+    "start_date": "开始日期",
+    "end_date": "结束日期",
+    "remark": "备注",
+    "remark_placeholder": "请输入备注",
+    "event_save_success": "事件保存成功",
+    "event_delete_success": "事件删除成功",
+    "confirm_delete_event": "确定要删除此事件吗？"
   }
 }

frontend/ops_vue_js/src/router/index.js

@@ -129,6 +129,16 @@ const router = createRouter({
           name: 'customer-edit',
           component: () => import('@/views/customer/CustomerFormPage.vue'),
         },
+        {
+          path: 'calendars',
+          name: 'calendars',
+          component: () => import('@/views/calendar/CalendarList.vue'),
+        },
+        {
+          path: 'calendar/:id',
+          name: 'calendar-detail',
+          component: () => import('@/views/calendar/CalendarDetail.vue'),
+        },
       ],
     },
 

frontend/ops_vue_js/src/views/calendar/CalendarDetail.vue

@@ -0,0 +1,492 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import FullCalendar from "@fullcalendar/vue3"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import timeGridPlugin from "@fullcalendar/timegrid"
+import interactionPlugin from "@fullcalendar/interaction"
+import listPlugin from "@fullcalendar/list"
+import { useI18n } from "vue-i18n"
+import { usePageTitle } from "@/composables/usePageTitle"
+import { useToastStore } from "@/stores/toast"
+import { useUserStore } from "@/stores/user"
+import { calendarApi } from "@/api/calendar"
+import { useDateUtils } from "@/composables/useDateUtils"
+import { IconPlus, IconTrash, IconEdit, IconCalendar } from "@tabler/icons-vue"
+
+const route = useRoute()
+const router = useRouter()
+const { t, locale } = useI18n()
+const toast = useToastStore()
+const userStore = useUserStore()
+const DateUtils = useDateUtils()
+
+const calendarId = ref(parseInt(route.params.id))
+const calendarInfo = ref({})
+const loading = ref(false)
+
+usePageTitle('appname.calendar_detail')
+
+const calendarRef = ref(null)
+const calendarNowShow = ref()
+
+const showModal = ref(false)
+const eventData = ref({
+  id: 0,
+  title: "",
+  startDate: "",
+  endDate: "",
+  color: "#3788d9",
+  remark: "",
+  isEditing: false,
+  isEditable: false
+})
+
+const colorOptions = ref([
+  { value: "#3788d9", label: t("schedule.work") },
+  { value: "#06d6a0", label: t("schedule.duty") },
+  { value: "#ff595e", label: t("schedule.exam") },
+  { value: "#ffca3a", label: t("schedule.standby") },
+])
+
+const pageData = ref({
+  seleEventID: 0,
+  lastClickTime: 0,
+  lastClickTimeStr: "",
+  lastEventClickTime: 0,
+  lastEventClickID: 0,
+  submitChecked: false
+})
+
+function openEventModal(startDate, endDate) {
+  eventData.value = {
+    id: 0,
+    title: "",
+    startDate: startDate || "",
+    endDate: endDate || "",
+    color: calendarInfo.value.Color || "#3788d9",
+    remark: "",
+    isEditing: false,
+    isEditable: true
+  }
+  showModal.value = true
+}
+
+function editEvent(event) {
+  eventData.value = {
+    id: event.id,
+    title: event.title,
+    startDate: event.start,
+    endDate: event.end || event.start,
+    color: event.backgroundColor,
+    remark: event.extendedProps?.remark || "",
+    isEditing: true,
+    isEditable: true
+  }
+  showModal.value = true
+}
+
+async function saveEvent() {
+  if (!eventData.value.title.trim()) {
+    toast.error(t('calendar.event_title_required'))
+    return
+  }
+
+  pageData.value.submitChecked = true
+
+  try {
+    let result
+    if (eventData.value.isEditing) {
+      result = await calendarApi.updateEvent({
+        id: eventData.value.id,
+        title: eventData.value.title,
+        start: eventData.value.startDate,
+        end: eventData.value.endDate,
+        color: eventData.value.color,
+        remark: eventData.value.remark
+      })
+    } else {
+      result = await calendarApi.addEvent({
+        calendar_id: calendarId.value,
+        title: eventData.value.title,
+        start: eventData.value.startDate,
+        end: eventData.value.endDate,
+        color: eventData.value.color,
+        remark: eventData.value.remark
+      })
+    }
+
+    if (result.errCode === 0) {
+      toast.success(t('calendar.event_save_success'))
+      showModal.value = false
+      getEvents()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    pageData.value.submitChecked = false
+  }
+}
+
+async function deleteEvent() {
+  if (!confirm(t('calendar.confirm_delete_event'))) {
+    return
+  }
+
+  try {
+    const result = await calendarApi.deleteEvent(eventData.value.id)
+    if (result.errCode === 0) {
+      toast.success(t('calendar.event_delete_success'))
+      showModal.value = false
+      getEvents()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+async function getEvents() {
+  if (!calendarRef.value) return
+
+  const calendarApi2 = calendarRef.value.getApi()
+  const view = calendarApi2.view
+  const start = DateUtils.formatDate(view.activeStart)
+  const end = DateUtils.formatDate(view.activeEnd)
+
+  try {
+    const { errCode, data } = await calendarApi.getEvents({
+      calendar_id: calendarId.value,
+      start: start,
+      end: end
+    })
+
+    if (errCode === 0) {
+      const events = (data.list || []).map(event => ({
+        id: event.ID,
+        title: event.Title,
+        start: event.StartDate,
+        end: event.EndDate,
+        backgroundColor: event.BgColor,
+        borderColor: event.BgColor,
+        extendedProps: {
+          remark: event.Remark
+        }
+      }))
+      calendarOptions.value.events = events
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+async function fetchCalendarInfo() {
+  loading.value = true
+  try {
+    const { errCode, data } = await calendarApi.getCalendars()
+    if (errCode === 0) {
+      const calendar = (data.list || []).find(c => c.ID === calendarId.value)
+      if (calendar) {
+        calendarInfo.value = calendar
+      } else {
+        toast.error(t('calendar.calendar_not_found'))
+        router.push('/calendars')
+      }
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    loading.value = false
+  }
+}
+
+function unseleEvent(eventID) {
+  const target = calendarOptions.value.events.find(item => item.id === eventID)
+  if (target) {
+    target.borderColor = target.backgroundColor
+  }
+}
+
+function unseleEventAll() {
+  unseleEvent(pageData.value.seleEventID)
+  pageData.value.seleEventID = 0
+}
+
+const calendarOptions = ref({
+  height: "100%",
+  contentHeight: "auto",
+  locale: locale.value,
+  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
+  nowIndicator: true,
+  weekends: true,
+  initialView: "dayGridMonth",
+  selectable: true,
+  editable: true,
+  dayMaxEvents: true,
+  firstDay: 1,
+  expandRows: true,
+  stickyHeaderDates: true,
+
+  headerToolbar: {
+    left: "prevYear,prev,today,next,nextYear",
+    center: "title",
+    right: ""
+  },
+
+  customButtons: {
+    prevYear: {
+      text: t("schedule.previous_year"),
+      click() {
+        calendarRef.value.getApi().prevYear()
+        getEvents()
+      }
+    },
+    nextYear: {
+      text: t("schedule.next_year"),
+      click() {
+        calendarRef.value.getApi().nextYear()
+        getEvents()
+      }
+    },
+    prev: {
+      text: t("schedule.previous_month"),
+      click() {
+        calendarRef.value.getApi().prev()
+        getEvents()
+      }
+    },
+    next: {
+      text: t("schedule.next_month"),
+      click() {
+        calendarRef.value.getApi().next()
+        getEvents()
+      }
+    },
+    today: {
+      text: t("schedule.today"),
+      click() {
+        calendarRef.value.getApi().today()
+        getEvents()
+      }
+    }
+  },
+
+  events: [],
+
+  datesSet(info) {
+    calendarNowShow.value = info
+    getEvents()
+  },
+
+  dateClick(info) {
+    const nowTime = new Date().getTime()
+    const timeDifference = nowTime - pageData.value.lastClickTime
+
+    unseleEventAll()
+
+    if (info.dateStr === pageData.value.lastClickTimeStr) {
+      if (timeDifference < 400 && timeDifference > 0) {
+        if (userStore.isLoggedIn) {
+          openEventModal(info.dateStr, info.dateStr)
+        } else {
+          toast.warning(t("message.login_to_your_account"))
+          router.replace("/login?redirect=/calendar/" + calendarId.value)
+        }
+      }
+    }
+    pageData.value.lastClickTimeStr = info.dateStr
+    pageData.value.lastClickTime = nowTime
+  },
+
+  select(info) {
+    if (info.end - info.start > 86400000) {
+      if (userStore.isLoggedIn) {
+        openEventModal(info.startStr, info.endStr)
+      } else {
+        toast.warning(t("message.login_to_your_account"))
+      }
+    }
+  },
+
+  eventClick(info) {
+    const nowTime = new Date().getTime()
+    const timeDifference = nowTime - pageData.value.lastEventClickTime
+
+    if (info.event.id === pageData.value.lastEventClickID) {
+      if (timeDifference < 400 && timeDifference > 0) {
+        editEvent({
+          id: info.event.id,
+          title: info.event.title,
+          start: info.event.startStr?.split('T')[0] || info.event.start?.toISOString().split('T')[0],
+          end: info.event.endStr?.split('T')[0] || info.event.end?.toISOString().split('T')[0],
+          backgroundColor: info.event.backgroundColor
+        })
+      }
+    }
+    pageData.value.lastEventClickID = info.event.id
+    pageData.value.lastEventClickTime = nowTime
+
+    // 选中效果
+    unseleEventAll()
+    const target = calendarOptions.value.events.find(item => String(item.id) === String(info.event.id))
+    if (target) {
+      target.borderColor = "#000000"
+      pageData.value.seleEventID = target.id
+    }
+  }
+})
+
+onMounted(() => {
+  fetchCalendarInfo()
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 px-6 py-6">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <button
+          @click="router.push('/calendars')"
+          class="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dk-muted"
+        >
+          ←
+        </button>
+        <div>
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            {{ calendarInfo.Name || t('calendar.loading') }}
+          </h3>
+          <p v-if="calendarInfo.Description" class="text-sm text-gray-500 dark:text-gray-400">
+            {{ calendarInfo.Description }}
+          </p>
+        </div>
+      </div>
+      <div
+        v-if="userStore.isLoggedIn"
+        class="flex items-center gap-2"
+      >
+        <button
+          @click="openEventModal()"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          <IconPlus :size="16" />
+          {{ t('calendar.add_event') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
+      <FullCalendar
+        ref="calendarRef"
+        :options="calendarOptions"
+      />
+    </div>
+
+    <!-- Event Modal -->
+    <div
+      v-if="showModal"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      @click.self="showModal = false"
+    >
+      <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dk-card">
+        <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+          {{ eventData.isEditing ? t('calendar.edit_event') : t('calendar.add_event') }}
+        </h3>
+
+        <div class="mb-4">
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('calendar.event_title') }} *
+          </label>
+          <input
+            v-model="eventData.title"
+            type="text"
+            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            :placeholder="t('calendar.event_title_placeholder')"
+          />
+        </div>
+
+        <div class="mb-4 grid grid-cols-2 gap-3">
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              {{ t('calendar.start_date') }} *
+            </label>
+            <input
+              v-model="eventData.startDate"
+              type="date"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            />
+          </div>
+          <div>
+            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              {{ t('calendar.end_date') }} *
+            </label>
+            <input
+              v-model="eventData.endDate"
+              type="date"
+              class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            />
+          </div>
+        </div>
+
+        <div class="mb-4">
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('calendar.color') }}
+          </label>
+          <div class="flex gap-2">
+            <button
+              v-for="color in colorOptions"
+              :key="color.value"
+              @click="eventData.color = color.value"
+              class="h-8 w-8 rounded-full transition-transform hover:scale-110"
+              :class="{ 'ring-2 ring-blue-500 ring-offset-2': eventData.color === color.value }"
+              :style="{ backgroundColor: color.value }"
+              :title="color.label"
+            ></button>
+          </div>
+        </div>
+
+        <div class="mb-4">
+          <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ t('calendar.remark') }}
+          </label>
+          <textarea
+            v-model="eventData.remark"
+            rows="3"
+            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+            :placeholder="t('calendar.remark_placeholder')"
+          ></textarea>
+        </div>
+
+        <div class="flex justify-between">
+          <button
+            v-if="eventData.isEditing"
+            @click="deleteEvent"
+            class="inline-flex items-center gap-1 rounded-lg bg-red-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
+          >
+            <IconTrash :size="16" />
+            {{ t('delete') }}
+          </button>
+          <div v-else></div>
+
+          <div class="flex gap-2">
+            <button
+              @click="showModal = false"
+              class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:text-gray-300 dark:hover:bg-dk-muted"
+            >
+              {{ t('cancel') }}
+            </button>
+            <button
+              @click="saveEvent"
+              :disabled="pageData.submitChecked"
+              class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            >
+              {{ t('save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/ops_vue_js/src/views/calendar/CalendarList.vue

@@ -0,0 +1,376 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToastStore } from '@/stores/toast'
+import { usePageTitle } from '@/composables/usePageTitle'
+import { calendarApi } from '@/api/calendar'
+import { useUserStore } from '@/stores/user'
+import { IconPlus, IconCalendar, IconTrash, IconEdit } from '@tabler/icons-vue'
+
+usePageTitle('appname.calendar')
+const { t } = useI18n()
+const router = useRouter()
+const toast = useToastStore()
+const userStore = useUserStore()
+
+const calendars = ref([])
+const loading = ref(false)
+const showCreateModal = ref(false)
+const showEditModal = ref(false)
+const editingCalendar = ref(null)
+
+const form = ref({
+  name: '',
+  description: '',
+  color: '#3788d9',
+  is_public: false
+})
+
+const colorOptions = [
+  '#3788d9',
+  '#06d6a0',
+  '#ff595e',
+  '#ffca3a',
+  '#8b5cf6',
+  '#ec4899'
+]
+
+async function fetchCalendars() {
+  loading.value = true
+  try {
+    const { errCode, data } = await calendarApi.getCalendars()
+    if (errCode === 0) {
+      calendars.value = data.list || []
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreateModal() {
+  form.value = { name: '', description: '', color: '#3788d9', is_public: false }
+  showCreateModal.value = true
+}
+
+function openEditModal(calendar) {
+  editingCalendar.value = calendar
+  form.value = {
+    name: calendar.Name,
+    description: calendar.Description || '',
+    color: calendar.Color,
+    is_public: calendar.IsPublic
+  }
+  showEditModal.value = true
+}
+
+async function createCalendar() {
+  if (!form.value.name.trim()) {
+    toast.error(t('calendar.name_required'))
+    return
+  }
+
+  try {
+    const { errCode, data } = await calendarApi.createCalendar(form.value)
+    if (errCode === 0) {
+      toast.success(t('calendar.create_success'))
+      showCreateModal.value = false
+      fetchCalendars()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+async function updateCalendar() {
+  if (!form.value.name.trim()) {
+    toast.error(t('calendar.name_required'))
+    return
+  }
+
+  try {
+    const { errCode } = await calendarApi.updateCalendar({
+      id: editingCalendar.value.ID,
+      ...form.value
+    })
+    if (errCode === 0) {
+      toast.success(t('calendar.update_success'))
+      showEditModal.value = false
+      fetchCalendars()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+async function deleteCalendar(calendar) {
+  if (!confirm(t('calendar.confirm_delete'))) {
+    return
+  }
+
+  try {
+    const { errCode } = await calendarApi.deleteCalendar(calendar.ID)
+    if (errCode === 0) {
+      toast.success(t('calendar.delete_success'))
+      fetchCalendars()
+    } else {
+      toast.error(t('message.server_error'))
+    }
+  } catch {
+    // 拦截器已处理
+  }
+}
+
+function goToCalendar(id) {
+  router.push(`/calendar/${id}`)
+}
+
+onMounted(fetchCalendars)
+</script>
+
+<template>
+  <div class="mx-auto max-w-6xl px-6 py-6">
+    <div class="flex flex-col gap-6 rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
+      <!-- Header -->
+      <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4 dark:border-dk-muted">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('calendar.calendars') }}</h3>
+        <button
+          @click="openCreateModal"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          <IconPlus :size="16" />
+          {{ t('calendar.create_calendar') }}
+        </button>
+      </div>
+
+      <!-- Calendar List -->
+      <div class="px-6 py-3">
+        <div v-if="loading" class="py-8 text-center text-gray-400">
+          <svg class="mx-auto mb-2 h-5 w-5 animate-spin text-gray-400" viewBox="0 0 24 24" fill="none">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          Loading...
+        </div>
+
+        <div v-else-if="calendars.length === 0" class="py-8 text-center text-gray-400">
+          {{ t('calendar.no_calendars') }}
+        </div>
+
+        <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div
+            v-for="calendar in calendars"
+            :key="calendar.ID"
+            class="cursor-pointer rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:hover:bg-dk-base"
+            @click="goToCalendar(calendar.ID)"
+          >
+            <div class="flex items-start justify-between">
+              <div class="flex items-center gap-3">
+                <div
+                  class="h-4 w-4 rounded-full"
+                  :style="{ backgroundColor: calendar.Color }"
+                ></div>
+                <div>
+                  <h4 class="font-medium text-gray-900 dark:text-white">{{ calendar.Name }}</h4>
+                  <p v-if="calendar.Description" class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                    {{ calendar.Description }}
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-center gap-1" @click.stop>
+                <button
+                  v-if="calendar.UserID === userStore.userInfo.ID"
+                  @click="openEditModal(calendar)"
+                  class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dk-muted"
+                >
+                  <IconEdit :size="16" />
+                </button>
+                <button
+                  v-if="calendar.UserID === userStore.userInfo.ID"
+                  @click="deleteCalendar(calendar)"
+                  class="rounded p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-dk-muted"
+                >
+                  <IconTrash :size="16" />
+                </button>
+              </div>
+            </div>
+
+            <div class="mt-3 flex items-center gap-2 text-xs text-gray-400">
+              <IconCalendar :size="14" />
+              <span>{{ calendar.IsPublic ? t('calendar.public') : t('calendar.private') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Create Calendar Modal -->
+  <div
+    v-if="showCreateModal"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    @click.self="showCreateModal = false"
+  >
+    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dk-card">
+      <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+        {{ t('calendar.create_calendar') }}
+      </h3>
+
+      <div class="mb-4">
+        <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('calendar.name') }} *
+        </label>
+        <input
+          v-model="form.name"
+          type="text"
+          class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          :placeholder="t('calendar.name_placeholder')"
+        />
+      </div>
+
+      <div class="mb-4">
+        <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('calendar.description') }}
+        </label>
+        <textarea
+          v-model="form.description"
+          rows="3"
+          class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          :placeholder="t('calendar.description_placeholder')"
+        ></textarea>
+      </div>
+
+      <div class="mb-4">
+        <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('calendar.color') }}
+        </label>
+        <div class="flex gap-2">
+          <button
+            v-for="color in colorOptions"
+            :key="color"
+            @click="form.color = color"
+            class="h-8 w-8 rounded-full transition-transform hover:scale-110"
+            :class="{ 'ring-2 ring-blue-500 ring-offset-2': form.color === color }"
+            :style="{ backgroundColor: color }"
+          ></button>
+        </div>
+      </div>
+
+      <div class="mb-6 flex items-center gap-2">
+        <input
+          id="is_public"
+          v-model="form.is_public"
+          type="checkbox"
+          class="rounded border-gray-300"
+        />
+        <label for="is_public" class="text-sm text-gray-700 dark:text-gray-300">
+          {{ t('calendar.is_public') }}
+        </label>
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <button
+          @click="showCreateModal = false"
+          class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:text-gray-300 dark:hover:bg-dk-muted"
+        >
+          {{ t('cancel') }}
+        </button>
+        <button
+          @click="createCalendar"
+          class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          {{ t('create') }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit Calendar Modal -->
+  <div
+    v-if="showEditModal"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+    @click.self="showEditModal = false"
+  >
+    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dk-card">
+      <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+        {{ t('calendar.edit_calendar') }}
+      </h3>
+
+      <div class="mb-4">
+        <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('calendar.name') }} *
+        </label>
+        <input
+          v-model="form.name"
+          type="text"
+          class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          :placeholder="t('calendar.name_placeholder')"
+        />
+      </div>
+
+      <div class="mb-4">
+        <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('calendar.description') }}
+        </label>
+        <textarea
+          v-model="form.description"
+          rows="3"
+          class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition-colors focus:border-blue-500 dark:border-dk-muted dark:bg-dk-base dark:text-white"
+          :placeholder="t('calendar.description_placeholder')"
+        ></textarea>
+      </div>
+
+      <div class="mb-4">
+        <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('calendar.color') }}
+        </label>
+        <div class="flex gap-2">
+          <button
+            v-for="color in colorOptions"
+            :key="color"
+            @click="form.color = color"
+            class="h-8 w-8 rounded-full transition-transform hover:scale-110"
+            :class="{ 'ring-2 ring-blue-500 ring-offset-2': form.color === color }"
+            :style="{ backgroundColor: color }"
+          ></button>
+        </div>
+      </div>
+
+      <div class="mb-6 flex items-center gap-2">
+        <input
+          id="edit_is_public"
+          v-model="form.is_public"
+          type="checkbox"
+          class="rounded border-gray-300"
+        />
+        <label for="edit_is_public" class="text-sm text-gray-700 dark:text-gray-300">
+          {{ t('calendar.is_public') }}
+        </label>
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <button
+          @click="showEditModal = false"
+          class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 dark:border-dk-muted dark:text-gray-300 dark:hover:bg-dk-muted"
+        >
+          {{ t('cancel') }}
+        </button>
+        <button
+          @click="updateCalendar"
+          class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+        >
+          {{ t('save') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>