add calendar page

src/router/index.ts

@@ -10,12 +10,14 @@ import { useConfigStore } from "@/stores/config";
 const routes: Array<RouteRecordRaw> = [
 	{
 		path: "/sso-callback/",
-		component: () => import("@/views/crafted/authentication/basic-flow/SsoCallback.vue"),
+		component: () =>
+			import("@/views/crafted/authentication/basic-flow/SsoCallback.vue"),
 	},
 	{
 		path: "/sso-sign-in",
 		name: "sso-sign-in",
-	  component: () => import("@/views/crafted/authentication/basic-flow/SsoSignIn.vue"),	 
+		component: () =>
+			import("@/views/crafted/authentication/basic-flow/SsoSignIn.vue"),
 	},
 	{
 		path: "/error/",
@@ -24,13 +26,16 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/no-permission-page",
 				name: "no-permission-page",
-			component: () => import("@/views/crafted/authentication/ErrorNoPermission.vue"),
+				component: () =>
+					import(
+						"@/views/crafted/authentication/ErrorNoPermission.vue"
+					),
 				meta: {
 					pageTitle: "welcome",
 					breadcrumbs: [],
 				},
-	    }
+			},
-	]
+		],
 	},
 	{
 		path: "/",
@@ -70,7 +75,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/setting/setting",
 				name: "daylightSetting",
-        component: () => import("@/views/daylightAppSetting/setting/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/setting/Index.vue"),
 				meta: {
 					pageTitle: "Reservation Setting",
 					breadcrumbs: ["reservation setting"],
@@ -88,7 +94,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/section/section",
 				name: "daylightSection",
-	    component: () => import("@/views/daylightAppSetting/section/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/section/Index.vue"),
 				meta: {
 					pageTitle: "Section Setting",
 					breadcrumbs: ["section setting"],
@@ -97,7 +104,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/property/property",
 				name: "property",
-        component: () => import("@/views/appSetting/property/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/property/Index.vue"),
 				meta: {
 					pageTitle: "Hotel Property Setting",
 					breadcrumbs: ["hotel property setting"],
@@ -106,7 +114,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/property/property",
 				name: "daylightProperty",
-        component: () => import("@/views/daylightAppSetting/property/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/property/Index.vue"),
 				meta: {
 					pageTitle: "Hotel Property Setting",
 					breadcrumbs: ["hotel property setting"],
@@ -124,7 +133,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/tier/tier",
 				name: "daylightTier",
-	    component: () => import("@/views/daylightAppSetting/tier/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/tier/Index.vue"),
 				meta: {
 					pageTitle: "Tier Setting",
 					breadcrumbs: ["tier setting"],
@@ -133,7 +143,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/bookingType/bookingType",
 				name: "bookingType",
-	    component: () => import("@/views/appSetting/bookingType/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/bookingType/Index.vue"),
 				meta: {
 					pageTitle: "Booking Type Setting",
 					breadcrumbs: ["booking type"],
@@ -142,7 +153,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/bookingType/bookingType",
 				name: "daylightBookingType",
-	    component: () => import("@/views/daylightAppSetting/bookingType/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/bookingType/Index.vue"),
 				meta: {
 					pageTitle: "Booking Type Setting",
 					breadcrumbs: ["booking type"],
@@ -151,7 +163,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/blockCode/blockCode",
 				name: "blockCode",
-        component: () => import("@/views/appSetting/blockCode/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/blockCode/Index.vue"),
 				meta: {
 					pageTitle: "Block Code Setting",
 					breadcrumbs: ["block code setting"],
@@ -160,7 +173,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/blockCode/blockCode",
 				name: "daylightBlockCode",
-        component: () => import("@/views/daylightAppSetting/blockCode/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/blockCode/Index.vue"),
 				meta: {
 					pageTitle: "Block Code Setting",
 					breadcrumbs: ["block code setting"],
@@ -178,7 +192,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/rate/rate",
 				name: "daylightRate",
-        component: () => import("@/views/daylightAppSetting/rate/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/rate/Index.vue"),
 				meta: {
 					pageTitle: "Rate Code Setting",
 					breadcrumbs: ["rate code setting"],
@@ -196,7 +211,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/source/source",
 				name: "daylightSource",
-        component: () => import("@/views/daylightAppSetting/source/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/source/Index.vue"),
 				meta: {
 					pageTitle: "Source Code Setting",
 					breadcrumbs: ["source code setting"],
@@ -214,7 +230,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/market/market",
 				name: "daylightMarket",
-        component: () => import("@/views/daylightAppSetting/market/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/market/Index.vue"),
 				meta: {
 					pageTitle: "Market Code Setting",
 					breadcrumbs: ["market code setting"],
@@ -232,7 +249,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/department/department",
 				name: "department",
-		component: () => import("@/views/appSetting/department/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/department/Index.vue"),
 				meta: {
 					pageTitle: "Department Setting",
 					breadcrumbs: ["department setting"],
@@ -241,7 +259,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/division/division",
 				name: "division",
-		component: () => import("@/views/appSetting/division/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/division/Index.vue"),
 				meta: {
 					pageTitle: "Division Setting",
 					breadcrumbs: ["division setting"],
@@ -259,7 +278,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/room/room",
 				name: "daylightRoom",
-        component: () => import("@/views/daylightAppSetting/room/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/room/Index.vue"),
 				meta: {
 					pageTitle: "Room Setting",
 					breadcrumbs: ["room setting"],
@@ -268,7 +288,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/roomType/roomType",
 				name: "roomType",
-        component: () => import("@/views/appSetting/roomType/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/roomType/Index.vue"),
 				meta: {
 					pageTitle: "Room Type Setting",
 					breadcrumbs: ["room type setting"],
@@ -277,7 +298,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/teamStructure/teamStructure",
 				name: "teamStructure",
-		component: () => import("@/views/appSetting/teamStructure/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/teamStructure/Index.vue"),
 				meta: {
 					pageTitle: "Team Structure Setting",
 					breadcrumbs: ["team structure setting"],
@@ -286,7 +308,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/roomType/roomType",
 				name: "daylightRoomType",
-        component: () => import("@/views/daylightAppSetting/roomType/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/roomType/Index.vue"),
 				meta: {
 					pageTitle: "Room Type Setting",
 					breadcrumbs: ["room type setting"],
@@ -295,7 +318,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/roomFeature/roomFeature",
 				name: "roomFeature",
-	    component: () => import("@/views/appSetting/roomFeature/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/roomFeature/Index.vue"),
 				meta: {
 					pageTitle: "Room Feature Setting",
 					breadcrumbs: ["room feature setting"],
@@ -304,7 +328,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/roomFeature/roomFeature",
 				name: "daylightRoomFeature",
-	    component: () => import("@/views/daylightAppSetting/roomFeature/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/roomFeature/Index.vue"),
 				meta: {
 					pageTitle: "Room Feature Setting",
 					breadcrumbs: ["room feature setting"],
@@ -313,7 +338,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/itemInventory/itemInventory",
 				name: "itemInventory",
-	    component: () => import("@/views/appSetting/itemInventory/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/itemInventory/Index.vue"),
 				meta: {
 					pageTitle: "Item Inventory Code",
 					breadcrumbs: ["item inventory code"],
@@ -322,7 +348,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/itemInventory/itemInventory",
 				name: "daylightItemInventory",
-	    component: () => import("@/views/daylightAppSetting/itemInventory/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/itemInventory/Index.vue"
+					),
 				meta: {
 					pageTitle: "Item Inventory Code",
 					breadcrumbs: ["item inventory code"],
@@ -340,7 +369,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/user/user",
 				name: "daylightUser",
-        component: () => import("@/views/daylightAppSetting/user/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/user/Index.vue"),
 				meta: {
 					pageTitle: "User Mapping",
 					breadcrumbs: ["user mapping"],
@@ -358,7 +388,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/daylight/daylight",
 				name: "daylight",
-        component: () => import("@/views/daylightAppSetting/daylight/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/daylight/Index.vue"),
 				meta: {
 					pageTitle: "User-Room Mapping",
 					breadcrumbs: ["user-room mapping"],
@@ -367,7 +398,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/exceptionOpera/exceptionOpera",
 				name: "exceptionOpera",
-	    component: () => import("@/views/appSetting/exceptionOpera/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/exceptionOpera/Index.vue"),
 				meta: {
 					pageTitle: "Exception Opera Mapping",
 					breadcrumbs: ["exception opera mapping"],
@@ -376,7 +408,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/exceptionDaylight/exceptionDaylight",
 				name: "daylightExceptionDaylight",
-	    component: () => import("@/views/daylightAppSetting/exceptionDaylight/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/exceptionDaylight/Index.vue"
+					),
 				meta: {
 					pageTitle: "Exception User-Room Mapping",
 					breadcrumbs: ["exception user-room mapping"],
@@ -385,7 +420,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/criteria/criteria",
 				name: "criteria",
-        component: () => import("@/views/appSetting/criteria/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/criteria/Index.vue"),
 				meta: {
 					pageTitle: "Room Allotment Control",
 					breadcrumbs: ["Room Allotment Control"],
@@ -394,7 +430,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/criteria/criteria",
 				name: "daylightCriteria",
-        component: () => import("@/views/daylightAppSetting/criteria/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/criteria/Index.vue"),
 				meta: {
 					pageTitle: "Room Allotment Control",
 					breadcrumbs: ["Room Allotment Control"],
@@ -412,7 +449,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/bedType/bedType",
 				name: "daylightBedType",
-	    component: () => import("@/views/daylightAppSetting/bedType/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/bedType/Index.vue"),
 				meta: {
 					pageTitle: "Bed Type Mapping",
 					breadcrumbs: ["bed type mapping"],
@@ -421,7 +459,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/otherProperty/roomStatus",
 				name: "otherRoomStatus",
-	    component: () => import("@/views/appSetting/otherProperty/roomStatus/Index.vue"),
+				component: () =>
+					import(
+						"@/views/appSetting/otherProperty/roomStatus/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Property Room Status",
 					breadcrumbs: ["Other Property Room Status"],
@@ -430,7 +471,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/otherProperty/roomStatus",
 				name: "daylightOtherRoomStatus",
-	    component: () => import("@/views/daylightAppSetting/otherProperty/roomStatus/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/otherProperty/roomStatus/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Property Room Status",
 					breadcrumbs: ["Other Property Room Status"],
@@ -439,7 +483,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/otherProperty/segment",
 				name: "otherSegment",
-	    component: () => import("@/views/appSetting/otherProperty/segment/Index.vue"),
+				component: () =>
+					import(
+						"@/views/appSetting/otherProperty/segment/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Property Segment",
 					breadcrumbs: ["Other Property Segment"],
@@ -448,7 +495,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/otherProperty/segment",
 				name: "daylightOtherSegment",
-	    component: () => import("@/views/daylightAppSetting/otherProperty/segment/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/otherProperty/segment/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Property Segment",
 					breadcrumbs: ["Other Property Segment"],
@@ -457,16 +507,32 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/otherProperty/userMapping",
 				name: "otherUserMapping",
-	    component: () => import("@/views/appSetting/otherProperty/userMapping/Index.vue"),
+				component: () =>
+					import(
+						"@/views/appSetting/otherProperty/userMapping/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Property User Mapping",
 					breadcrumbs: ["Other Property User Mapping"],
 				},
 			},
+			{
+				path: "/appSetting/calendarSetting/calendarSetting",
+				name: "calendarSetting",
+				component: () =>
+					import("@/views/appSetting/calendarSetting/Index.vue"),
+				meta: {
+					pageTitle: "Room Calendar Access Setting",
+					breadcrumbs: ["Room Calendar Access Setting"],
+				},
+			},
 			{
 				path: "/daylightAppSetting/otherProperty/userMapping",
 				name: "daylightOtherUserMapping",
-	    component: () => import("@/views/daylightAppSetting/otherProperty/userMapping/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/otherProperty/userMapping/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Property User Mapping",
 					breadcrumbs: ["Other Property User Mapping"],
@@ -475,7 +541,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/otherProperty/allotment",
 				name: "otherAllotment",
-	    component: () => import("@/views/appSetting/otherProperty/allotment/Index.vue"),
+				component: () =>
+					import(
+						"@/views/appSetting/otherProperty/allotment/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Properties Allotment",
 					breadcrumbs: ["Other Properties Allotment"],
@@ -484,7 +553,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/otherProperty/allotment",
 				name: "daylightOtherAllotment",
-	    component: () => import("@/views/daylightAppSetting/otherProperty/allotment/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/otherProperty/allotment/Index.vue"
+					),
 				meta: {
 					pageTitle: "Other Properties Allotment",
 					breadcrumbs: ["Other Properties Allotment"],
@@ -493,7 +565,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/emailTemplate/emailTemplate",
 				name: "emailTemplate",
-	    component: () => import("@/views/appSetting/emailTemplate/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/emailTemplate/Index.vue"),
 				meta: {
 					pageTitle: "Email Template",
 					breadcrumbs: ["Email Template"],
@@ -502,7 +575,10 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/emailTemplate/emailTemplate",
 				name: "daylightEmailTemplate",
-	    component: () => import("@/views/daylightAppSetting/emailTemplate/Index.vue"),
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/emailTemplate/Index.vue"
+					),
 				meta: {
 					pageTitle: "Email Template",
 					breadcrumbs: ["Email Template"],
@@ -511,7 +587,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/reservation/allotmentDashboard/allotmentDashboard",
 				name: "otherAllotmentDashboard",
-	    component: () => import("@/views/reservation/allotmentDashboard/Index.vue"),
+				component: () =>
+					import("@/views/reservation/allotmentDashboard/Index.vue"),
 				meta: {
 					pageTitle: "Other Properties Allotment Dashboard",
 					breadcrumbs: ["Other Properties Allotment Dashboard"],
@@ -520,7 +597,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/appSetting/nonMGMStatus/nonMGMStatus",
 				name: "nonMGMStatus",
-	    component: () => import("@/views/appSetting/nonMGMStatus/Index.vue"),
+				component: () =>
+					import("@/views/appSetting/nonMGMStatus/Index.vue"),
 				meta: {
 					pageTitle: "Non MGM Booking Setting",
 					breadcrumbs: ["non-mgm booking setting"],
@@ -529,16 +607,30 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/daylightAppSetting/nonMGMStatus/nonMGMStatus",
 				name: "daylightNonMGMStatus",
-	    component: () => import("@/views/daylightAppSetting/nonMGMStatus/Index.vue"),
+				component: () =>
+					import("@/views/daylightAppSetting/nonMGMStatus/Index.vue"),
 				meta: {
 					pageTitle: "Non MGM Booking Setting",
 					breadcrumbs: ["non-mgm booking setting"],
 				},
 			},
+			{
+				path: "/daylightAppSetting/calendarSetting/calendarSetting",
+				name: "daylightCalendarSetting",
+				component: () =>
+					import(
+						"@/views/daylightAppSetting/calendarSetting/Index.vue"
+					),
+				meta: {
+					pageTitle: "Room Calendar Access Setting",
+					breadcrumbs: ["Room Calendar Access Setting"],
+				},
+			},
 			{
 				path: "/reservation/waitlist/waitlist",
 				name: "waitlist",
-      component: () => import("@/views/reservation/waitlist/Index.vue"),
+				component: () =>
+					import("@/views/reservation/waitlist/Index.vue"),
 				meta: {
 					pageTitle: "Waitlist",
 					breadcrumbs: ["Waitlist"],
@@ -646,7 +738,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/approval/approvalRoutingLog/approvalRoutingLog",
 				name: "approvalRoutingLog",
-        component: () => import("@/views/approval/approvalRoutingLog/Index.vue"),
+				component: () =>
+					import("@/views/approval/approvalRoutingLog/Index.vue"),
 				meta: {
 					pageTitle: "Approval Routing Log",
 					breadcrumbs: ["approval routing log"],
@@ -655,7 +748,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/approval/requestReasonSetting/requestReasonSetting",
 				name: "requestReasonSetting",
-        component: () => import("@/views/approval/requestReasonSetting/Index.vue"),
+				component: () =>
+					import("@/views/approval/requestReasonSetting/Index.vue"),
 				meta: {
 					pageTitle: "Request Reason Setting",
 					breadcrumbs: ["request reason setting"],
@@ -671,7 +765,9 @@ const routes: Array<RouteRecordRaw> = [
 				path: "/sign-in",
 				name: "sign-in",
 				component: () =>
-			  import("@/views/crafted/authentication/basic-flow/SignIn.vue"),
+					import(
+						"@/views/crafted/authentication/basic-flow/SignIn.vue"
+					),
 				meta: {
 					pageTitle: "system_login",
 				},
@@ -679,12 +775,18 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/sign-off",
 				name: "sign-off",
-		  component: () => import("@/views/crafted/authentication/basic-flow/SignOff.vue"),
+				component: () =>
+					import(
+						"@/views/crafted/authentication/basic-flow/SignOff.vue"
+					),
 			},
 			{
 				path: "/sso-callback",
 				name: "sso-callback",
-		  component: () => import("@/views/crafted/authentication/basic-flow/SsoCallback.vue"),
+				component: () =>
+					import(
+						"@/views/crafted/authentication/basic-flow/SsoCallback.vue"
+					),
 			},
 		],
 	},
@@ -696,7 +798,8 @@ const routes: Array<RouteRecordRaw> = [
 				// the 404 route, when none of the above matches
 				path: "/404",
 				name: "404",
-        component: () => import("@/views/crafted/authentication/Error404.vue"),
+				component: () =>
+					import("@/views/crafted/authentication/Error404.vue"),
 				meta: {
 					pageTitle: "Error 404",
 				},
@@ -704,7 +807,8 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "/500",
 				name: "500",
-        component: () => import("@/views/crafted/authentication/Error500.vue"),
+				component: () =>
+					import("@/views/crafted/authentication/Error500.vue"),
 				meta: {
 					pageTitle: "Error 500",
 				},
@@ -729,31 +833,32 @@ router.beforeResolve(async (to, from, next) => {
 	let baseUrl = import.meta.env.BASE_URL;
 	let browserUrl = window.location.href;
 	//console.log('Windows '+browserUrl);
-  const pattern = '(.+'+baseUrl+')(.+)#.';
+	const pattern = "(.+" + baseUrl + ")(.+)#.";
 	let matchResult = browserUrl.match(pattern);
 	if (matchResult != null && matchResult.length >= 3) {
 		let newUrl = browserUrl;
 		let dynamicRouter = matchResult[2];
-	  if(dynamicRouter.includes('code=') 
+		if (
-	  || dynamicRouter.includes('token=') 
+			dynamicRouter.includes("code=") ||
-	  || dynamicRouter.includes('SAMLResponse=')){		  
+			dynamicRouter.includes("token=") ||
-		  if(dynamicRouter.includes('?')){
+			dynamicRouter.includes("SAMLResponse=")
-			  dynamicRouter+='&';
+		) {
+			if (dynamicRouter.includes("?")) {
+				dynamicRouter += "&";
 			} else {
-			  dynamicRouter+='?';
+				dynamicRouter += "?";
 			}
 			//dynamicRouter+='SAMLResponse=tVhbb%2bI4FP4rFg%2b7TyGBprTNMmhpoC1aUirCzEjzYpnEoZ6N48h2aDu%2ffo8TaKE3knZHqiri%2bNw%2ff%2bfEfUV4mntzqnKRKYomoy8tnLhO99h1Ti3H6VLLdWJqndJuxzo6JT3n1Fm6UXLUQt%2boVExkX1rdttNCE6UKOsmUJpmGJafrWqCg01s4Z17nzOuetI977o8WGlGlWUZ0KXmrda482%2bb8NuIxXUdcOR2bR5Jj%2bIlJzFlmt5BvXDNqC5l5giimvIxwqjwdeeEwmHrggRdVm7wiUzmNWMJo3EL3PM2UV8b4vnQuhRaRSFuDfhmJrETfFyJKUWkiaQ1MJBAIiRPV5ivOSUSKdiR4uWLDtjWLqLK1LJTu25WJQb9KfqiJLtT%2bky9iir6RtKDvu6DK3V5YRKBetZA96Nv7WodbJ6vadt0EquhS68h1zyy3lzjWMj45sWiXnEbwknR7Z7Wq6Z7%2beI6BZinbJPqDqQuL5U8a6UH%2fGmxMRoNOp%2bv2en%2bDgjYXfXuzut0GCEqY5CXsUED1rYgPoIl7S0okla1XdYyIJuha6Fk2k8NEU%2fk8SV33CfJzgGPOSgDXBLyp4itWn1YHfViPmVlUxo9zmghJ36jU0RE48aazHWd3H%2bCliMHXiAIlaMmiyu52cQD5xVwsWUq3PkMUffvx%2fdPPPXn7yV1QpuHFstDUQJRySMzOGjKVqxIFeVLRLeVEtQFZSpC8LeTKvlN213GObfhjMQgz%2fWBHKWFc2aaOrR1l5QEaDDMG1ZpSka3Avf13OwuNnNgYvJSiyF9aHAlOWIa%2bAnjVS5PPN08v8UWIr4chvhKapniWU1nWW1mQRMB%2f%2bYDnNBdSKxyImCUPTdQuREwe%2fgSg0Ds8n33CoV1%2fPuLIS3VrmhUUByQjqxIJn1dqkvbRRE0W1oLyPAVYNkxUgKcsoXVNXgbID9B5oVgGrA09cU1TkZv4D4qOM7JMKZ4VOhXiX%2bwTAGds7NKDotOHLMJ%2bapgIl8A9KPE9ROdAkBGaZEAbGdVoWPYZVFscjngWExk%2f11BPwW5pLhdT6APQ41XD0oDkFhGNBRdBeAtdoKngAm9hVMumL1Ih0Y1kma6Z2QAQNAYL4oEervt8FGIYu%2f7VIgcS4XBcqho0CSkpVMlBjfLgkzTFPsBNUsuH7i04lbDYOJ%2fPaePi3PIlhX5ilMV4WEA%2fl%2bxXRZPNT%2f01qLwk0HlX%2bEawD3HQcxVW6WydMKeTYLah9np7p2IlssOQmiHfR%2bHXm%2fG8SRwvCdkCqMEjzGTWcE1YSqD36wfsw7H4SKLeNTDPtXXFACfyAZ8bdvsN%2bn1R1K9wOLuBekpNUhykht%2fHSQLTF1tTPJxOPyM%2bNZSPOpbbRMnYcGgumfqYpuBjmAh8PBcCJj1faMKwL4VSwCc5AMDkt3afDUI0O%2bodA88JdJMWdZvI8FchKbqBD4c7AX3ETCC6nKxqyu9GEmz6tLVp1xW5j5iEXOIZpFTiCxJpdUtp427xhvItK0jBxR%2bE53%2bN16b%2fgtDvVH9%2b%2ff%2bov%2f7d%2fr9poF4EwzRFphcGlC8BEeP7iOYa%2fbg6zI%2fADqg6VsiqOahPsjV8SJSfkFNgKTTMcynWoOBRjz8PDp9nSkA0TUVUqWokvO%2b2f2n%2bCZ7DqYgp5U9vSr6rcyJhLCsyir6zLBZ3Co2P0arWqQrDebghtVpBl9thDqkmD3xJM%2biP6UE5OpLkDi18E5IxVleARreQF95sXA3GYXOB4GJYEz5lTZCRKWsN%2fwHzK0k4qpqVrDEnAgF%2fSsM%2brY9H3%2fH43szl0FzMlQa%2bgA97ZVUncPHPwnS5mY%2bn4aIuyV8UPxkogcwHoxv0NQfvYlolqDYsr4TSEB5ms5DkOS6Fa36wbEX9IHxfbvez%2f%2bn37oUEDJXZ4zMqH1%2b9EOt4R8eee9J2O%2baaJQT0wKmeZDG9r3vbtjHmC2jv93r%2fyU%2bh8c1pMjCXVQmc8moE9gjsMXcfFYl4d9X5Nbcvr8juL28fd4K1Hy8JH68PtzfCg%2f8A&Signature=cW0dDCBzojJYmppEv7E3osAKPlrBUzh4zws6uZ%2f5GyCq0e3DqAcqRvqBEszEibz5P7%2fn0sxAE9ZWGfyb%2ffv1HRHQjdhmYtue15UYzJ2pU6jzMv3V4XiuV%2fQbDr3m4XGNkGgkBZe2YK9wY2AUVDOKlmNCB%2bT7ltHHSJ0E0TVNwY9dniGZD07DGHnU62ko0gtLSkEgMsI2gOdAsbsyPwLe66dT18pP4bRGPVY0Rwsew%2fNCo4tUVEEzAiZ47gSmpFJoN09U2l9dB1sLDrKYk8ZI7EiLLq1i9JUFuKegCgaY0mLR9AxP3%2fhtszdn6Qd0pmvxSWcH5jIgjN5RKVogw8FIRg%3d%3d&SigAlg=http%3a%2f%2fwww.w3.org%2f2001%2f04%2fxmldsig-more%23rsa-sha256';
-		  newUrl = matchResult[1]+'#/sso-callback/'+dynamicRouter;
+			newUrl = matchResult[1] + "#/sso-callback/" + dynamicRouter;
 		} else {
-		  newUrl = matchResult[1]+'#/'+dynamicRouter;
+			newUrl = matchResult[1] + "#/" + dynamicRouter;
 		}
 		window.location.href = newUrl;
 		return false;
 	} else {
 		next();
 	}
- 
+});
-})
 
 router.beforeEach((to, from, next) => {
 	const authStore = useAuthStore();

src/views/appSetting/calendarSetting/Index.vue

@@ -0,0 +1,368 @@
+<template>
+    <!--begin::Toolbar-->
+    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
+        <!--begin::Toolbar container-->
+        <div
+        id="kt_app_toolbar_container"
+        class="d-flex flex-stack"
+        :class="{
+            'container-fluid': toolbarWidthFluid,
+            'container-xxl': !toolbarWidthFluid,
+        }"
+        style="padding:0px;"
+        >
+        <KTPageTitle />
+        </div>
+        <!--end::Toolbar container-->
+    </div>
+    <!--end::Toolbar-->
+	<!-- begin:: Content -->
+	<div class="kt-content kt-grid__item kt-grid__item--fluid" id="kt_content">
+		<!--Begin::Section-->
+		<div class="row">
+			<div class="kt-portlet kt-portlet--mobile">
+				<el-form
+				  @submit.prevent="submit()"
+				  :model="configData"
+				  :rules="rules"
+				  ref="formRef"
+				>
+				<div class="kt-portlet__body">
+					<div class="form-group row" style="border-top:1px solid #ddd;"></div>
+					<div class="form-group row" style="margin-top:30px;">
+						<h5>Room Calendar Setting</h5>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Previous days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_PREVIOUS_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_PREVIOUS_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Visible days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_VISIBLE_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_VISIBLE_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Selection Limit:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="MAX_SELECTED_ROOM_TYPES">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.MAX_SELECTED_ROOM_TYPES" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">View yesterday time range:</label>
+						<div class="col-lg-6">
+							<el-form-item>
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-time-picker :disabled="!enableModify" v-model="calendarTimeRange" is-range format="HH:mm" value-format="HH:mm" start-placeholder="Start time"
+                                    end-placeholder="End time" style="width: 150px"/>
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+				</div>
+				<div class="kt-portlet__foot">
+					<div class="form-group row" style="border-top:1px solid #ddd;margin-top:20px;margin-bottom:12px;"></div>
+					<div class="row">
+						<div class="col-lg-3"></div>
+						<div class="col-lg-6">
+							<!--begin::Button-->
+							<button v-if="enableModify"
+							  :disabled="loading"
+							  :data-kt-indicator="loading ? 'on' : null"
+							  class="btn btn-sm btn-primary me-3"
+							  type="submit"
+							>
+							  <span v-if="!loading" class="indicator-label">
+							   <i class="fa fa-save"></i>&nbsp; Save
+							  </span>
+							  <span v-if="loading" class="indicator-progress">
+							    Please wait...
+							    <span
+							      class="spinner-border spinner-border-sm align-middle ms-2"
+							    ></span>
+							  </span>
+							</button>
+							<!--end::Button-->
+							<button v-if="enableModify" type="button" @click="onResetClickHandle" class="btn btn-sm btn-secondary text-primary"><i class="fa fa-redo text-primary"></i> Reset</button>
+						</div>
+					</div>
+				</div>
+				</el-form>
+			</div>
+		</div>
+		<!--End::Section-->
+	</div>
+	<!-- end:: Content -->
+
+	<div v-loading.fullscreen.lock="pageLoading" element-loading-text="Loading..."></div>
+  </template>
+
+  <script lang="ts">
+	import { defineComponent, onMounted, ref } from "vue";
+	import KTPageTitle from "@/layouts/main-layout/toolbar/PageTitle.vue";
+	import { toolbarWidthFluid } from "@/core/helpers/config";
+	import ApiService from "@/core/services/ApiService";
+	import type { ResponseData } from "@/core/data/AjaxData";
+	import Swal from "sweetalert2";
+	import { ElNotification } from "element-plus";
+	import { useAuthStore } from "@/stores/auth";
+
+	type CalendarConfig = {
+		CALENDAR_VIEW_PREVIOUS_DAYS: number | null;
+		CALENDAR_VIEW_VISIBLE_DAYS: number | null;
+		CALENDAR_VIEW_YESTERDAY_START: string;
+		CALENDAR_VIEW_YESTERDAY_END: string;
+		MAX_SELECTED_ROOM_TYPES:number | null;
+	};
+
+	type AppSettingItem = {
+		keys: keyof CalendarConfig;
+		keyValues: CalendarConfig[keyof CalendarConfig] | "";
+	};
+
+	type AppSettingResponseItem = {
+		keys: string;
+		keyValues: string | number | null;
+	};
+
+  export default defineComponent({
+    name: "calendar-setting",
+    components: {
+        KTPageTitle,
+	},
+    setup() {
+		const defaultConfigData = (): CalendarConfig => ({
+			CALENDAR_VIEW_PREVIOUS_DAYS: null,
+			CALENDAR_VIEW_VISIBLE_DAYS: null,
+			CALENDAR_VIEW_YESTERDAY_START: "00:05",
+			CALENDAR_VIEW_YESTERDAY_END: "05:59",
+			MAX_SELECTED_ROOM_TYPES:2,
+		});
+		const numberConfigAttrs: Array<keyof CalendarConfig> = [
+			"CALENDAR_VIEW_PREVIOUS_DAYS",
+			"CALENDAR_VIEW_VISIBLE_DAYS",
+			"MAX_SELECTED_ROOM_TYPES",
+		];
+		const configAttrs: Array<keyof CalendarConfig> = [
+			...numberConfigAttrs,
+			"CALENDAR_VIEW_YESTERDAY_START",
+			"CALENDAR_VIEW_YESTERDAY_END",
+		];
+		const configData = ref<CalendarConfig>(defaultConfigData());
+		const calendarTimeRange = ref<[string, string] | null>([
+			configData.value.CALENDAR_VIEW_YESTERDAY_START,
+			configData.value.CALENDAR_VIEW_YESTERDAY_END,
+		]);
+		const pageRouterId = "00330";
+		const authStore = useAuthStore();
+		const enableModify = authStore.hasPermission(pageRouterId, "MODIFY");
+		const formRef = ref<any>(null);
+		const pageLoading = ref<boolean>(true);
+		const loading = ref<boolean>(false);
+		const rules = ref({
+		  CALENDAR_VIEW_PREVIOUS_DAYS: [
+		    {
+		      required: true,
+		      message: "Previous days is required",
+		      trigger: "change",
+		    },
+		  ],
+		  CALENDAR_VIEW_VISIBLE_DAYS: [
+		    {
+		      required: true,
+		      message: "Visible days is required",
+		      trigger: "change",
+		    },
+		  ],
+		});
+
+        onMounted(() => {
+			loadAppSetting();
+        });
+
+		const resetForm=()=>{
+			if(formRef.value){
+				formRef.value.resetFields();
+			}
+		};
+		const loadAppSetting=()=>{
+			resetForm();
+			pageLoading.value = true;
+			let reqParas = {};
+			ApiService.processPostRequest("/app/appsetting/get", reqParas,
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				parseConfigData(resData.data);
+				calendarTimeRange.value = [
+					configData.value.CALENDAR_VIEW_YESTERDAY_START,
+					configData.value.CALENDAR_VIEW_YESTERDAY_END,
+				];
+			},
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				Swal.fire({
+				  text: "Read App Setting error!["+resData.message+"]",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			},
+			()=>{
+				pageLoading.value=false;
+			});
+		};
+		const saveAppSetting=(appSettingObj:Array<AppSettingItem>)=>{
+			if(appSettingObj && appSettingObj.length>0){
+				let postUrl = "/app/appsetting/save_calendar_setting";
+				ApiService.processPostRequest(postUrl, appSettingObj,
+				()=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Success",
+						message: "App Setting has been saved!",
+						type: "success",
+					});
+				},
+				(resData:ResponseData)=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Fail",
+						message: "Save data failed!["+resData.message+"]",
+						type: "error",
+					});
+				},
+				(error)=>{
+					loading.value = false;
+					Swal.fire({
+					  text: "Update App Setting error!["+error+"]",
+					  icon: "error",
+					  buttonsStyling: false,
+					  confirmButtonText: "Ok, got it!",
+					  heightAuto: false,
+					  customClass: {
+					    confirmButton: "btn btn-primary",
+					  },
+					});
+				});
+			}else{
+				Swal.fire({
+				  text: "Empty Setting info",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			}
+		};
+		const buildSettingList=()=>{
+			const timeRange = calendarTimeRange.value || ["", ""];
+			configData.value.CALENDAR_VIEW_YESTERDAY_START = timeRange[0];
+			configData.value.CALENDAR_VIEW_YESTERDAY_END = timeRange[1];
+
+			return configAttrs.map((attrName) => {
+				return {
+					keys: attrName,
+					keyValues: configData.value[attrName] != null ? configData.value[attrName] : "",
+				} as AppSettingItem;
+			});
+		};
+		const parseConfigData=(pData:Array<AppSettingResponseItem>)=>{
+			const settingMap = new Map<string, string | number | null>();
+			if(pData){
+				for(let i=0;i<pData.length;i++){
+					if(pData[i] && pData[i].keys){
+						settingMap.set(pData[i].keys, pData[i].keyValues);
+					}
+				}
+			}
+
+			let cfgData = defaultConfigData();
+			for(let i=0;i<configAttrs.length;i++){
+				let attrName = configAttrs[i];
+				let cfgVal = settingMap.get(attrName);
+				if(cfgVal==null || cfgVal===""){
+					continue;
+				}
+				if(numberConfigAttrs.includes(attrName)){
+					cfgData[attrName]=parseInt(String(cfgVal), 10);
+				}else{
+					cfgData[attrName]=String(cfgVal);
+				}
+			}
+			configData.value = cfgData;
+		};
+		const submit = () => {
+		  if (!formRef.value) {
+		    return;
+		  }
+		  if(!calendarTimeRange.value || calendarTimeRange.value.length!==2 || !calendarTimeRange.value[0] || !calendarTimeRange.value[1]){
+			ElNotification({ position: "bottom-right",
+				title: "Fail",
+				message: "View yesterday time range is required",
+				type: "error",
+			});
+			return;
+		  }
+		  formRef.value.validate((valid: boolean) => {
+		    if (valid) {
+				loading.value = true;
+				let settingObj = buildSettingList();
+				saveAppSetting(settingObj);
+		    } else {
+				return false;
+		    }
+		  });
+		};
+		const onResetClickHandle = ()=>{
+			loadAppSetting();
+		};
+        return {
+            toolbarWidthFluid,
+			pageLoading,
+			loading,
+			configData,
+			formRef,
+			submit,
+			rules,
+			onResetClickHandle,
+			enableModify,
+			calendarTimeRange,
+        };
+    },
+  });
+  </script>
+
+  <style>
+  .custom-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  </style>

src/views/appSetting/property/Index.vue

@@ -174,6 +174,9 @@
 				}
 			}
 		};
+		const formatNullableValue = (pData)=>{
+			return pData.value==null?'':String(pData.value);
+		};	
         // Each Column Definition results in one Column.
         const columnDefs = [
             { headerName:"Property Name" , field: "name", sortable: true,unSortIcon: true, checkboxSelection:false, minWidth:100,  },
@@ -182,6 +185,18 @@
 			{ headerName:"Property Code" , field: "code", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, },
 			{ headerName:"Category" , field: "category", sortable: true,unSortIcon: true,  minWidth:120, resizable: true, },
 			{ headerName:"Sort Order" , field: "sortOrder", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, },
+			{ headerName:"Calendar Name" , field: "calendarName", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Calendar Order" , field: "calendarOrder", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Show Calendar" , field: "showCalendar", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true,
+				cellRenderer:params=>{
+					if(params.value===1 || params.value==='1'){
+						return 'Yes';
+					}else if(params.value===0 || params.value==='0'){
+						return 'No';
+					}
+					return '';
+				}
+			},
             // { headerName:"Last Update At" , field: "updatedAt", minWidth:160 , resizable: true, 
             //     cellRenderer:params=>{ 
             //         return params.value?moment(params.value).format("YYYY-MM-DD HH:mm:ss"):'';	

src/views/appSetting/property/Modal.vue

@@ -166,6 +166,44 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input
+									v-model="propertyData.calendarName"
+									type="text"
+									placeholder=""
+									:readonly="!enableEdit"
+									/>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="propertyData.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="propertyData.showCalendar" :disabled="!enableEdit" :teleported="false">
+										<el-option label="Yes" :value="1"></el-option>
+										<el-option label="No" :value="0"></el-option>
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="row g-9 mb-6" v-if="disabled">
 								<div class="col-md-6 fv-row">
 									<!--begin::Label-->

src/views/appSetting/room/Index.vue

@@ -269,6 +269,9 @@ export default defineComponent({
 			}
 			return res;
 		};
+		const formatNullableValue = (pData) => {
+			return pData.value == null ? "" : String(pData.value);
+		};
 		// Each Column Definition results in one Column.
 		const columnDefs = [
 			{
@@ -311,6 +314,49 @@ export default defineComponent({
 				minWidth: 150,
 				resizable: true,
 			},
+			{
+				headerName: "Calendar Name",
+				field: "calendarName",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Calendar Order",
+				field: "calendarOrder",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Show Calendar",
+				field: "showCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				cellRenderer: (params) => {
+					if (params.value === 1 || params.value === "1") {
+						return "Yes";
+					} else if (params.value === 0 || params.value === "0") {
+						return "No";
+					}
+					return "";
+				},
+			},
+			{
+				headerName: "Default Show Calendar",
+				field: "defaultShowCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 190,
+				resizable: true,
+				cellRenderer: getYesOrNoStatus,
+			},
 			{
 				headerName: "Room Type for Create Booking",
 				field: "forCreateBooking",

src/views/appSetting/room/Modal.vue

@@ -151,6 +151,52 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input v-model="data.calendarName" type="text" placeholder="" :readonly="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="data.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="data.showCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Default Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="defaultShowCalendar">
+									<el-select v-model="data.defaultShowCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="fv-row mb-7">
 								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"

src/views/approval/approvalRoutingLog/Index.vue

@@ -468,7 +468,7 @@
             { headerName:"Check in Date" , field: "checkinDate",sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Check Out Date" , field: "checkoutDate" ,sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Continuous / Overlap Booking(C/I to C/O)" , field: "overlapBooking",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,hide:!gamingData, cellClass: "cell-vertical-align-text-left"},  
-            { headerName:"Booker Team" , field: "teamName",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,cellClass: "cell-vertical-align-text-left"}, 
+            { headerName:"Booker Team" , field: "sectionName",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,cellClass: "cell-vertical-align-text-left"}, 
             { headerName:"Booker ID" , field: "createdBy",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Booker Name" , field: "booker",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Sharer" , field: "sharer", minWidth:150 , resizable: true,hide:!isSharer,

src/views/daylightAppSetting/calendarSetting/Index.vue

@@ -0,0 +1,368 @@
+<template>
+    <!--begin::Toolbar-->
+    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
+        <!--begin::Toolbar container-->
+        <div
+        id="kt_app_toolbar_container"
+        class="d-flex flex-stack"
+        :class="{
+            'container-fluid': toolbarWidthFluid,
+            'container-xxl': !toolbarWidthFluid,
+        }"
+        style="padding:0px;"
+        >
+        <KTPageTitle />
+        </div>
+        <!--end::Toolbar container-->
+    </div>
+    <!--end::Toolbar-->
+	<!-- begin:: Content -->
+	<div class="kt-content kt-grid__item kt-grid__item--fluid" id="kt_content">
+		<!--Begin::Section-->
+		<div class="row">
+			<div class="kt-portlet kt-portlet--mobile">
+				<el-form
+				  @submit.prevent="submit()"
+				  :model="configData"
+				  :rules="rules"
+				  ref="formRef"
+				>
+				<div class="kt-portlet__body">
+					<div class="form-group row" style="border-top:1px solid #ddd;"></div>
+					<div class="form-group row" style="margin-top:30px;">
+						<h5>Room Calendar Setting</h5>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Previous days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_PREVIOUS_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_PREVIOUS_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Visible days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_VISIBLE_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_VISIBLE_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Selection Limit:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="MAX_SELECTED_ROOM_TYPES">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.MAX_SELECTED_ROOM_TYPES" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">View yesterday time range:</label>
+						<div class="col-lg-6">
+							<el-form-item>
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-time-picker :disabled="!enableModify" v-model="calendarTimeRange" is-range format="HH:mm" value-format="HH:mm" start-placeholder="Start time"
+                                    end-placeholder="End time" style="width: 150px"/>
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+				</div>
+				<div class="kt-portlet__foot">
+					<div class="form-group row" style="border-top:1px solid #ddd;margin-top:20px;margin-bottom:12px;"></div>
+					<div class="row">
+						<div class="col-lg-3"></div>
+						<div class="col-lg-6">
+							<!--begin::Button-->
+							<button v-if="enableModify"
+							  :disabled="loading"
+							  :data-kt-indicator="loading ? 'on' : null"
+							  class="btn btn-sm btn-primary me-3"
+							  type="submit"
+							>
+							  <span v-if="!loading" class="indicator-label">
+							   <i class="fa fa-save"></i>&nbsp; Save
+							  </span>
+							  <span v-if="loading" class="indicator-progress">
+							    Please wait...
+							    <span
+							      class="spinner-border spinner-border-sm align-middle ms-2"
+							    ></span>
+							  </span>
+							</button>
+							<!--end::Button-->
+							<button v-if="enableModify" type="button" @click="onResetClickHandle" class="btn btn-sm btn-secondary text-primary"><i class="fa fa-redo text-primary"></i> Reset</button>
+						</div>
+					</div>
+				</div>
+				</el-form>
+			</div>
+		</div>
+		<!--End::Section-->
+	</div>
+	<!-- end:: Content -->
+
+	<div v-loading.fullscreen.lock="pageLoading" element-loading-text="Loading..."></div>
+  </template>
+
+  <script lang="ts">
+	import { defineComponent, onMounted, ref } from "vue";
+	import KTPageTitle from "@/layouts/main-layout/toolbar/PageTitle.vue";
+	import { toolbarWidthFluid } from "@/core/helpers/config";
+	import ApiService from "@/core/services/ApiService";
+	import type { ResponseData } from "@/core/data/AjaxData";
+	import Swal from "sweetalert2";
+	import { ElNotification } from "element-plus";
+	import { useAuthStore } from "@/stores/auth";
+
+	type CalendarConfig = {
+		CALENDAR_VIEW_PREVIOUS_DAYS: number | null;
+		CALENDAR_VIEW_VISIBLE_DAYS: number | null;
+		CALENDAR_VIEW_YESTERDAY_START: string;
+		CALENDAR_VIEW_YESTERDAY_END: string;
+		MAX_SELECTED_ROOM_TYPES:number | null;
+	};
+
+	type AppSettingItem = {
+		keys: keyof CalendarConfig;
+		keyValues: CalendarConfig[keyof CalendarConfig] | "";
+	};
+
+	type AppSettingResponseItem = {
+		keys: string;
+		keyValues: string | number | null;
+	};
+
+  export default defineComponent({
+    name: "calendar-setting",
+    components: {
+        KTPageTitle,
+	},
+    setup() {
+		const defaultConfigData = (): CalendarConfig => ({
+			CALENDAR_VIEW_PREVIOUS_DAYS: null,
+			CALENDAR_VIEW_VISIBLE_DAYS: null,
+			CALENDAR_VIEW_YESTERDAY_START: "00:05",
+			CALENDAR_VIEW_YESTERDAY_END: "05:59",
+			MAX_SELECTED_ROOM_TYPES:2,
+		});
+		const numberConfigAttrs: Array<keyof CalendarConfig> = [
+			"CALENDAR_VIEW_PREVIOUS_DAYS",
+			"CALENDAR_VIEW_VISIBLE_DAYS",
+			"MAX_SELECTED_ROOM_TYPES",
+		];
+		const configAttrs: Array<keyof CalendarConfig> = [
+			...numberConfigAttrs,
+			"CALENDAR_VIEW_YESTERDAY_START",
+			"CALENDAR_VIEW_YESTERDAY_END",
+		];
+		const configData = ref<CalendarConfig>(defaultConfigData());
+		const calendarTimeRange = ref<[string, string] | null>([
+			configData.value.CALENDAR_VIEW_YESTERDAY_START,
+			configData.value.CALENDAR_VIEW_YESTERDAY_END,
+		]);
+		const pageRouterId = "00330";
+		const authStore = useAuthStore();
+		const enableModify = authStore.hasPermission(pageRouterId, "MODIFY");
+		const formRef = ref<any>(null);
+		const pageLoading = ref<boolean>(true);
+		const loading = ref<boolean>(false);
+		const rules = ref({
+		  CALENDAR_VIEW_PREVIOUS_DAYS: [
+		    {
+		      required: true,
+		      message: "Previous days is required",
+		      trigger: "change",
+		    },
+		  ],
+		  CALENDAR_VIEW_VISIBLE_DAYS: [
+		    {
+		      required: true,
+		      message: "Visible days is required",
+		      trigger: "change",
+		    },
+		  ],
+		});
+
+        onMounted(() => {
+			loadAppSetting();
+        });
+
+		const resetForm=()=>{
+			if(formRef.value){
+				formRef.value.resetFields();
+			}
+		};
+		const loadAppSetting=()=>{
+			resetForm();
+			pageLoading.value = true;
+			let reqParas = {};
+			ApiService.processPostRequest("/app/appsetting/get", reqParas,
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				parseConfigData(resData.data);
+				calendarTimeRange.value = [
+					configData.value.CALENDAR_VIEW_YESTERDAY_START,
+					configData.value.CALENDAR_VIEW_YESTERDAY_END,
+				];
+			},
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				Swal.fire({
+				  text: "Read App Setting error!["+resData.message+"]",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			},
+			()=>{
+				pageLoading.value=false;
+			});
+		};
+		const saveAppSetting=(appSettingObj:Array<AppSettingItem>)=>{
+			if(appSettingObj && appSettingObj.length>0){
+				let postUrl = "/app/appsetting/save_calendar_setting";
+				ApiService.processPostRequest(postUrl, appSettingObj,
+				()=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Success",
+						message: "App Setting has been saved!",
+						type: "success",
+					});
+				},
+				(resData:ResponseData)=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Fail",
+						message: "Save data failed!["+resData.message+"]",
+						type: "error",
+					});
+				},
+				(error)=>{
+					loading.value = false;
+					Swal.fire({
+					  text: "Update App Setting error!["+error+"]",
+					  icon: "error",
+					  buttonsStyling: false,
+					  confirmButtonText: "Ok, got it!",
+					  heightAuto: false,
+					  customClass: {
+					    confirmButton: "btn btn-primary",
+					  },
+					});
+				});
+			}else{
+				Swal.fire({
+				  text: "Empty Setting info",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			}
+		};
+		const buildSettingList=()=>{
+			const timeRange = calendarTimeRange.value || ["", ""];
+			configData.value.CALENDAR_VIEW_YESTERDAY_START = timeRange[0];
+			configData.value.CALENDAR_VIEW_YESTERDAY_END = timeRange[1];
+
+			return configAttrs.map((attrName) => {
+				return {
+					keys: attrName,
+					keyValues: configData.value[attrName] != null ? configData.value[attrName] : "",
+				} as AppSettingItem;
+			});
+		};
+		const parseConfigData=(pData:Array<AppSettingResponseItem>)=>{
+			const settingMap = new Map<string, string | number | null>();
+			if(pData){
+				for(let i=0;i<pData.length;i++){
+					if(pData[i] && pData[i].keys){
+						settingMap.set(pData[i].keys, pData[i].keyValues);
+					}
+				}
+			}
+
+			let cfgData = defaultConfigData();
+			for(let i=0;i<configAttrs.length;i++){
+				let attrName = configAttrs[i];
+				let cfgVal = settingMap.get(attrName);
+				if(cfgVal==null || cfgVal===""){
+					continue;
+				}
+				if(numberConfigAttrs.includes(attrName)){
+					cfgData[attrName]=parseInt(String(cfgVal), 10);
+				}else{
+					cfgData[attrName]=String(cfgVal);
+				}
+			}
+			configData.value = cfgData;
+		};
+		const submit = () => {
+		  if (!formRef.value) {
+		    return;
+		  }
+		  if(!calendarTimeRange.value || calendarTimeRange.value.length!==2 || !calendarTimeRange.value[0] || !calendarTimeRange.value[1]){
+			ElNotification({ position: "bottom-right",
+				title: "Fail",
+				message: "View yesterday time range is required",
+				type: "error",
+			});
+			return;
+		  }
+		  formRef.value.validate((valid: boolean) => {
+		    if (valid) {
+				loading.value = true;
+				let settingObj = buildSettingList();
+				saveAppSetting(settingObj);
+		    } else {
+				return false;
+		    }
+		  });
+		};
+		const onResetClickHandle = ()=>{
+			loadAppSetting();
+		};
+        return {
+            toolbarWidthFluid,
+			pageLoading,
+			loading,
+			configData,
+			formRef,
+			submit,
+			rules,
+			onResetClickHandle,
+			enableModify,
+			calendarTimeRange,
+        };
+    },
+  });
+  </script>
+
+  <style>
+  .custom-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  </style>

src/views/daylightAppSetting/property/Index.vue

@@ -130,6 +130,9 @@ export default defineComponent({
 				}
 			}
 		};
+		const formatNullableValue = (pData)=>{
+			return pData.value==null?'':String(pData.value);
+		};
 		// Each Column Definition results in one Column.
 		const columnDefs = [
 			{ headerName: "Property Name", field: "name", sortable: true, unSortIcon: true, checkboxSelection: false, minWidth: 100, },
@@ -138,6 +141,18 @@ export default defineComponent({
 			{ headerName: "Property Code", field: "code", sortable: true, unSortIcon: true, minWidth: 140, resizable: true, },
 			{ headerName: "Category", field: "category", sortable: true, unSortIcon: true, minWidth: 120, resizable: true, },
 			{ headerName: "Sort Order", field: "sortOrder", sortable: true, unSortIcon: true, minWidth: 140, resizable: true, },
+			{ headerName:"Calendar Name" , field: "calendarName", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Calendar Order" , field: "calendarOrder", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Show Calendar" , field: "showCalendar", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true,
+				cellRenderer:params=>{
+					if(params.value===1 || params.value==='1'){
+						return 'Yes';
+					}else if(params.value===0 || params.value==='0'){
+						return 'No';
+					}
+					return '';
+				}
+			},
 			// { headerName:"Last Update At" , field: "updatedAt", minWidth:160 , resizable: true, 
 			//     cellRenderer:params=>{ 
 			//         return params.value?moment(params.value).format("YYYY-MM-DD HH:mm:ss"):'';	

src/views/daylightAppSetting/property/Modal.vue

@@ -158,23 +158,19 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
-							<div class="col-md-6 fv-row">
+							<!-- <div class="col-md-6 fv-row">
-								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"
 									>Status</label
 								>
-								<!--end::Label-->
+								<el-form-item prop="status">
-								<!--begin::Input-->
-								<!-- <el-form-item prop="status">
 									<el-switch
 										v-model="propertyData.status"
 										:active-value="1"
 										:inactive-value="0"
 										:disabled="!enableEdit"
 									/>
-								</el-form-item> -->
+								</el-form-item>
-								<!--end::Input-->
+							</div> -->
-							</div>
 							<div class="col-md-6 fv-row">
 								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"
@@ -190,6 +186,44 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input
+									v-model="propertyData.calendarName"
+									type="text"
+									placeholder=""
+									:readonly="!enableEdit"
+									/>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="propertyData.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="propertyData.showCalendar" :disabled="!enableEdit" :teleported="false">
+										<el-option label="Yes" :value="1"></el-option>
+										<el-option label="No" :value="0"></el-option>
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="row g-9 mb-6" v-if="disabled">
 								<div class="col-md-6 fv-row">
 									<!--begin::Label-->

src/views/daylightAppSetting/room/Index.vue

@@ -256,6 +256,9 @@ export default defineComponent({
 				res = "No";
 			}
 			return res;
+		};
+		const formatNullableValue = (pData)=>{
+            return pData.value==null?'':String(pData.value);
         };
 		// Each Column Definition results in one Column.
 		const columnDefs = [
@@ -299,6 +302,49 @@ export default defineComponent({
 				minWidth: 150,
 				resizable: true,
 			},
+			{
+				headerName: "Calendar Name",
+				field: "calendarName",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Calendar Order",
+				field: "calendarOrder",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Show Calendar",
+				field: "showCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				cellRenderer: (params) => {
+					if (params.value === 1 || params.value === "1") {
+						return "Yes";
+					} else if (params.value === 0 || params.value === "0") {
+						return "No";
+					}
+					return "";
+				},
+			},
+			{
+				headerName: "Default Show Calendar",
+				field: "defaultShowCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 190,
+				resizable: true,
+				cellRenderer: getYesOrNoStatus,
+			},
 			{
 				headerName: "Room Type for Create Booking",
 				field: "forCreateBooking",

src/views/daylightAppSetting/room/Modal.vue

@@ -152,6 +152,52 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input v-model="data.calendarName" type="text" placeholder="" :readonly="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="data.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="data.showCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Default Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="defaultShowCalendar">
+									<el-select v-model="data.defaultShowCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="fv-row mb-7">
 								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"