diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3d474171..5549628d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-121
+
+
+### 🏡 Chore
+
+- Update config ([2de647e](https://github.com/undb-io/undb/commit/2de647e))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-120
 
 
diff --git a/apps/backend/src/modules/openapi/record.openapi.ts b/apps/backend/src/modules/openapi/record.openapi.ts
index ef00a534b..76fd2c137 100644
--- a/apps/backend/src/modules/openapi/record.openapi.ts
+++ b/apps/backend/src/modules/openapi/record.openapi.ts
@@ -14,7 +14,12 @@ import { CommandBus, QueryBus } from "@undb/cqrs"
 import { inject, singleton } from "@undb/di"
 import { Option, type ICommandBus, type IQueryBus, type PaginatedDTO } from "@undb/domain"
 import { injectQueryBuilder, type IQueryBuilder } from "@undb/persistence"
-import { GetPivotDataQuery, GetReadableRecordByIdQuery, GetReadableRecordsQuery } from "@undb/queries"
+import {
+  GetAggregatesQuery,
+  GetPivotDataQuery,
+  GetReadableRecordByIdQuery,
+  GetReadableRecordsQuery,
+} from "@undb/queries"
 import { RecordDO, type IRecordReadableValueDTO } from "@undb/table"
 import Elysia, { t } from "elysia"
 import { withTransaction } from "../../db"
@@ -97,6 +102,33 @@ export class RecordOpenApi {
             },
           },
         )
+        .get(
+          "/views/:viewName/records/aggregate",
+          async (ctx) => {
+            const baseName = decodeURIComponent(ctx.params.baseName)
+            const tableName = decodeURIComponent(ctx.params.tableName)
+            const viewName = decodeURIComponent(ctx.params.viewName)
+
+            const result = await this.queryBus.execute(
+              new GetAggregatesQuery({ baseName, tableName, viewName, isReadable: true }),
+            )
+            return {
+              data: result,
+            }
+          },
+          {
+            params: t.Object({
+              baseName: t.String(),
+              tableName: t.String(),
+              viewName: t.String(),
+            }),
+            detail: {
+              tags: ["Record", "Aggregate"],
+              summary: "Get record aggregate in view",
+              description: "Get record aggregate in view",
+            },
+          },
+        )
         .get(
           "/views/:viewName/records/:recordId",
           async (ctx) => {
diff --git a/apps/frontend/schema.graphql b/apps/frontend/schema.graphql
index d4d905da9..88de5d169 100644
--- a/apps/frontend/schema.graphql
+++ b/apps/frontend/schema.graphql
@@ -21,6 +21,13 @@ type Base {
 
 type CalendarOption {
   field: String
+  timeScale: CalendarTimeScale
+}
+
+enum CalendarTimeScale {
+  day
+  month
+  week
 }
 
 type Dashboard {
diff --git a/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte b/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
index 548fe4def..0642aea4a 100644
--- a/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
+++ b/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
@@ -50,6 +50,10 @@
         await tick()
         await client.invalidateQueries({ queryKey: ["aggregate", table.id.value, widget.id] })
       }
+      if (isDashboard) {
+        await invalidate(`undb:dashboard:${$dashboard.id.value}`)
+        await tick()
+      }
       onSuccess()
     },
     onError(error, variables, context) {
@@ -61,7 +65,7 @@
     mutationFn: trpc.dashboard.widget.update.mutate,
     async onSuccess(data, variables, context) {
       if (table) {
-        await invalidate(`dashboard:${$dashboard.id.value}`)
+        await invalidate(`undb:dashboard:${$dashboard.id.value}`)
         await tick()
         await client.invalidateQueries({ queryKey: ["aggregate", table.id.value, widget.id] })
       }
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte
index e52032b07..8d00b569f 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte
@@ -8,7 +8,7 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { useQueryClient } from "@tanstack/svelte-query"
   import { cn } from "$lib/utils"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
 
   export let view: CalendarView
 
@@ -69,6 +69,6 @@
   }
 </script>
 
-<button use:setupDropTarget class={cn("hidden transition-opacity", $monthStore.isDragging && "block")}>
+<button use:setupDropTarget class={cn("hidden transition-opacity", $calendarStore.isDragging && "block")}>
   <Trash2Icon class={cn("size-10 text-gray-600", isDraggedOver && "text-red-600")} />
 </button>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-option-button.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-option-button.svelte
index fc1bf20cc..e62c8ad2d 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-option-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-option-button.svelte
@@ -18,12 +18,12 @@
 
 <Dropdown.Root>
   <Dropdown.Trigger asChild let:builder>
-    <Button variant="ghost" size="sm" class="gap-1" builders={[builder]} {...$$restProps}>
+    <Button variant="ghost" size="sm" class="group gap-1" builders={[builder]} {...$$restProps}>
       <CalendarIcon class="text-muted-foreground mr-2 h-4 w-4 font-semibold" />
       Calendar
       {#if field}
         <span>by</span>
-        <span class="inline-flex items-center gap-1 rounded-sm bg-gray-100 px-1.5 py-0.5">
+        <span class="inline-flex items-center gap-1 rounded-sm bg-gray-100 px-1.5 py-0.5 group-hover:bg-gray-200">
           <FieldIcon type={field.type} {field} class="size-3 text-gray-700" />
           {field.name.value}
         </span>
@@ -38,6 +38,6 @@
         Calendar view
       {/if}
     </Dropdown.Label>
-    <CalendarFieldForm {view} {readonly} />
+    <CalendarFieldForm bind:view {readonly} />
   </Dropdown.Content>
 </Dropdown.Root>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-timescale-picker.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-timescale-picker.svelte
new file mode 100644
index 000000000..cd56de1d8
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-timescale-picker.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import Check from "svelte-radix/Check.svelte"
+  import CaretSort from "svelte-radix/CaretSort.svelte"
+  import { tick } from "svelte"
+  import * as Command from "$lib/components/ui/command/index.js"
+  import * as Popover from "$lib/components/ui/popover/index.js"
+  import * as Tooltip from "$lib/components/ui/tooltip"
+  import { Button } from "$lib/components/ui/button/index.js"
+  import { cn } from "$lib/utils.js"
+  import { LL } from "@undb/i18n/client"
+  import { calendarTimeScales, type CalendarTimeScale, type CalendarView } from "@undb/table"
+  import { createMutation } from "@tanstack/svelte-query"
+  import { trpc } from "$lib/trpc/client"
+  import { toast } from "svelte-sonner"
+  import { getTable } from "$lib/store/table.store"
+  import { invalidate } from "$app/navigation"
+  import { type ICalendarViewDTO } from "@undb/table"
+
+  export let view: CalendarView
+  const table = getTable()
+
+  let open = false
+
+  let search = ""
+
+  $: filtered = calendarTimeScales.filter((scale) => {
+    const label = $LL.table.timeScales[scale]() ?? scale
+    return label.toLowerCase().includes(search.toLowerCase())
+  })
+
+  $: selected = view.timeScale
+  $: selectedValue = selected ?? "Select time scale..."
+
+  function closeAndFocusTrigger(triggerId: string) {
+    open = false
+    tick().then(() => {
+      document.getElementById(triggerId)?.focus()
+    })
+  }
+
+  const updateViewMutation = createMutation({
+    mutationFn: trpc.table.view.update.mutate,
+    mutationKey: ["updateView"],
+    async onSuccess(data, variables, context) {
+      await invalidate(`undb:table:${$table.id.value}`)
+    },
+  })
+
+  function onSelect(scale: string) {
+    view.timeScale = scale as CalendarTimeScale
+    const json = view.toJSON() as ICalendarViewDTO
+
+    $updateViewMutation.mutate({
+      tableId: $table.id.value,
+      viewId: view.id.value,
+      ...json,
+      calendar: {
+        ...json.calendar,
+        timeScale: view.timeScale,
+      },
+    })
+  }
+</script>
+
+<Popover.Root bind:open let:ids portal="body">
+  <Popover.Trigger asChild let:builder={popoverBuilder}>
+    <Tooltip.Root portal="body">
+      <Tooltip.Trigger asChild let:builder>
+        <Button
+          size="sm"
+          builders={[popoverBuilder, builder]}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          {...$$restProps}
+          class={cn("w-full justify-between", $$restProps.class)}
+        >
+          <span class="flex items-center overflow-hidden text-ellipsis" title={selectedValue}>
+            {#if selected}
+              <slot>
+                {$LL.table.timeScales[selected]() ?? selected}
+              </slot>
+            {/if}
+          </span>
+          <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <p>Select time scale</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  </Popover.Trigger>
+  <Popover.Content class="p-0">
+    <Command.Root shouldFilter={false}>
+      <Command.Input bind:value={search} placeholder="Search time scale..." class="h-9" />
+      <Command.Empty>No time scale found.</Command.Empty>
+      <Command.Group class="max-h-[300px] overflow-y-auto">
+        {#each filtered as scale}
+          <Command.Item
+            value={scale}
+            onSelect={(value) => {
+              onSelect(value)
+              closeAndFocusTrigger(ids.trigger)
+            }}
+          >
+            <Check class={cn("mr-2 h-4 w-4", selected !== scale && "text-transparent")} />
+            <span class="text-xs">
+              {$LL.table.timeScales[scale]() ?? scale}
+            </span>
+          </Command.Item>
+        {/each}
+      </Command.Group>
+    </Command.Root>
+  </Popover.Content>
+</Popover.Root>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte
new file mode 100644
index 000000000..49f10d601
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte
@@ -0,0 +1,498 @@
+<script lang="ts">
+  import {
+    type IRecordsDTO,
+    Records,
+    type CalendarView,
+    type DateField,
+    type DateRangeField,
+    DateFieldValue,
+    RecordDO,
+  } from "@undb/table"
+  import { derived, type Readable } from "svelte/store"
+  import type { Writable } from "svelte/store"
+  import { calendarStore, HOURS } from "$lib/store/calendar.store"
+  import { createRecordsStore, defaultRecordValues, setRecordsStore } from "$lib/store/records.store"
+  import { trpc } from "$lib/trpc/client"
+  import { createQuery } from "@tanstack/svelte-query"
+  import { queryParam } from "sveltekit-search-params"
+  import { onMount } from "svelte"
+  import { cn } from "$lib/utils"
+  import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+  import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+  import { format, isSameDay } from "date-fns"
+  import { createMutation, useQueryClient } from "@tanstack/svelte-query"
+  import { getTable } from "$lib/store/table.store"
+  import { getColor } from "./calendar-view.util"
+  import { isToday } from "date-fns"
+  import * as Tooltip from "$lib/components/ui/tooltip"
+  import { PlusIcon } from "lucide-svelte"
+  import { CREATE_RECORD_MODAL, openModal } from "$lib/store/modal.store"
+  import { tick } from "svelte"
+
+  export let viewId: Readable<string | undefined>
+  export let view: CalendarView
+  export let readonly = false
+  export let shareId: string | undefined = undefined
+  export let disableRecordQuery = false
+  export let r: Writable<string | null>
+  export let field: DateField | DateRangeField
+  export let date: Readable<Date>
+
+  const table = getTable()
+  $: color = view.color.into(undefined)
+
+  // 计算事件位置和高度
+  function calculateTopPosition(date: string): number {
+    const eventDate = new Date(date)
+    const hours = eventDate.getHours()
+    const minutes = eventDate.getMinutes()
+    return hours * 60 + minutes
+  }
+
+  function calculateHeight(startDate: string, endDate: string): number {
+    const start = new Date(startDate)
+    const end = new Date(endDate)
+    const durationInMinutes = (end.getTime() - start.getTime()) / (1000 * 60)
+    return Math.max(durationInMinutes, 30) // 最小高度30px
+  }
+
+  // 当前时间线
+  let currentTimePosition = 0
+  let currentTimeInterval: NodeJS.Timer
+
+  $: displayField = $table.schema.getDefaultDisplayField().into(undefined)
+
+  $: if (!currentTimePosition) {
+    updateCurrentTime()
+  }
+
+  onMount(() => {
+    if (isToday($date)) {
+      updateCurrentTime()
+      currentTimeInterval = setInterval(updateCurrentTime, 60000) // 每分钟更新一次
+
+      return () => {
+        clearInterval(currentTimeInterval)
+      }
+    }
+  })
+
+  let now: Date | undefined = undefined
+  // 添加选中时间状态
+  let selectedHour: number | null = null
+
+  // 处理时间格子点击
+  function handleTimeSlotClick(hour: number) {
+    calendarStore.setSelectedDate(new Date($date))
+    selectedHour = hour
+  }
+
+  function getIsSelected(hour: number) {
+    return selectedHour !== null && isSameDay($calendarStore.selectedDate, $date) && hour === selectedHour
+  }
+
+  function updateCurrentTime() {
+    now = new Date()
+    const minutes = now.getHours() * 60 + now.getMinutes()
+    selectedHour = now.getHours()
+    currentTimePosition = minutes
+  }
+
+  // 数据获取相关代码
+  const t = getTable()
+  const q = queryParam("q")
+
+  const getRecords = createQuery(
+    derived([t, viewId, q, date], ([$table, $viewId, $q, $date]) => {
+      const view = $table.views.getViewById($viewId)
+      return {
+        queryKey: ["records", $table?.id.value, $viewId, $q, $date.toISOString()],
+        enabled: view?.type === "calendar" && !disableRecordQuery,
+        queryFn: () => {
+          const value = format($date, "yyyy-MM-dd")
+          if (shareId) {
+            return trpc.shareData.records.query({
+              shareId,
+              tableId: $table?.id.value,
+              viewId: $viewId,
+              q: $q ?? undefined,
+              filters: {
+                conjunction: "and",
+                children: [{ field: field.id.value, op: "is_same_day", value }],
+              },
+            })
+          }
+          return trpc.record.list.query({
+            tableId: $table?.id.value,
+            viewId: $viewId,
+            filters: {
+              conjunction: "and",
+              children: [{ field: field.id.value, op: "is_same_day", value }],
+            },
+          })
+        },
+      }
+    }),
+  )
+
+  $: records = (($getRecords.data as any)?.records as IRecordsDTO) ?? []
+
+  const store = createRecordsStore()
+  setRecordsStore(store)
+
+  $: if ($getRecords.isSuccess) {
+    store.setRecords(Records.fromJSON($t, records), $getRecords.dataUpdatedAt)
+  }
+
+  // 添加新的类型和函数
+  interface EventPosition {
+    record: RecordDO
+    recordId: string
+    start: Date
+    end: Date
+    top: number
+    height: number
+    column: number
+    totalColumns: number
+  }
+
+  // 计算事件位置和高度的函数需要考虑多天的情况
+  function calculateEventPositions(
+    records: Array<[string, RecordDO]>,
+    draggedRecord?: RecordDO,
+    previewTime?: { hour: number; minutes: number },
+  ): EventPosition[] {
+    if (!records.length && !draggedRecord) return []
+
+    const positions: EventPosition[] = []
+
+    // 首先计算每个事件的基础位置信息，排除被拖拽的记录
+    records.forEach(([recordId, record]) => {
+      if (draggedRecord && record.id.value === draggedRecord.id.value) return
+
+      const startDate = record.values.getValue(field.id).into(undefined)?.value
+      if (!startDate) return
+
+      const start = new Date(startDate)
+      // 检查事件是否在显示的日期范围内
+
+      const end = new Date(start.getTime() + 60 * 60 * 1000)
+
+      positions.push({
+        record,
+        recordId,
+        start,
+        end,
+        top: calculateTopPosition(startDate),
+        height: calculateHeight(startDate, end.toISOString()),
+        column: 0,
+        totalColumns: 1,
+      })
+    })
+
+    // 如果有预览记录，添加到位置列表中
+    if (draggedRecord && previewTime) {
+      const previewDate = new Date($date)
+      previewDate.setHours(previewTime.hour, previewTime.minutes, 0, 0)
+      const previewEndDate = new Date(previewDate.getTime() + 60 * 60 * 1000)
+
+      positions.push({
+        record: draggedRecord,
+        recordId: draggedRecord.id.value,
+        start: previewDate,
+        end: previewEndDate,
+        top: calculateTopPosition(previewDate.toISOString()),
+        height: calculateHeight(previewDate.toISOString(), previewEndDate.toISOString()),
+        column: 0,
+        totalColumns: 1,
+      })
+    }
+
+    // 按开始时间排序
+    positions.sort((a, b) => a.start.getTime() - b.start.getTime())
+
+    // 创建重叠组
+    const groups: EventPosition[][] = []
+
+    for (const position of positions) {
+      let foundGroup = false
+      for (const group of groups) {
+        const hasOverlap = group.some(
+          (groupEvent) => !(position.end <= groupEvent.start || position.start >= groupEvent.end),
+        )
+
+        if (hasOverlap) {
+          group.push(position)
+          foundGroup = true
+          break
+        }
+      }
+
+      if (!foundGroup) {
+        groups.push([position])
+      }
+    }
+
+    // 为每个组分配列位置
+    groups.forEach((group) => {
+      const totalColumns = group.length
+      group.forEach((event, columnIndex) => {
+        event.column = columnIndex
+        event.totalColumns = totalColumns
+      })
+    })
+
+    return positions
+  }
+
+  let aboutToDropRecord: RecordDO | undefined = undefined
+  let overHour: number | undefined = undefined
+  let overMinutes: number | undefined = undefined
+
+  const updateRecord = createMutation({
+    mutationFn: trpc.record.update.mutate,
+  })
+
+  const client = useQueryClient()
+
+  function setupDraggableDate(node: HTMLElement, record: RecordDO) {
+    if (readonly || shareId) return
+
+    function setup(record: RecordDO) {
+      draggable({
+        element: node,
+        getInitialData(args) {
+          return {
+            type: "calendar-date-drag",
+            record,
+          }
+        },
+        onDragStart(args) {
+          calendarStore.setIsDragging(true)
+        },
+        onDrop(args) {
+          calendarStore.setIsDragging(false)
+        },
+      })
+    }
+
+    setup(record)
+
+    return {
+      update: setup,
+    }
+  }
+
+  function calculateMinutesFromPosition(element: HTMLElement, { y }: { y: number }): number {
+    if (!y) return 0
+
+    const rect = element.getBoundingClientRect()
+    const relativeY = y - rect.top
+    const percentage = Math.max(0, Math.min(1, relativeY / rect.height))
+    const exactMinutes = Math.floor(percentage * 60)
+
+    // 舍入到最近的15分钟
+    const roundedMinutes = Math.round(exactMinutes / 15) * 15
+    return Math.min(roundedMinutes, 45) // 确保不超过45分钟
+  }
+
+  function setupDropTarget(node: HTMLElement, hour: number) {
+    if (readonly || shareId) return
+
+    function setup(hour: number) {
+      dropTargetForElements({
+        element: node,
+        getData(e) {
+          return {
+            type: "calendar-date-drop",
+            hour,
+          }
+        },
+        onDragEnter(args) {
+          const record = args.source.data.record as RecordDO
+          const { clientY } = args.location.current.input
+          const minutes = calculateMinutesFromPosition(node, { y: clientY })
+          aboutToDropRecord = record
+          overHour = hour
+          overMinutes = minutes
+        },
+        onDrag(args) {
+          if (overHour === hour) {
+            const { clientY } = args.location.current.input
+            overMinutes = calculateMinutesFromPosition(node, { y: clientY })
+          }
+        },
+        onDragLeave() {
+          aboutToDropRecord = undefined
+          overHour = undefined
+          overMinutes = undefined
+        },
+        async onDrop(args) {
+          aboutToDropRecord = undefined
+          overHour = undefined
+          overMinutes = undefined
+
+          const data = args.source.data
+          const type = data.type
+          if (type !== "calendar-date-drag") {
+            return
+          }
+
+          const record = data.record as RecordDO
+          const hour = args.self.data.hour as number
+
+          const { clientY } = args.location.current.input
+          const minutes = calculateMinutesFromPosition(node, { y: clientY })
+
+          const dt = new Date($date)
+          dt.setHours(hour, minutes, 0, 0)
+          const d = format(dt, "yyyy-MM-dd HH:mm")
+
+          record.values.setValue(field.id, new DateFieldValue(d))
+          store.setRecord(record)
+
+          await $updateRecord.mutateAsync({
+            tableId: $table.id.value,
+            id: record.id.value,
+            values: {
+              [field.id.value]: dt.toISOString(),
+            },
+          })
+          await client.invalidateQueries({
+            queryKey: ["records", $table.id.value, $viewId],
+          })
+        },
+      })
+    }
+
+    setup(hour)
+
+    return {
+      update: setup,
+    }
+  }
+</script>
+
+<div class="relative flex-1">
+  {#each HOURS as hour}
+    {@const isSelected = getIsSelected(hour)}
+    <!-- svelte-ignore a11y-click-events-have-key_events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      use:setupDropTarget={hour}
+      class={cn(
+        "group relative h-[60px] border border-b border-r-0 border-t border-gray-100 border-b-transparent first:border-t-0 hover:bg-gray-50",
+        isSelected && "border-2 border-blue-500",
+      )}
+      style="z-index: {$calendarStore.isDragging ? 2 : 0};"
+      on:click={() => handleTimeSlotClick(hour)}
+    >
+      <!-- 半小时分隔线 -->
+      <div class="absolute top-[30px] w-full border-t border-gray-50"></div>
+      <button
+        type="button"
+        class={cn(
+          "absolute right-2 top-1/2 z-50 hidden size-6 -translate-y-1/2 items-center justify-center rounded-sm border group-hover:flex",
+          isSelected && "flex",
+        )}
+        on:click={async (e) => {
+          e.stopPropagation()
+          const d = new Date($date)
+          d.setHours(hour)
+          d.setMinutes(0)
+          d.setSeconds(0)
+          d.setMilliseconds(0)
+          defaultRecordValues.set({
+            [field.id.value]: d.toISOString(),
+          })
+          await tick()
+          setTimeout(() => {
+            openModal(CREATE_RECORD_MODAL)
+          }, 0)
+        }}
+      >
+        <PlusIcon class="size-4 text-gray-500" />
+      </button>
+    </div>
+  {/each}
+
+  <div class="pointer-events-none absolute inset-0">
+    <!-- 留出左侧时间轴空间 -->
+    <!-- 当前时间线 -->
+    {#if isToday($date) && now}
+      <div class="pointer-events-none absolute left-0 right-0 z-10" style="top: {currentTimePosition}px;">
+        <div class="relative border-t-2 border-red-500">
+          <div class="absolute -left-2 -top-1.5 size-3 rounded-full bg-red-500"></div>
+          <div
+            class="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-red-500 px-2 py-0.5 text-xs text-white"
+          >
+            {now?.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+          </div>
+          <div class="absolute -right-2 -top-1.5 size-3 rounded-full bg-red-500"></div>
+        </div>
+      </div>
+    {/if}
+
+    <!-- 新的事件渲染逻辑 -->
+    {#if $store.records}
+      {@const eventPositions = calculateEventPositions(
+        Array.from($store.records.entries()),
+        aboutToDropRecord,
+        overHour !== undefined && overMinutes !== undefined ? { hour: overHour, minutes: overMinutes } : undefined,
+      )}
+      {#each eventPositions as position}
+        {@const displayValue = displayField
+          ? position.record.getValue(displayField.id).into(undefined)?.value || position.record.getDisplayValue($table)
+          : "Untitled"}
+        {@const colorSpec = color?.getSpec($table.schema).into(undefined)}
+        {@const isMatch = colorSpec ? position.record.match(colorSpec) : false}
+        {@const condition = isMatch ? color?.getMatchedFieldConditions($table, position.record)[0] : undefined}
+        {@const title =
+          field.type === "date"
+            ? `${position.start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
+            : `${position.start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} - ${position.end.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`}
+        <div
+          use:setupDraggableDate={position.record}
+          class={cn(
+            "pointer-events-auto absolute left-2 right-2 overflow-hidden",
+            $calendarStore.isDragging && "pointer-events-none", // 拖拽时禁用指针事件
+            aboutToDropRecord?.id.value === position.record.id.value && "opacity-50",
+          )}
+          style="
+					top: {position.top}px;
+					height: {position.height}px;
+					left: calc({(position.column * 100) / position.totalColumns}% + 2px);
+					width: calc({100 / position.totalColumns}% - 4px);
+					z-index: {$calendarStore.isDragging ? 3 : 4}; /* 拖拽时降低z-index */
+				"
+        >
+          <button
+            title={displayValue}
+            type="button"
+            class={cn(
+              "h-full w-full cursor-pointer rounded border bg-white p-2 text-left text-sm shadow-sm hover:shadow-md",
+              isMatch && getColor(condition?.option.color),
+            )}
+            on:click={() => {
+              $r = position.record.id.value
+            }}
+          >
+            <div class={cn("truncate font-semibold", !displayValue && "text-gray-500")}>
+              {displayValue}
+            </div>
+            <Tooltip.Root>
+              <Tooltip.Trigger type="button" class="w-full overflow-hidden text-left">
+                <span class="truncate text-xs">
+                  {title}
+                </span>
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <p>{title}</p>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </button>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day.svelte
new file mode 100644
index 000000000..03b003700
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { type CalendarView, type DateField, type DateRangeField } from "@undb/table"
+  import { derived, get, readable, type Readable } from "svelte/store"
+  import type { Writable } from "svelte/store"
+  import CalendarViewMonthRecords from "./calendar-view-month-records.svelte"
+  import { cn } from "$lib/utils"
+  import { format } from "date-fns"
+  import CalendarViewMiniDay from "./calendar-view-mini-day.svelte"
+  import { addDays } from "date-fns"
+  import CalendarViewDayTimeline from "./calendar-view-day-timeline.svelte"
+  import { HOURS, formatHour } from "$lib/store/calendar.store"
+
+  export let viewId: Readable<string | undefined>
+  export let view: CalendarView
+  export let readonly = false
+  export let shareId: string | undefined = undefined
+  export let disableRecordQuery = false
+  export let r: Writable<string | null>
+  export let field: DateField | DateRangeField
+  export let startDate: Readable<Date>
+  export let days: number = 7
+
+  let displayDates = derived(startDate, ($startDate) =>
+    $startDate
+      ? Array.from({ length: days }, (_, i) => {
+          return addDays($startDate, i)
+        })
+      : [],
+  )
+</script>
+
+<div class="relative flex h-full flex-1 overflow-hidden">
+  <!-- 左侧时间轴 -->
+  <div class="relative flex-1 overflow-y-auto">
+    <div class="relative min-h-[1440px]">
+      <!-- 添加日期头部 -->
+      {#if days > 1}
+        <div class="sticky top-0 z-10 ml-16 flex border-b border-l bg-white">
+          {#each $displayDates as date}
+            <div class="flex-1 border-r p-2 text-center">
+              <div class="font-medium">{format(date, "EEE")}</div>
+              <div class="text-sm text-gray-500">{format(date, "MMM d")}</div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      <!-- 时间格子容器 -->
+      <div class="flex">
+        <!-- 时间轴标记 -->
+        <div class="w-16 flex-none">
+          {#each HOURS as hour, index}
+            <div class="relative h-[60px]">
+              <div class={cn("absolute -top-2 left-2 text-xs font-medium text-gray-500", index === 0 && "top-0")}>
+                {formatHour(hour)}
+              </div>
+            </div>
+          {/each}
+        </div>
+
+        {#if $displayDates.length === 1}
+          <CalendarViewDayTimeline
+            date={startDate}
+            {viewId}
+            bind:view
+            {r}
+            {field}
+            {shareId}
+            {readonly}
+            {disableRecordQuery}
+          />
+        {:else}
+          {#each $displayDates as date (date.toISOString())}
+            {#key date.toISOString()}
+              <CalendarViewDayTimeline
+                date={readable(date)}
+                {viewId}
+                bind:view
+                {r}
+                {field}
+                {shareId}
+                {readonly}
+                {disableRecordQuery}
+              />
+            {/key}
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+
+  <!-- 右侧面板 -->
+  <div class="flex h-full w-[300px] flex-col divide-y border-l border-gray-200">
+    <div class="flex-none">
+      <CalendarViewMiniDay />
+    </div>
+    <div class="flex-1 overflow-y-auto">
+      <CalendarViewMonthRecords bind:view {r} {viewId} {field} {shareId} {readonly} />
+    </div>
+  </div>
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-day.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-day.svelte
new file mode 100644
index 000000000..365e5b892
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-day.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button"
+  import { cn } from "$lib/utils"
+  import { ChevronLeftIcon, ChevronRightIcon } from "lucide-svelte"
+  import { format, isToday } from "date-fns"
+  import { calendarStore } from "$lib/store/calendar.store"
+
+  const weekDays = ["M", "T", "W", "T", "F", "S", "S"]
+
+  // 使用 store 中的方法
+  const { nextMonth, prevMonth, select, getIsSameMonth, isSelected } = calendarStore
+
+  export let onChange: (date: Date) => void = () => {}
+</script>
+
+<div class="w-full bg-white shadow-sm">
+  <div class="flex items-center justify-between p-4">
+    <Button variant="ghost" size="icon" class="h-7 w-7" on:click={prevMonth}>
+      <ChevronLeftIcon class="size-4" />
+    </Button>
+    <div class="text-sm font-medium">
+      {format($calendarStore.selectedDate, "MMMM yyyy")}
+    </div>
+    <Button variant="ghost" size="icon" class="h-7 w-7" on:click={nextMonth}>
+      <ChevronRightIcon class="size-4" />
+    </Button>
+  </div>
+
+  <div class="grid grid-cols-7 gap-0.5 px-4">
+    {#each weekDays as day}
+      <div class="text-center text-sm text-gray-500">
+        {day}
+      </div>
+    {/each}
+  </div>
+
+  <div class="grid grid-cols-7 gap-0.5 p-4">
+    {#each $calendarStore.dates as date}
+      {@const isDateSelected = $isSelected(date)}
+      {@const isCurrentMonth = $getIsSameMonth(date)}
+      {@const isCurrentDay = isToday(date)}
+      <button
+        class={cn(
+          "flex h-8 w-8 items-center justify-center rounded-md text-sm",
+          !isCurrentMonth && "text-gray-400",
+          isDateSelected && "bg-gray-100",
+          isCurrentDay && !isDateSelected && "font-semibold text-blue-500",
+          isCurrentMonth && !isDateSelected && "hover:bg-gray-50",
+        )}
+        disabled={!isCurrentMonth}
+        on:click={() => {
+          select(date)
+          onChange(date)
+        }}
+      >
+        {format(date, "d")}
+        {#if isCurrentDay}
+          <div class="absolute mt-5 h-1 w-1 rounded-full bg-blue-500"></div>
+        {/if}
+      </button>
+    {/each}
+  </div>
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month-control.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month-control.svelte
index c5c84ad3e..13c712ee1 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month-control.svelte
@@ -1,25 +1,76 @@
 <script lang="ts">
   import Button from "$lib/components/ui/button/button.svelte"
   import * as Popover from "$lib/components/ui/popover"
-  import { monthStore } from "$lib/store/calendar.store"
-  import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-svelte"
+  import { calendarStore } from "$lib/store/calendar.store"
+  import { ChevronLeftIcon, ChevronRightIcon } from "lucide-svelte"
   import CalendarViewMiniMonth from "./calendar-view-mini-month.svelte"
   import { format } from "date-fns"
+  import CalendarViewMiniDay from "./calendar-view-mini-day.svelte"
+  import { type CalendarView } from "@undb/table"
+
+  export let view: CalendarView
+  $: timeScale = view.timeScale
+  let open = false
+
+  let onChange: (date: Date) => void = () => {
+    open = false
+  }
+
+  let startOfWeek = calendarStore.startOfWeekTimestamp
+  let endOfWeek = calendarStore.endOfWeekTimestamp
 </script>
 
-<Button variant="secondary" size="xs" on:click={() => monthStore.prevMonth()}>
+<Button
+  variant="secondary"
+  size="xs"
+  on:click={() => {
+    if (timeScale === "day") {
+      calendarStore.prevDay()
+    } else if (timeScale === "week") {
+      calendarStore.prevWeek()
+    } else {
+      calendarStore.prevMonth()
+    }
+  }}
+>
   <ChevronLeftIcon class="size-3 font-semibold text-gray-500" />
 </Button>
-<Popover.Root>
+<Popover.Root bind:open>
   <Popover.Trigger>
     <Button variant="secondary" size="xs">
-      {format($monthStore.currentDate, "yyyy-MM")}
+      {#if timeScale === "day"}
+        {format($calendarStore.selectedDate, "yyyy-MM-dd")}
+      {:else if timeScale === "week"}
+        {$startOfWeek && format($startOfWeek, "yyyy-MM-dd")}
+        -
+        {$endOfWeek && format($endOfWeek, "yyyy-MM-dd")}
+      {:else}
+        {format($calendarStore.selectedDate, "yyyy-MM")}
+      {/if}
     </Button>
   </Popover.Trigger>
   <Popover.Content class="px-0 py-2">
-    <CalendarViewMiniMonth />
+    {#if timeScale === "day"}
+      <CalendarViewMiniDay {onChange} />
+    {:else if timeScale === "week"}
+      <CalendarViewMiniDay {onChange} />
+    {:else}
+      <CalendarViewMiniMonth {onChange} />
+    {/if}
   </Popover.Content>
 </Popover.Root>
-<Button variant="secondary" size="xs" on:click={() => monthStore.nextMonth()}>
+<Button
+  variant="secondary"
+  size="xs"
+  on:click={() => {
+    if (timeScale === "day") {
+      calendarStore.nextDay()
+    } else if (timeScale === "week") {
+      calendarStore.nextWeek()
+    } else {
+      calendarStore.nextMonth()
+    }
+  }}
+>
   <ChevronRightIcon class="size-3 font-semibold text-gray-500" />
 </Button>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month.svelte
index efd9ffcc1..e24ac64e3 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-mini-month.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import { cn } from "$lib/utils"
   import { format } from "date-fns"
   import { getMonth } from "date-fns/getMonth"
   import { isSameMonth } from "date-fns/isSameMonth"
   import { ChevronLeftIcon, ChevronRightIcon } from "lucide-svelte"
 
-  const currentYear = monthStore.currentYear
-  const currentMonth = monthStore.currentMonth
+  const currentYear = calendarStore.currentYear
+  const currentMonth = calendarStore.currentMonth
+
+  export let onChange: (date: Date) => void = () => {}
 </script>
 
 <div class="flex w-full flex-col">
   <div class="flex items-center px-2 py-1">
-    <Button variant="ghost" size="icon" on:click={() => monthStore.prevYear()}>
+    <Button variant="ghost" size="icon" on:click={() => calendarStore.prevYear()}>
       <ChevronLeftIcon class="size-3 text-gray-500" />
     </Button>
     <span class="flex-1 text-center text-sm font-medium">{$currentYear}</span>
-    <Button variant="ghost" size="icon" on:click={() => monthStore.nextYear()}>
+    <Button variant="ghost" size="icon" on:click={() => calendarStore.nextYear()}>
       <ChevronRightIcon class="size-3 text-gray-500" />
     </Button>
   </div>
@@ -32,7 +34,10 @@
           isCurrentMonth && "bg-gray-200 font-semibold",
           isNow && !isCurrentMonth && "font-semibold text-blue-500",
         )}
-        on:click={() => monthStore.setMonth(date)}
+        on:click={() => {
+          calendarStore.setMonth(date)
+          onChange(date)
+        }}
       >
         {format(date, "MMM")}
       </button>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date-record.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date-record.svelte
index 88f994679..8b62138c0 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date-record.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date-record.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import { type Writable } from "svelte/store"
   import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-  import type { Field, RecordDO, DateField, DateRangeField } from "@undb/table"
-  import { monthStore } from "$lib/store/calendar.store"
+  import type { Field, RecordDO, DateField, DateRangeField, IColors } from "@undb/table"
+  import { calendarStore } from "$lib/store/calendar.store"
   import { cn } from "$lib/utils"
   import { getTable } from "$lib/store/table.store"
+  import type { ViewColor } from "@undb/table"
+  import { getColor } from "./calendar-view.util"
+  import * as Tooltip from "$lib/components/ui/tooltip"
 
   export let record: RecordDO
   export let displayField: Field | undefined
@@ -13,6 +16,7 @@
   export let date: Date
   export let readonly = false
   export let shareId: string | undefined
+  export let color: ViewColor | undefined
 
   const table = getTable()
 
@@ -30,10 +34,10 @@
           }
         },
         onDragStart(args) {
-          monthStore.setIsDragging(true)
+          calendarStore.setIsDragging(true)
         },
         onDrop(args) {
-          monthStore.setIsDragging(false)
+          calendarStore.setIsDragging(false)
         },
       })
     }
@@ -51,25 +55,37 @@
   $: value = record.getValue(field.id).into(undefined)?.value
     ? field.format(record.getValue(field.id).into(undefined)?.value ?? "")
     : ""
+
+  $: colorSpec = color?.getSpec($table.schema).into(undefined)
+  $: isMatch = colorSpec ? record.match(colorSpec) : false
+  $: condition = isMatch ? color?.getMatchedFieldConditions($table, record)[0] : undefined
 </script>
 
-<button
-  class={cn(
-    "h-[20px] w-full overflow-hidden rounded-sm border border-blue-200 bg-blue-50 px-1 py-0.5 text-left text-[10px] text-blue-800 transition-all hover:bg-blue-100 hover:shadow-md",
-    $$restProps.class,
-  )}
-  on:click={() => r.set(record.id.value)}
-  use:setupDraggableDate={record}
->
-  <span class="truncate">
-    <div class="flex items-center gap-1 truncate">
-      <span class="font-semibold">
-        {displayValue}
-      </span>
-      <span> · </span>
-      <span>
-        {value}
+<Tooltip.Root>
+  <Tooltip.Trigger>
+    <button
+      class={cn(
+        "h-[20px] w-full overflow-hidden rounded-sm border border-gray-300 px-1 py-0.5 text-left text-[10px]  transition-all  hover:shadow-md",
+        $$restProps.class,
+        isMatch && getColor(condition?.option.color),
+      )}
+      on:click={() => r.set(record.id.value)}
+      use:setupDraggableDate={record}
+    >
+      <span class="truncate">
+        <div class="flex items-center gap-1 truncate">
+          <span class="font-semibold">
+            {displayValue}
+          </span>
+          <span> · </span>
+          <span>
+            {value}
+          </span>
+        </div>
       </span>
-    </div>
-  </span>
-</button>
+    </button>
+  </Tooltip.Trigger>
+  <Tooltip.Content>
+    <p>{displayValue} · {value}</p>
+  </Tooltip.Content>
+</Tooltip.Root>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte
index 8ee03b404..2c86691e3 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte
@@ -4,7 +4,7 @@
   import { DateIsSameDay, type RecordDO, type DateField, type DateRangeField, DateFieldValue } from "@undb/table"
   import { type Writable } from "svelte/store"
   import { onMount } from "svelte"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import CalendarViewMonthDateRecord from "./calendar-view-month-date-record.svelte"
   import { getDate } from "date-fns/getDate"
   import { isToday } from "date-fns/isToday"
@@ -25,8 +25,15 @@
   export let shareId: string | undefined = undefined
   export let viewId: Readable<string | undefined>
 
-  const isSelected = monthStore.isSelected
-  const getIsSameMonth = monthStore.getIsSameMonth
+  const table = getTable()
+  const store = getRecordsStore()
+
+  const records = store.records
+
+  const isSelected = calendarStore.isSelected
+  const getIsSameMonth = calendarStore.getIsSameMonth
+
+  $: color = $viewId ? $table.views.getViewById($viewId)?.color.into(undefined) : undefined
 
   $: day = getDate(date)
   $: today = isToday(date)
@@ -35,11 +42,6 @@
   $: selected = $isSelected(date)
   $: isSameMonth = $getIsSameMonth(date)
 
-  const table = getTable()
-  const store = getRecordsStore()
-
-  const records = store.records
-
   $: dateRecords = $records.filter((r) => {
     const spec = new DateIsSameDay(date, field.id)
     return spec.isSatisfiedBy(r)
@@ -159,11 +161,11 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   use:setupDropTarget={date}
-  on:click={() => monthStore.select(date)}
+  on:click={() => calendarStore.select(date)}
   on:dblclick={() => onCreateRecord(date)}
   class={cn(
     "group relative h-full border-b border-r border-gray-200 bg-white p-2",
-    ($monthStore.dates.indexOf(date) + 1) % 7 === 0 && "border-r-0",
+    ($calendarStore.dates.indexOf(date) + 1) % 7 === 0 && "border-r-0",
     _isWeekend && "bg-gray-50",
   )}
 >
@@ -206,18 +208,19 @@
           record={aboutToDropRecord}
           {displayField}
           {field}
+          {color}
           class="opacity-50"
         />
       {/if}
       {#each visibleRecords as record (record.id.value)}
-        <CalendarViewMonthDateRecord {date} {r} {record} {displayField} {field} {shareId} {readonly} />
+        <CalendarViewMonthDateRecord {color} {date} {r} {record} {displayField} {field} {shareId} {readonly} />
       {/each}
     </div>
     {#if remainingCount > 0}
       <button
         on:click={() => {
-          monthStore.select(date)
-          monthStore.setScope("selectedDate")
+          calendarStore.select(date)
+          calendarStore.setScope("selectedDate")
         }}
         class="absolute bottom-0 right-0 rounded-sm border bg-white px-1 py-0.5 text-[10px] text-gray-500 transition-all hover:bg-gray-50 hover:shadow-sm"
       >
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-record.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-record.svelte
index 222183fa0..8483421ee 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-record.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-record.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
   import type { Field, RecordDO, DateField, DateRangeField } from "@undb/table"
   import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import { type Writable } from "svelte/store"
   import { cn } from "$lib/utils"
+  import { getTable } from "$lib/store/table.store"
+  import { ViewColor } from "@undb/table"
+  import { getBgColor } from "../grid-view/grid-view.util"
+
+  const table = getTable()
 
   export let record: RecordDO
   export let defaultField: Field | undefined
@@ -11,6 +16,7 @@
   export let r: Writable<string | null>
   export let shareId: string | undefined
   export let readonly = false
+  export let color: ViewColor | undefined
 
   let defaultValue = defaultField ? (record.getValue(defaultField.id).into(undefined)?.value ?? undefined) : undefined
   let value = record.getValue(field.id).into(undefined)?.value ?? ""
@@ -27,10 +33,10 @@
           }
         },
         onDragStart(args) {
-          monthStore.setIsDragging(true)
+          calendarStore.setIsDragging(true)
         },
         onDrop(args) {
-          monthStore.setIsDragging(false)
+          calendarStore.setIsDragging(false)
         },
       })
     }
@@ -41,14 +47,25 @@
       update: setup,
     }
   }
+
+  $: colorSpec = color?.getSpec($table.schema).into(undefined)
+  $: isMatch = colorSpec ? record.match(colorSpec) : false
+  $: condition = isMatch ? color?.getMatchedFieldConditions($table, record)[0] : undefined
 </script>
 
 <button
   use:setupDraggableDate={record}
   on:click={() => r.set(record.id.value)}
-  class={cn("flex w-full items-center gap-1.5 space-y-2 rounded-sm border p-2 hover:shadow-md", $$restProps.class)}
+  class={cn(
+    "relative flex w-full items-center gap-1.5 rounded-sm border p-2 hover:shadow-md",
+    $$restProps.class,
+    isMatch && "pl-3",
+  )}
 >
-  <div class="flex items-center gap-2">
+  {#if isMatch}
+    <div class={cn("absolute left-0 top-0 h-full w-1", condition && getBgColor(condition.option.color))}></div>
+  {/if}
+  <div class="flex items-center gap-2 space-y-2">
     <div class="flex-1 space-y-1">
       <div class="text-left text-sm font-semibold text-gray-900">{defaultValue ?? "-"}</div>
       <div class="text-left text-xs text-gray-500">{value ? field.format(value) : ""}</div>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records-filter-picker.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records-filter-picker.svelte
index edaa46fa1..a27542073 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records-filter-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records-filter-picker.svelte
@@ -1,25 +1,21 @@
 <script lang="ts">
   import * as Select from "$lib/components/ui/select"
-  import { monthStore } from "$lib/store/calendar.store"
-  import type { MonthScope } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import { cn } from "$lib/utils"
+  import { CalendarView, type Scope } from "@undb/table"
 
-  const scopes: { value: MonthScope; label: string }[] = [
-    { value: "selectedDate", label: "In selected date" },
-    { value: "withoutDate", label: "Without date" },
-    { value: "thisMonth", label: "In this month" },
-    { value: "allRecords", label: "All records" },
-  ]
+  export let view: CalendarView
 
-  const scope = $monthStore.scope
+  const scope = $calendarStore.scope
+  $: scopes = view.scopes
 
   $: selected = {
     value: $scope,
     label: scopes.find((s) => s.value === $scope)?.label ?? "Select Scope",
   }
 
-  function setScope(scope: MonthScope) {
-    monthStore.setScope(scope)
+  function setScope(scope: Scope) {
+    calendarStore.setScope(scope)
   }
 </script>
 
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
index cdb015d23..32bc2bb04 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
@@ -6,7 +6,7 @@
   import { getTable } from "$lib/store/table.store"
   import { type Readable } from "svelte/store"
   import { trpc } from "$lib/trpc/client"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import { type IRecordsDTO, type IViewFilterGroup, Records } from "@undb/table"
   import { format } from "date-fns"
   import { match } from "ts-pattern"
@@ -17,8 +17,10 @@
   import { createVirtualizer } from "@tanstack/svelte-virtual"
   import { inview } from "svelte-inview"
   import { LoaderCircleIcon } from "lucide-svelte"
+  import { CalendarView } from "@undb/table"
 
   export let viewId: Readable<string | undefined>
+  export let view: CalendarView
   export let field: DateField | DateRangeField
   export let r: Writable<string | null>
   export let shareId: string | undefined
@@ -28,17 +30,19 @@
 
   let defaultField = $t.schema.getDefaultDisplayField().into(undefined)
 
-  const startTimestamp = monthStore.startTimestamp
-  const endTimestamp = monthStore.endTimestamp
-  const scope = $monthStore.scope
+  const startTimestamp = calendarStore.startTimestamp
+  const endTimestamp = calendarStore.endTimestamp
+  const startOfWeekTimestamp = calendarStore.startOfWeekTimestamp
+  const endOfWeekTimestamp = calendarStore.endOfWeekTimestamp
+  const scope = $calendarStore.scope
 
   const search = writable("")
 
   const getRecords = createInfiniteQuery(
     derived(
-      [t, viewId, monthStore, startTimestamp, endTimestamp, search],
-      ([$table, $viewId, $monthStore, $startTimestamp, $endTimestamp, $search]) => {
-        const date = $monthStore.selectedDate
+      [t, viewId, calendarStore, startTimestamp, endTimestamp, search],
+      ([$table, $viewId, $calendarStore, $startTimestamp, $endTimestamp, $search]) => {
+        const date = $calendarStore.selectedDate
 
         const filters = match($scope)
           .returnType<IViewFilterGroup | undefined>()
@@ -66,12 +70,23 @@
               children: [{ field: field.id.value, op: "is_empty" }],
             }
           })
+          .with("thisWeek", () => {
+            if (!$startOfWeekTimestamp || !$endOfWeekTimestamp) return undefined
+            return {
+              conjunction: "and",
+              children: [
+                { field: field.id.value, op: "is_after", value: $startOfWeekTimestamp!.toISOString() },
+                { field: field.id.value, op: "is_before", value: $endOfWeekTimestamp!.toISOString() },
+              ],
+            }
+          })
           .otherwise(() => undefined)
 
         const dateString = match($scope)
           .returnType<string | undefined>()
           .with("selectedDate", () => date?.toISOString())
           .with("thisMonth", () => $startTimestamp?.toISOString())
+          .with("thisWeek", () => $startOfWeekTimestamp?.toISOString())
           .otherwise(() => undefined)
         return {
           queryKey: ["records", $table?.id.value, $viewId, scope, dateString, $search],
@@ -104,6 +119,8 @@
 
   let virtualListEl: HTMLDivElement
 
+  $: color = $viewId ? $t.views.getViewById($viewId)?.color.into(undefined) : undefined
+
   $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
     count: records?.count ?? 0,
     getScrollElement: () => virtualListEl,
@@ -112,12 +129,12 @@
   })
 </script>
 
-<div class="flex flex-1 flex-col gap-2 overflow-hidden p-2">
+<div class="flex h-full flex-1 flex-col gap-2 overflow-hidden p-2">
   <div class="flex items-center justify-between gap-1.5 text-sm font-medium">
     <span> Records </span>
 
     <span class="flex-1">
-      <CalendarViewMonthRecordsFilterPicker />
+      <CalendarViewMonthRecordsFilterPicker bind:view />
     </span>
   </div>
 
@@ -133,7 +150,15 @@
           <div
             style="position: absolute; top: 0; left: 0; width: 100%; height: {row.size}px; transform: translateY({row.start}px);"
           >
-            <CalendarViewMonthRecord {r} record={records?.records[row.index]} {defaultField} {field} {shareId} {readonly}/>
+            <CalendarViewMonthRecord
+              {r}
+              {color}
+              record={records?.records[row.index]}
+              {defaultField}
+              {field}
+              {shareId}
+              {readonly}
+            />
           </div>
         {/each}
       </div>
@@ -159,7 +184,7 @@
         </div>
       {/if}
     {:else if !$getRecords.isPending}
-      <div class="flex h-full items-center justify-center">
+      <div class="flex h-full flex-1 items-center justify-center">
         <span class="text-muted-foreground text-sm">No Records found</span>
       </div>
     {/if}
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte
index 7644ec598..3714e73b6 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte
@@ -2,7 +2,7 @@
   import { type IRecordsDTO, Records, type CalendarView, type DateField, type DateRangeField } from "@undb/table"
   import { derived, type Readable } from "svelte/store"
   import type { Writable } from "svelte/store"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
@@ -21,8 +21,8 @@
   export let r: Writable<string | null>
   export let field: DateField | DateRangeField
 
-  const startTimestamp = monthStore.startTimestamp
-  const endTimestamp = monthStore.endTimestamp
+  const startTimestamp = calendarStore.startTimestamp
+  const endTimestamp = calendarStore.endTimestamp
 
   const t = getTable()
   const q = queryParam("q")
@@ -45,14 +45,14 @@
             return trpc.shareData.records.query({
               shareId,
               tableId: $table?.id.value,
-            viewId: $viewId,
-            q: $q ?? undefined,
-            filters: {
-              conjunction: "and",
-              children: [
-                { field: field.id.value, op: "is_after", value: $startTimestamp!.toISOString() },
-                { field: field.id.value, op: "is_before", value: $endTimestamp!.toISOString() },
-              ],
+              viewId: $viewId,
+              q: $q ?? undefined,
+              filters: {
+                conjunction: "and",
+                children: [
+                  { field: field.id.value, op: "is_after", value: $startTimestamp!.toISOString() },
+                  { field: field.id.value, op: "is_before", value: $endTimestamp!.toISOString() },
+                ],
               },
             })
           }
@@ -116,19 +116,19 @@
       </div>
     </div>
     <div class="grid h-full grid-cols-7 grid-rows-5">
-      {#each $monthStore.dates as date}
+      {#each $calendarStore.dates as date}
         <CalendarViewMonthDate {date} {r} {field} {readonly} {shareId} {viewId} />
       {/each}
     </div>
     <div class="absolute bottom-4 right-2">
       <!-- TODO: is dragging -->
       {#if !readonly}
-        <CalendarDateRemoveButton {view} />
+        <CalendarDateRemoveButton bind:view />
       {/if}
     </div>
   </div>
   <div class="flex h-full w-[300px] flex-col divide-y border-l">
     <CalendarViewMiniMonth />
-    <CalendarViewMonthRecords {r} {viewId} {field} {shareId} {readonly} />
+    <CalendarViewMonthRecords bind:view {r} {viewId} {field} {shareId} {readonly} />
   </div>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
index 7c397acc9..6deef4622 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button"
   import CalendarViewMiniMonthControl from "./calendar-view-mini-month-control.svelte"
-  import { monthStore } from "$lib/store/calendar.store"
+  import { calendarStore } from "$lib/store/calendar.store"
   import ViewFilterEditor from "../view-filter-editor/view-filter-editor.svelte"
   import ViewFields from "../view-fields/view-fields.svelte"
   import { type Readable } from "svelte/store"
@@ -11,6 +11,8 @@
   import CreateRecordButton from "../create-record/create-record-button.svelte"
   import ShareButton from "../share/share-button.svelte"
   import ViewWidgetButton from "../view-widget/view-widget-button.svelte"
+  import ViewColorEditor from "../view-color-editor/view-color-editor.svelte"
+  import CalendarTimescalePicker from "./calendar-timescale-picker.svelte"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -20,15 +22,17 @@
 <div class="flex justify-between gap-2 border-b px-2 py-2">
   <div class="flex items-center gap-2">
     <CreateRecordButton size="xs" />
-    <CalendarViewMiniMonthControl />
-    <Button variant="outline" size="xs" on:click={() => monthStore.reset()}>Today</Button>
+    <CalendarViewMiniMonthControl bind:view />
+    <Button variant="outline" size="xs" on:click={() => calendarStore.reset()}>Today</Button>
+    <CalendarTimescalePicker size="xs" bind:view />
   </div>
 
   <div>
-    <CalendarOptionButton {readonly} {view} size="xs" />
+    <CalendarOptionButton {readonly} bind:view size="xs" />
     <ViewFilterEditor {readonly} {viewId} size="xs" />
     <ViewFields {readonly} {viewId} size="xs" />
     <ViewSort {readonly} {viewId} size="xs" />
+    <ViewColorEditor {readonly} {viewId} size="xs" />
     {#if $viewId}
       <ShareButton type="view" id={$viewId} size="xs" />
     {/if}
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.svelte
index d7ed339f5..50aa178cf 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import { getTable } from "$lib/store/table.store"
-  import type { Readable, Writable } from "svelte/store"
+  import { derived, type Readable, type Writable } from "svelte/store"
   import type { CalendarView, RecordDO } from "@undb/table"
   import { FieldIdVo, Records, type DateField, type DateRangeField } from "@undb/table"
   import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
   import CalendarViewToolbar from "./calendar-view-toolbar.svelte"
+  import { calendarStore } from "$lib/store/calendar.store"
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -25,19 +26,53 @@
   if (records) {
     recordsStore.setRecords(new Records(records), Date.now())
   }
+
+  $: timeScale = view.timeScale
+  let startOfWeekTimestamp = calendarStore.startOfWeekTimestamp
+  let selectedDate = derived(calendarStore, ($calendarStore) => $calendarStore.selectedDate)
 </script>
 
 {#key $table.id.value}
-  <CalendarViewToolbar {viewId} {view} {readonly} />
+  <CalendarViewToolbar {viewId} bind:view {readonly} />
   {#if view.type === "calendar"}
     {#if field}
-      {#await import("$lib/components/blocks/calendar-view/calendar-view-month.svelte") then { default: CalendarViewMonth }}
-        <CalendarViewMonth {field} {view} {shareId} {viewId} {disableRecordQuery} {readonly} {r} />
-      {/await}
+      {#if timeScale === "month"}
+        {#await import("$lib/components/blocks/calendar-view/calendar-view-month.svelte") then { default: CalendarViewMonth }}
+          <CalendarViewMonth {field} bind:view {shareId} {viewId} {disableRecordQuery} {readonly} {r} />
+        {/await}
+      {:else if timeScale === "week"}
+        {#await import("$lib/components/blocks/calendar-view/calendar-view-day.svelte") then { default: CalendarViewWeek }}
+          <CalendarViewWeek
+            {field}
+            bind:view
+            {shareId}
+            {viewId}
+            {disableRecordQuery}
+            {readonly}
+            {r}
+            startDate={startOfWeekTimestamp}
+            days={7}
+          />
+        {/await}
+      {:else if timeScale === "day"}
+        {#await import("$lib/components/blocks/calendar-view/calendar-view-day.svelte") then { default: CalendarViewDay }}
+          <CalendarViewDay
+            {field}
+            bind:view
+            {shareId}
+            {viewId}
+            {disableRecordQuery}
+            {readonly}
+            {r}
+            startDate={selectedDate}
+            days={1}
+          />
+        {/await}
+      {/if}
     {:else}
       <section class="flex h-full w-full items-center justify-center">
         {#await import("$lib/components/blocks/calendar-view/select-calendar-field.svelte") then { default: SelectCalendarField }}
-          <SelectCalendarField {view} />
+          <SelectCalendarField bind:view />
         {/await}
       </section>
     {/if}
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.util.ts b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.util.ts
new file mode 100644
index 000000000..621a174ed
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view.util.ts
@@ -0,0 +1,24 @@
+import { IColors } from "@undb/table"
+
+export function getColor(color: IColors) {
+  const map: Record<IColors, string> = {
+    red: "border-red-200 bg-red-50 text-red-800 hover:bg-red-100",
+    yellow: "border-yellow-200 bg-yellow-50 text-yellow-800 hover:bg-yellow-100",
+    blue: "border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100",
+    green: "border-green-200 bg-green-50 text-green-800 hover:bg-green-100",
+    purple: "border-purple-200 bg-purple-50 text-purple-800 hover:bg-purple-100",
+    gray: "border-gray-200 bg-gray-50 text-gray-800 hover:bg-gray-100",
+    orange: "border-orange-200 bg-orange-50 text-orange-800 hover:bg-orange-100",
+    pink: "border-pink-200 bg-pink-50 text-pink-800 hover:bg-pink-100",
+    cyan: "border-cyan-200 bg-cyan-50 text-cyan-800 hover:bg-cyan-100",
+    teal: "border-teal-200 bg-teal-50 text-teal-800 hover:bg-teal-100",
+    indigo: "border-indigo-200 bg-indigo-50 text-indigo-800 hover:bg-indigo-100",
+    lime: "border-lime-200 bg-lime-50 text-lime-800 hover:bg-lime-100",
+    emerald: "border-emerald-200 bg-emerald-50 text-emerald-800 hover:bg-emerald-100",
+    sky: "border-sky-200 bg-sky-50 text-sky-800 hover:bg-sky-100",
+    violet: "border-violet-200 bg-violet-50 text-violet-800 hover:bg-violet-100",
+    rose: "border-rose-200 bg-rose-50 text-rose-800 hover:bg-rose-100",
+    black: "border-black/50 bg-black/50 text-white hover:bg-black/60",
+  }
+  return map[color]
+}
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/select-calendar-field.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/select-calendar-field.svelte
index 89be58f22..8b0c3e627 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/select-calendar-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/select-calendar-field.svelte
@@ -12,6 +12,6 @@
     <Card.Description>Select a select type field to group calendar lanes.</Card.Description>
   </Card.Header>
   <Card.Content class="space-y-4">
-    <SelectCalendarFieldForm {view} />
+    <SelectCalendarFieldForm bind:view />
   </Card.Content>
 </Card.Root>
diff --git a/apps/frontend/src/lib/components/blocks/chart/chart.svelte b/apps/frontend/src/lib/components/blocks/chart/chart.svelte
index 3cbb610a5..50c28c8a2 100644
--- a/apps/frontend/src/lib/components/blocks/chart/chart.svelte
+++ b/apps/frontend/src/lib/components/blocks/chart/chart.svelte
@@ -6,6 +6,8 @@
 
   const map: Record<string, ComponentType> = {
   }
+
+  $: component = map[chart.type]
 </script>
 
-<svelte:component this={map[chart.type]} />
+<svelte:component this={component} />
diff --git a/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte b/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
index 5a541bac4..a058444b8 100644
--- a/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
@@ -93,9 +93,9 @@
     onSubmit(event) {
       validateForm({ update: true })
     },
-    onChange(event) {
-      validateForm({ update: true })
-    },
+    // onChange(event) {
+    //   validateForm({ update: true })
+    // },
     onUpdate(event) {
       if (!event.form.valid) {
         console.log(event.form.errors)
@@ -111,7 +111,6 @@
 
   $: dirty = !!$tainted
   $: disabled = !!$allErrors.length
-  $: console.log($allErrors)
 
   $: fields = $table
     .getOrderedMutableFields(formId ? new FormIdVO(formId) : undefined)
diff --git a/apps/frontend/src/lib/components/blocks/date/date-formatter-picker.svelte b/apps/frontend/src/lib/components/blocks/date/date-formatter-picker.svelte
new file mode 100644
index 000000000..cc4a221e8
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/date/date-formatter-picker.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import * as Select from "$lib/components/ui/select"
+  import { formatItems } from "@undb/table"
+  import { isString } from "radash"
+
+  export let value: string | undefined = formatItems[0]
+  export let onValueChange: (v: string | undefined) => void = () => {}
+
+  const dateFormats = formatItems.map((v) => ({
+    label: v,
+    value: v,
+  }))
+
+  $: selectedValue = isString(value)
+    ? {
+        label: value,
+        value,
+      }
+    : undefined
+</script>
+
+<Select.Root
+  selected={selectedValue}
+  onSelectedChange={(v) => {
+    if (v) {
+      value = v.value
+    } else {
+      value = undefined
+    }
+    onValueChange(v?.value)
+  }}
+  {...$$restProps}
+>
+  <Select.Trigger>
+    <Select.Value class="text-xs" placeholder="Select a date format..." />
+  </Select.Trigger>
+  <Select.Content>
+    {#each dateFormats as format}
+      <Select.Item class="text-xs text-gray-600" value={format.value}>
+        {format.label}
+      </Select.Item>
+    {/each}
+  </Select.Content>
+</Select.Root>
diff --git a/apps/frontend/src/lib/components/blocks/date/time-formatter-picker.svelte b/apps/frontend/src/lib/components/blocks/date/time-formatter-picker.svelte
new file mode 100644
index 000000000..34ad2aca3
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/date/time-formatter-picker.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import * as Select from "$lib/components/ui/select"
+  import { timeFormatItems } from "@undb/table"
+  import { isString } from "radash"
+
+  export let value: string | undefined = timeFormatItems[0]
+  export let onValueChange: (v: string | undefined) => void = () => {}
+
+  const timeFormats = timeFormatItems.map((v) => ({
+    label: v,
+    value: v,
+  }))
+
+  $: selectedValue = isString(value)
+    ? {
+        label: value,
+        value,
+      }
+    : undefined
+</script>
+
+<Select.Root
+  selected={selectedValue}
+  onSelectedChange={(v) => {
+    if (v) {
+      value = v.value
+    } else {
+      value = undefined
+    }
+    onValueChange(v?.value)
+  }}
+  {...$$restProps}
+>
+  <Select.Trigger>
+    <Select.Value class="text-xs" placeholder="Select a date format..." />
+  </Select.Trigger>
+  <Select.Content>
+    {#each timeFormats as format}
+      <Select.Item class="text-xs text-gray-600" value={format.value}>
+        {format.label}
+      </Select.Item>
+    {/each}
+  </Select.Content>
+</Select.Root>
diff --git a/apps/frontend/src/lib/components/blocks/date/time-picker.svelte b/apps/frontend/src/lib/components/blocks/date/time-picker.svelte
new file mode 100644
index 000000000..b7d55d002
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/date/time-picker.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  import * as Select from "$lib/components/ui/select"
+  import { Input } from "$lib/components/ui/input"
+
+  // 生成时间选项
+  const hours = Array.from({ length: 24 }, (_, i) => ({
+    label: i.toString().padStart(2, "0"),
+    value: i.toString().padStart(2, "0"),
+  }))
+
+  const minutes = Array.from({ length: 60 }, (_, i) => ({
+    label: i.toString().padStart(2, "0"),
+    value: i.toString().padStart(2, "0"),
+  }))
+
+  export let value = { hour: 0, minute: 0 }
+  export let onValueChange: (value: { hour: number; minute: number }) => void = () => {}
+  export let disabled = false
+
+
+  let hourSearch = ""
+  let minuteSearch = ""
+
+  $: selectedHour = {
+    label: value.hour.toString().padStart(2, "0"),
+    value: value.hour.toString(),
+  }
+
+  $: selectedMinute = {
+    label: value.minute.toString().padStart(2, "0"),
+    value: value.minute.toString(),
+  }
+
+  $: filteredHours = hours.filter((h) => h.value.includes(hourSearch) || parseInt(hourSearch) === parseInt(h.value))
+
+  $: filteredMinutes = minutes.filter(
+    (m) => m.value.includes(minuteSearch) || parseInt(minuteSearch) === parseInt(m.value),
+  )
+
+  function validateHour(input: string) {
+    const num = parseInt(input)
+    if (isNaN(num) || num < 0 || num > 23) return false
+    return true
+  }
+
+  function validateMinute(input: string) {
+    const num = parseInt(input)
+    if (isNaN(num) || num < 0 || num > 59) return false
+    return true
+  }
+
+  function updateValue() {
+    onValueChange(value)
+  }
+</script>
+
+<div class="flex items-center gap-2">
+  <Select.Root
+    selected={selectedHour}
+    onSelectedChange={(v) => {
+      if (v?.value && validateHour(v.value)) {
+        value.hour = parseInt(v.value)
+        updateValue()
+      }
+    }}
+    {disabled}
+  >
+    <Select.Trigger class="flex-1">
+      <Select.Value placeholder="Hour" />
+    </Select.Trigger>
+    <Select.Content>
+      <Select.Group class="max-h-[200px] overflow-y-auto">
+        {#each filteredHours as hour}
+          <Select.Item
+            value={hour.value}
+            class="data-[highlighted]:bg-accent data-[selected=true]:bg-accent"
+            data-selected={parseInt(hour.value) === parseInt(selectedHour.value)}
+          >
+            {hour.label}
+          </Select.Item>
+        {/each}
+      </Select.Group>
+    </Select.Content>
+  </Select.Root>
+
+  <span class="text-gray-500">:</span>
+
+  <Select.Root
+    selected={selectedMinute}
+    onSelectedChange={(v) => {
+      if (v?.value && validateMinute(v.value)) {
+        value.minute = parseInt(v.value)
+        updateValue()
+      }
+    }}
+    {disabled}
+  >
+    <Select.Trigger class="flex-1">
+      <Select.Value placeholder="Min" />
+    </Select.Trigger>
+    <Select.Content>
+      <Select.Group class="max-h-[200px] overflow-y-auto">
+        {#each filteredMinutes as minute}
+          <Select.Item
+            value={minute.value}
+            class="data-[highlighted]:bg-accent data-[selected=true]:bg-accent"
+            data-selected={parseInt(minute.value) === parseInt(selectedMinute.value)}
+          >
+            {minute.label}
+          </Select.Item>
+        {/each}
+      </Select.Group>
+    </Select.Content>
+  </Select.Root>
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
index 2a1c3ec99..3714bcafd 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
@@ -24,7 +24,7 @@
     mutationFn: trpc.record.update.mutate,
     async onSuccess(data, variables, context) {
       gridViewStore.exitEditing()
-      await recordsStore.invalidateRecord($table, recordId)
+      await recordsStore?.invalidateRecord($table, recordId)
       await client.invalidateQueries({ queryKey: [recordId, "get"] })
     },
     onError(error: Error) {
diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
index 086c59361..4617ef21a 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -9,14 +9,16 @@
   import { DateField, isDateFieldMacro } from "@undb/table"
   import DateMacroPicker from "../date/date-macro-picker.svelte"
   import DateMacro from "../date/date-macro.svelte"
+  import TimePicker from "../date/time-picker.svelte"
 
   export let readonly = false
   export let disabled = false
   export let field: DateField
 
-  let formatter = field.formatter
+  $: formatter = field.formatter
+  $: includeTime = field.includeTime
 
-  export let value: string | Date | undefined = undefined
+  export let value: string | Date | undefined | null = undefined
   function parse(value: string) {
     if (isDateFieldMacro(value)) return value
 
@@ -29,6 +31,12 @@
   $: internalDate = isString(value) ? parse(value) : isDate(value) ? parse(value.toISOString()) : undefined
 
   let open = false
+
+  function onChange() {
+    if (!includeTime) {
+      open = false
+    }
+  }
 </script>
 
 <Popover.Root bind:open openFocus portal="body">
@@ -54,7 +62,7 @@
     <div class="p-1">
       <DateMacroPicker
         onValueChange={() => {
-          open = false
+          onChange()
         }}
         bind:value
       />
@@ -67,17 +75,31 @@
         } else {
           value = undefined
         }
-        open = false
+        onChange()
       }}
       initialFocus
     />
+    {#if includeTime}
+      <div class="px-2 pb-2">
+        <TimePicker
+          value={{
+            hour: value ? new Date(value).getHours() : 0,
+            minute: value ? new Date(value).getMinutes() : 0,
+          }}
+          onValueChange={(v) => {
+            if (!value) return
+            value = new Date(new Date(value).setHours(v.hour, v.minute, 0, 0)).toISOString()
+          }}
+        />
+      </div>
+    {/if}
     <div class="flex items-center gap-1.5 border-t px-2 py-1">
       <Button
         class="flex-1"
         variant="outline"
         on:click={() => {
           value = today(getLocalTimeZone()).toString()
-          open = false
+          onChange()
         }}>Today</Button
       >
       <Button
@@ -85,11 +107,13 @@
         variant="outline"
         on:click={() => {
           if (value) {
-            value = undefined
+            value = null
           }
           open = false
-        }}>Clear</Button
+        }}
       >
+        Clear
+      </Button>
     </div>
   </Popover.Content>
 </Popover.Root>
diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte
index 1ccab299e..955581cad 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
-  import { parseAbsolute, type DateValue, getLocalTimeZone } from "@internationalized/date"
+  import { parseAbsolute, getLocalTimeZone } from "@internationalized/date"
   import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js"
   import * as Popover from "$lib/components/ui/popover/index.js"
   import { isString } from "radash"
   import { isDate } from "date-fns"
   import { DateRangeField } from "@undb/table"
-  import { createMutation } from "@tanstack/svelte-query"
-  import { toast } from "svelte-sonner"
-  import { trpc } from "$lib/trpc/client.js"
   import { cn } from "$lib/utils.js"
   import Button from "$lib/components/ui/button/button.svelte"
+  import TimePicker from "$lib/components/blocks/date/time-picker.svelte"
+
+  type Value = [string | Date | null | undefined, string | Date | null | undefined] | undefined | null
 
   export let readonly = false
   export let disabled = false
   export let tableId: string
   export let recordId: string
-  export let value: [string | Date | null | undefined, string | Date | null | undefined] | undefined = undefined
+  export let value: Value = undefined
+
+  $: startDate = value?.[0]
+  $: endDate = value?.[1]
 
   function parse(value: string) {
     try {
@@ -35,11 +38,10 @@
   }
 
   export let field: DateRangeField
-  let formatter = field.formatter
+  $: formatter = field.formatter
+  $: includeTime = field.includeTime
 
-  export let onValueChange:
-    | ((value: [string | Date | null | undefined, string | Date | null | undefined] | undefined) => void)
-    | undefined
+  export let onValueChange: (value: Value) => void | undefined
 
   let open = false
 </script>
@@ -82,19 +84,66 @@
         initialFocus
         numberOfMonths={2}
       />
+      {#if includeTime}
+        <div class="flex items-center gap-2 p-2 pt-0">
+          <div class="flex-1">
+            <TimePicker
+              disabled={!startDate}
+              value={{
+                hour: startDate ? new Date(startDate).getHours() : 0,
+                minute: startDate ? new Date(startDate).getMinutes() : 0,
+              }}
+              onValueChange={(v) => {
+                if (!startDate) return
+                startDate = new Date(new Date(startDate).setHours(v.hour, v.minute, 0, 0)).toISOString()
+                value = [startDate, endDate]
+                onValueChange?.(value)
+              }}
+            />
+          </div>
+          <div class="flex-1">
+            <TimePicker
+              disabled={!endDate}
+              value={{
+                hour: endDate ? new Date(endDate).getHours() : 0,
+                minute: endDate ? new Date(endDate).getMinutes() : 0,
+              }}
+              onValueChange={(v) => {
+                if (!endDate) return
+                endDate = new Date(new Date(endDate).setHours(v.hour, v.minute, 0, 0)).toISOString()
+                value = [startDate, endDate]
+                onValueChange?.(value)
+              }}
+            />
+          </div>
+        </div>
+      {/if}
 
       <div class="border-t p-2">
         <Button
           variant="outline"
           class="w-full"
           on:click={() => {
-            value = undefined
-            onValueChange?.(value)
+            value = null
+            onValueChange?.(null)
+            open = false
           }}
         >
           Clear
         </Button>
       </div>
+      {#if includeTime}
+        <div class="border-t p-2">
+          <Button
+            class="w-full"
+            on:click={() => {
+              open = false
+            }}
+          >
+            Set Date Range
+          </Button>
+        </div>
+      {/if}
     </Popover.Content>
   </Popover.Root>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte b/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte
index 714924ed2..0c374188b 100644
--- a/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte
@@ -63,6 +63,8 @@
     formula: SquareFunctionIcon,
     dateRange: CalendarRangeIcon,
   }
+
+  $: component = map[type]
 </script>
 
-<svelte:component this={map[type]} {...$$restProps} />
+<svelte:component this={component} {...$$restProps} />
diff --git a/apps/frontend/src/lib/components/blocks/field-options/date-field-option.svelte b/apps/frontend/src/lib/components/blocks/field-options/date-field-option.svelte
index 567bf2f1a..7f5efc311 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/date-field-option.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/date-field-option.svelte
@@ -2,7 +2,12 @@
   import { Checkbox } from "$lib/components/ui/checkbox"
   import { Label } from "$lib/components/ui/label/index.js"
   import { Separator } from "$lib/components/ui/separator"
-  import { isDateFieldMacro, type IDateFieldConstraint } from "@undb/table"
+  import {
+    DEFAULT_DATE_FIELD_OPTION,
+    type IDateFieldOption,
+    isDateFieldMacro,
+    type IDateFieldConstraint,
+  } from "@undb/table"
   import * as Popover from "$lib/components/ui/popover"
   import { Button } from "$lib/components/ui/button"
   import { cn } from "$lib/utils"
@@ -12,6 +17,9 @@
   import { Calendar } from "$lib/components/ui/calendar"
   import DateMacroPicker from "../date/date-macro-picker.svelte"
   import DateMacro from "../date/date-macro.svelte"
+  import DateFormatterPicker from "../date/date-formatter-picker.svelte"
+  import TimeFormatterPicker from "../date/time-formatter-picker.svelte"
+  import { Switch } from "$lib/components/ui/switch"
 
   const df = new DateFormatter("en-US", {
     dateStyle: "long",
@@ -22,6 +30,7 @@
   export let defaultValue: string | Date | undefined
   export let placeholder: string | undefined = "Default value..."
   export let disabled: boolean | undefined
+  export let option: IDateFieldOption = DEFAULT_DATE_FIELD_OPTION
 
   function parse(value: string) {
     try {
@@ -94,6 +103,24 @@
       </Popover.Content>
     </Popover.Root>
   </div>
+
+  <div>
+    <Label for="format" class="text-xs font-normal">Date Format</Label>
+    <DateFormatterPicker id="format" bind:value={option.format} />
+  </div>
+
+  <div class="inline-flex items-center gap-2">
+    <Switch size="sm" id="includeTime" bind:checked={option.includeTime} />
+    <Label for="includeTime" class="text-xs font-normal">Include Time</Label>
+  </div>
+
+  {#if option.includeTime}
+    <div>
+      <Label for="timeFormat" class="text-xs font-normal">Time Format</Label>
+      <TimeFormatterPicker id="timeFormat" bind:value={option.timeFormat} />
+    </div>
+  {/if}
+
   {#if constraint}
     <div class="pt-2">
       <Separator />
diff --git a/apps/frontend/src/lib/components/blocks/field-options/date-range-field-option.svelte b/apps/frontend/src/lib/components/blocks/field-options/date-range-field-option.svelte
index bcbd62e66..85d7363e3 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/date-range-field-option.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/date-range-field-option.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import { Checkbox } from "$lib/components/ui/checkbox"
-  import NumberInput from "$lib/components/ui/input/number-input.svelte"
   import { Label } from "$lib/components/ui/label/index.js"
   import { Separator } from "$lib/components/ui/separator"
-  import type { IDateFieldConstraint, INumberFieldConstraint } from "@undb/table"
+  import {
+    DEFAULT_DATE_RANGE_FIELD_OPTION,
+    type IDateRangeFieldConstraint,
+    type IDateRangeFieldOption,
+  } from "@undb/table"
   import * as Popover from "$lib/components/ui/popover"
   import { Button } from "$lib/components/ui/button"
   import { cn } from "$lib/utils"
@@ -11,16 +14,20 @@
   import { DateFormatter, getLocalTimeZone, parseAbsolute } from "@internationalized/date"
   import { isDate, isString } from "radash"
   import { RangeCalendar } from "$lib/components/ui/range-calendar"
+  import DateFormatterPicker from "../date/date-formatter-picker.svelte"
+  import TimeFormatterPicker from "../date/time-formatter-picker.svelte"
+  import { Switch } from "$lib/components/ui/switch"
 
   const df = new DateFormatter("en-US", {
     dateStyle: "long",
   })
 
-  export let constraint: IDateFieldConstraint | undefined
+  export let constraint: IDateRangeFieldConstraint | undefined
   export let display: boolean | undefined
   export let defaultValue: [string | Date | null | undefined, string | Date | null | undefined] | undefined = undefined
   export let placeholder: string | undefined = "Default value..."
   export let disabled: boolean | undefined
+  export let option: IDateRangeFieldOption = DEFAULT_DATE_RANGE_FIELD_OPTION
 
   function parse(value: string) {
     try {
@@ -91,6 +98,22 @@
       </Popover.Content>
     </Popover.Root>
   </div>
+  <div>
+    <Label for="format" class="text-xs font-normal">Date Format</Label>
+    <DateFormatterPicker id="format" bind:value={option.format} />
+  </div>
+
+  <div class="inline-flex items-center gap-2">
+    <Switch size="sm" id="includeTime" bind:checked={option.includeTime} />
+    <Label for="includeTime" class="text-xs font-normal">Include Time</Label>
+  </div>
+
+  {#if option.includeTime}
+    <div>
+      <Label for="timeFormat" class="text-xs font-normal">Time Format</Label>
+      <TimeFormatterPicker id="timeFormat" bind:value={option.timeFormat} />
+    </div>
+  {/if}
   {#if constraint}
     <div class="pt-2">
       <Separator />
diff --git a/apps/frontend/src/lib/components/blocks/field-options/field-options.svelte b/apps/frontend/src/lib/components/blocks/field-options/field-options.svelte
index 6fe108338..c9dc08376 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/field-options.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/field-options.svelte
@@ -29,6 +29,8 @@
   export let isNew = true
   export let field: Field | undefined = undefined
   export let disabled = false
+  export let type: NoneSystemFieldType
+
 
   const map: Record<NoneSystemFieldType, ComponentType> = {
     string: StringFieldOption,
@@ -53,11 +55,11 @@
     dateRange: DateRangeFieldOption,
   }
 
-  export let type: NoneSystemFieldType
+  $: component = map[type]
 </script>
 
 <svelte:component
-  this={map[type]}
+  this={component}
   {disabled}
   bind:constraint
   bind:display
diff --git a/apps/frontend/src/lib/components/blocks/field-value/date-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/date-field.svelte
index ca4a078ab..734f55537 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/date-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/date-field.svelte
@@ -6,7 +6,7 @@
   export let placeholder: string | undefined = undefined
 
   export let field: DateField | CreatedAtField | UpdatedAtField
-  let formatter = field.formatter
+  $: formatter = field.formatter
 
   $: formattedValue = value ? formatter(value) : ""
   $: displayValue = formattedValue ?? placeholder ?? ""
diff --git a/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte
index eef4c33ab..6fad1bb30 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte
@@ -6,7 +6,7 @@
   export let placeholder: string | undefined = undefined
 
   export let field: DateField | CreatedAtField | UpdatedAtField
-  let formatter = field.formatter
+  $: formatter = field.formatter
 </script>
 
 <div class={cn("text-sm", $$restProps.class)}>
diff --git a/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte b/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
index dc52c1af1..fc35c8aa7 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
@@ -61,10 +61,12 @@
     button: ButtonControl,
     dateRange: DateRangeField,
   }
+
+  $: component = map[type]
 </script>
 
 <svelte:component
-  this={map[type]}
+  this={component}
   {tableId}
   {recordId}
   {...$$restProps}
diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte
index c29e1d454..ad018831b 100644
--- a/apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte
+++ b/apps/frontend/src/lib/components/blocks/filters-editor/filter-input.svelte
@@ -328,11 +328,12 @@
     percentage,
     dateRange,
   }
+
+  $: component = filterFieldInput[field?.type]?.[op]
 </script>
 
 {#if field && op}
-  {@const c = filterFieldInput[field.type]?.[op]}
-  {#if c}
-    <svelte:component this={c} {disabled} bind:value class={className} {field} />
+  {#if component}
+    <svelte:component this={component} {disabled} bind:value class={className} {field} />
   {/if}
 {/if}
diff --git a/apps/frontend/src/lib/components/blocks/filters-editor/op-picker.svelte b/apps/frontend/src/lib/components/blocks/filters-editor/op-picker.svelte
index c41383ff4..136a6685e 100644
--- a/apps/frontend/src/lib/components/blocks/filters-editor/op-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/filters-editor/op-picker.svelte
@@ -39,7 +39,7 @@
       class={cn("justify-between", "rounded-r-none", $$restProps.class)}
       {...$$restProps}
     >
-      <span class="overflow-hidden text-ellipsis" title={selectedValue}>
+      <span class="overflow-hidden text-ellipsis text-xs text-gray-700" title={selectedValue}>
         {selectedValue ?? "op..."}
       </span>
       <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -52,6 +52,7 @@
       <Command.Group>
         {#each ops as framework}
           <Command.Item
+            class="text-xs text-gray-700"
             value={framework.value}
             onSelect={(currentValue) => {
               value = currentValue
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
index 239f56d66..9ca8e9591 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
@@ -8,6 +8,7 @@
   import * as Popover from "$lib/components/ui/popover"
   import { isString, isDate } from "radash"
   import { Button } from "$lib/components/ui/button"
+  import TimePicker from "$lib/components/blocks/date/time-picker.svelte"
 
   export let tableId: string
   export let field: DateField
@@ -19,12 +20,24 @@
       return undefined
     }
   }
-  let formatter = field.formatter
+  $: formatter = field.formatter
+  $: includeTime = field.includeTime
   $: internalDate = isString(value) ? parse(value) : isDate(value) ? parse(value.toISOString()) : undefined
   export let recordId: string
   export let isEditing: boolean
   export let onValueChange = (value: string | undefined) => {}
 
+  $: shouldConfirm = includeTime && value
+
+  function save(value: string | Date | null) {
+    $updateCell.mutate({
+      tableId,
+      id: recordId,
+      values: { [field.id.value]: value },
+    })
+    open = false
+  }
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
     mutationFn: trpc.record.update.mutate,
@@ -67,13 +80,29 @@
               value = undefined
             }
             onValueChange(value)
-            $updateCell.mutate({
-              tableId,
-              id: recordId,
-              values: { [field.id.value]: value },
-            })
+            if (!shouldConfirm) {
+              save(value)
+            }
           }}
         />
+        {#if includeTime}
+          <div class="px-2 pb-2">
+            <TimePicker
+              value={{
+                hour: value ? new Date(value).getHours() : 0,
+                minute: value ? new Date(value).getMinutes() : 0,
+              }}
+              onValueChange={(v) => {
+                if (!value) return
+                value = new Date(new Date(value).setHours(v.hour, v.minute, 0, 0)).toISOString()
+                onValueChange(value)
+                if (!shouldConfirm) {
+                  save(value)
+                }
+              }}
+            />
+          </div>
+        {/if}
         <div class="flex items-center gap-1.5 border-t px-2 py-1">
           <Button
             class="flex-1"
@@ -81,31 +110,33 @@
             on:click={() => {
               value = today(getLocalTimeZone()).toString()
               onValueChange(value)
-              $updateCell.mutate({
-                tableId,
-                id: recordId,
-                values: { [field.id.value]: value },
-              })
-              open = false
+              save(value)
             }}>Today</Button
           >
-          <Button
-            class="flex-1"
-            variant="outline"
-            on:click={() => {
-              if (value) {
-                value = undefined
-                onValueChange(value)
-                $updateCell.mutate({
-                  tableId,
-                  id: recordId,
-                  values: { [field.id.value]: value },
-                })
-              }
-              open = false
-            }}>Clear</Button
-          >
+          {#if !field.required}
+            <Button
+              class="flex-1"
+              variant="outline"
+              on:click={() => {
+                if (value) {
+                  value = undefined
+                  onValueChange(value)
+                  save(null)
+                }
+              }}>Clear</Button
+            >
+          {/if}
         </div>
+        {#if shouldConfirm}
+          <div class="flex items-center gap-1.5 border-t px-2 py-1">
+            <Button
+              class="w-full"
+              on:click={() => {
+                save(value ?? null)
+              }}>Save</Button
+            >
+          </div>
+        {/if}
       </Popover.Content>
     </Popover.Root>
   {:else if value}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
index 1901a0c52..a9621c2a0 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { parseAbsolute, type DateValue, getLocalTimeZone } from "@internationalized/date"
+  import { parseAbsolute, getLocalTimeZone } from "@internationalized/date"
   import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js"
   import * as Popover from "$lib/components/ui/popover/index.js"
   import { isString } from "radash"
@@ -9,10 +9,16 @@
   import { toast } from "svelte-sonner"
   import { trpc } from "$lib/trpc/client.js"
   import Button from "$lib/components/ui/button/button.svelte"
+  import TimePicker from "$lib/components/blocks/date/time-picker.svelte"
+
+  type Value = [string | Date | null | undefined, string | Date | null | undefined] | undefined
 
   export let tableId: string
   export let recordId: string
-  export let value: [string | Date | null | undefined, string | Date | null | undefined] | undefined = undefined
+  export let value: Value = undefined
+
+  $: startDate = value?.[0]
+  $: endDate = value?.[1]
 
   function parse(value: string) {
     try {
@@ -34,11 +40,10 @@
   export let field: DateRangeField
   export let isEditing = false
   export let isSelected = false
-  let formatter = field.formatter
+  $: formatter = field.formatter
+  $: includeTime = field.includeTime
 
-  export let onValueChange: (
-    value: [string | Date | null | undefined, string | Date | null | undefined] | undefined,
-  ) => void
+  export let onValueChange: (value: Value) => void
 
   let open = false
   $: if (isEditing) {
@@ -55,21 +60,32 @@
       toast.error(error.message)
     },
   })
+
+  function save(value: Value) {
+    $updateCell.mutate({
+      tableId,
+      id: recordId,
+      values: { [field.id.value]: value },
+    })
+    open = false
+  }
 </script>
 
 <div class={$$restProps.class}>
   {#if isEditing}
     <Popover.Root openFocus bind:open>
-      <Popover.Trigger class="h-full w-full text-left outline-none ring-0">
-        {#if internalValue && internalValue.start}
-          {#if internalValue.end}
-            {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
-          {:else}
-            {formatter(internalValue.start.toDate())}
+      <Popover.Trigger class="h-full w-full overflow-hidden text-left outline-none ring-0">
+        <span class="flex w-full items-center truncate">
+          {#if internalValue && internalValue.start}
+            {#if internalValue.end}
+              {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
+            {:else}
+              {formatter(internalValue.start.toDate())}
+            {/if}
+          {:else if value?.[0]}
+            {formatter(new Date(value[0]))}
           {/if}
-        {:else if value?.[0]}
-          {formatter(new Date(value[0]))}
-        {/if}
+        </span>
       </Popover.Trigger>
       <Popover.Content class="w-auto p-0">
         <RangeCalendar
@@ -83,11 +99,9 @@
             value = [startDate, endDate]
             onValueChange(value)
             if (startDate && endDate) {
-              $updateCell.mutate({
-                tableId,
-                id: recordId,
-                values: { [field.id.value]: value },
-              })
+              if (!includeTime) {
+                save(value)
+              }
             }
           }}
           value={internalValue}
@@ -95,6 +109,40 @@
           initialFocus
           numberOfMonths={2}
         />
+        {#if includeTime}
+          <div class="flex items-center gap-2 p-2 pt-0">
+            <div class="flex-1">
+              <TimePicker
+                disabled={!startDate}
+                value={{
+                  hour: startDate ? new Date(startDate).getHours() : 0,
+                  minute: startDate ? new Date(startDate).getMinutes() : 0,
+                }}
+                onValueChange={(v) => {
+                  if (!startDate) return
+                  startDate = new Date(new Date(startDate).setHours(v.hour, v.minute, 0, 0)).toISOString()
+                  value = [startDate, endDate]
+                  onValueChange(value)
+                }}
+              />
+            </div>
+            <div class="flex-1">
+              <TimePicker
+                disabled={!endDate}
+                value={{
+                  hour: endDate ? new Date(endDate).getHours() : 0,
+                  minute: endDate ? new Date(endDate).getMinutes() : 0,
+                }}
+                onValueChange={(v) => {
+                  if (!endDate) return
+                  endDate = new Date(new Date(endDate).setHours(v.hour, v.minute, 0, 0)).toISOString()
+                  value = [startDate, endDate]
+                  onValueChange(value)
+                }}
+              />
+            </div>
+          </div>
+        {/if}
 
         <div class="border-t p-2">
           <Button
@@ -106,22 +154,39 @@
               $updateCell.mutate({
                 tableId,
                 id: recordId,
-                values: { [field.id.value]: value },
+                values: { [field.id.value]: null },
               })
+              open = false
             }}
           >
             Clear
           </Button>
         </div>
+        {#if includeTime}
+          <div class="border-t p-2">
+            <Button
+              class="w-full"
+              on:click={() => {
+                save(value)
+              }}
+            >
+              Save
+            </Button>
+          </div>
+        {/if}
       </Popover.Content>
     </Popover.Root>
-  {:else if internalValue && internalValue.start}
-    {#if internalValue.end}
-      {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
-    {:else}
-      {formatter(internalValue.start.toDate())}
-    {/if}
-  {:else if value?.[0]}
-    {formatter(new Date(value[0]))}
+  {:else}
+    <span class="flex w-full items-center truncate">
+      {#if internalValue && internalValue.start}
+        {#if internalValue.end}
+          {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
+        {:else}
+          {formatter(internalValue.start.toDate())}
+        {/if}
+      {:else if value?.[0]}
+        {formatter(new Date(value[0]))}
+      {/if}
+    </span>
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
index afa36639e..0248b7a21 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
@@ -74,10 +74,12 @@
     formula: FormulaCell,
     dateRange: DateRangeCell,
   }
+
+  $: component = map[field.type]
 </script>
 
 <svelte:component
-  this={map[field.type]}
+  this={component}
   bind:value
   {displayValue}
   {field}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view.util.ts b/apps/frontend/src/lib/components/blocks/grid-view/grid-view.util.ts
index c1ab31512..cf56c59e1 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view.util.ts
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view.util.ts
@@ -3,22 +3,22 @@ import type { IColors } from "@undb/table"
 export function getBgColor(color: IColors): string {
   const map: Record<IColors, string> = {
     black: "bg-black",
-    red: "bg-red-200/70",
-    green: "bg-green-200/70",
-    blue: "bg-blue-200/70",
-    yellow: "bg-yellow-200/70",
-    purple: "bg-purple-200/70",
-    gray: "bg-gray-200/70",
-    orange: "bg-orange-200/70",
-    pink: "bg-pink-200/70",
-    cyan: "bg-cyan-200/70",
-    teal: "bg-teal-200/70",
-    indigo: "bg-indigo-200/70",
-    lime: "bg-lime-200/70",
-    emerald: "bg-emerald-200/70",
-    sky: "bg-sky-200/70",
-    violet: "bg-violet-200/70",
-    rose: "bg-rose-200/70",
+    red: "bg-red-300/70",
+    green: "bg-green-300/70",
+    blue: "bg-blue-300/70",
+    yellow: "bg-yellow-300/70",
+    purple: "bg-purple-300/70",
+    gray: "bg-gray-300/70",
+    orange: "bg-orange-300/70",
+    pink: "bg-pink-300/70",
+    cyan: "bg-cyan-300/70",
+    teal: "bg-teal-300/70",
+    indigo: "bg-indigo-300/70",
+    lime: "bg-lime-300/70",
+    emerald: "bg-emerald-300/70",
+    sky: "bg-sky-300/70",
+    violet: "bg-violet-300/70",
+    rose: "bg-rose-300/70",
   }
   return map[color]
 }
@@ -26,22 +26,22 @@ export function getBgColor(color: IColors): string {
 export function getTextColor(color: IColors): string {
   const map: Record<IColors, string> = {
     black: "text-white",
-    red: "text-red-700",
-    green: "text-green-700",
-    blue: "text-blue-700",
-    yellow: "text-yellow-700",
-    purple: "text-purple-700",
-    gray: "text-gray-700",
-    orange: "text-orange-700",
-    pink: "text-pink-700",
-    cyan: "text-cyan-700",
-    teal: "text-teal-700",
-    indigo: "text-indigo-700",
-    lime: "text-lime-700",
-    emerald: "text-emerald-700",
-    sky: "text-sky-700",
-    violet: "text-violet-700",
-    rose: "text-rose-700",
+    red: "text-red-800",
+    green: "text-green-800",
+    blue: "text-blue-800",
+    yellow: "text-yellow-800",
+    purple: "text-purple-800",
+    gray: "text-gray-800",
+    orange: "text-orange-800",
+    pink: "text-pink-800",
+    cyan: "text-cyan-800",
+    teal: "text-teal-800",
+    indigo: "text-indigo-800",
+    lime: "text-lime-800",
+    emerald: "text-emerald-800",
+    sky: "text-sky-800",
+    violet: "text-violet-800",
+    rose: "text-rose-800",
   }
   return map[color]
 }
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
index caee90faf..9794295c2 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
@@ -125,7 +125,7 @@
   const updateRecord = createMutation({
     mutationFn: trpc.record.update.mutate,
     onSuccess: (data, variables, context) => {
-      recordsStore.invalidateRecord($table, variables.id)
+      recordsStore?.invalidateRecord($table, variables.id)
     },
   })
 
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index a9cb506a2..7c401d884 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -52,7 +52,7 @@
       onSuccess()
       await client.invalidateQueries({ queryKey: [record.id.value, "get"] })
       reset({})
-      await recordsStore.invalidateRecord($table, record.id.value)
+      await recordsStore?.invalidateRecord($table, record.id.value)
     },
     onError: (error) => {
       toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
index 7bbc9b1ba..15d18ca19 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
@@ -51,6 +51,7 @@
           trpc.record.list.query({
             tableId: $table.id.value,
             q: $q || undefined,
+            ignoreView: true,
             filters: $selected?.length
               ? {
                   conjunction: "and",
diff --git a/apps/frontend/src/lib/components/blocks/template/template-header.svelte b/apps/frontend/src/lib/components/blocks/template/template-header.svelte
index 55b94d471..02df5bcdd 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-header.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-header.svelte
@@ -54,7 +54,7 @@
     defaults(
       {
         id: template.id,
-        includeData: true,
+        includeData: false,
         spaceId: me?.member?.spaceId,
       },
       zodClient(createFromTemplateCommand),
diff --git a/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte b/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
index bf64b35b7..03020ef58 100644
--- a/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
@@ -60,6 +60,7 @@
       variant={count || open ? "secondary" : "ghost"}
       builders={[builder]}
       size="sm"
+      {...$$restProps}
     >
       <PaintBucketIcon class="mr-2 h-4 w-4" />
       Color
diff --git a/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte b/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
index 7668cb25b..306d64184 100644
--- a/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
@@ -84,7 +84,7 @@
       bind:value={$value}
       table={$table}
       on:submit={(e) => handleSubmit(e.detail)}
-      filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
+      filter={(field) => getIsFilterableFieldType(field.type)}
     >
       <Button
         size="sm"
diff --git a/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte b/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte
index 5c9636d2a..a9ccf0970 100644
--- a/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte
@@ -100,13 +100,13 @@
               bind:value={$formData.type}
               onValueChange={(type) => {
                 if (type === "calendar") {
-                  const field = $table.schema.getCalendarFields().at(0)?.id.value
+                  const field = $table?.schema.getCalendarFields().at(0)?.id.value
                   formData.update((f) => ({ ...f, calendar: { field } }))
                 } else if (type === "gallery") {
-                  const field = $table.schema.getGalleryFields().at(0)?.id.value
+                  const field = $table?.schema.getGalleryFields().at(0)?.id.value
                   formData.update((f) => ({ ...f, gallery: { field } }))
                 } else if (type === "kanban") {
-                  const field = $table.schema.getKanbanFields().at(0)?.id.value
+                  const field = $table?.schema.getKanbanFields().at(0)?.id.value
                   formData.update((f) => ({ ...f, kanban: { field } }))
                 }
               }}
diff --git a/apps/frontend/src/lib/components/blocks/view/view-icon.svelte b/apps/frontend/src/lib/components/blocks/view/view-icon.svelte
index 8dd5c3732..f800fed1e 100644
--- a/apps/frontend/src/lib/components/blocks/view/view-icon.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/view-icon.svelte
@@ -20,6 +20,8 @@
     calendar: CalendarIcon,
     pivot: PanelsTopLeftIcon,
   }
+
+  $: component = map[type]
 </script>
 
-<svelte:component this={map[type]} {...$$restProps} />
+<svelte:component this={component} {...$$restProps} />
diff --git a/apps/frontend/src/lib/components/blocks/widget/add-dashboard-widget.svelte b/apps/frontend/src/lib/components/blocks/widget/add-dashboard-widget.svelte
index 72e769225..46ea9d93b 100644
--- a/apps/frontend/src/lib/components/blocks/widget/add-dashboard-widget.svelte
+++ b/apps/frontend/src/lib/components/blocks/widget/add-dashboard-widget.svelte
@@ -74,7 +74,7 @@
     mutationFn: trpc.dashboard.widget.add.mutate,
     async onSuccess(data) {
       onSuccess()
-      await invalidate(`dashboard:${$dashboard.id.value}`)
+      await invalidate(`undb:dashboard:${$dashboard.id.value}`)
     },
     onError(error, variables, context) {
       toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/widget/widget.svelte b/apps/frontend/src/lib/components/blocks/widget/widget.svelte
index 86d5c8c78..748588ccf 100644
--- a/apps/frontend/src/lib/components/blocks/widget/widget.svelte
+++ b/apps/frontend/src/lib/components/blocks/widget/widget.svelte
@@ -58,7 +58,7 @@
     onSuccess: async () => {
       confirmDelete = false
       if ($isDashboard) {
-        await invalidate(`dashboard:${$dashboard.id.value}`)
+        await invalidate(`undb:dashboard:${$dashboard.id.value}`)
       }
     },
     onError(error, variables, context) {
@@ -74,7 +74,7 @@
     enabled: !shareId,
     onSuccess: async () => {
       if ($isDashboard) {
-        await invalidate(`dashboard:${$dashboard.id.value}`)
+        await invalidate(`undb:dashboard:${$dashboard.id.value}`)
       }
     },
     onError(error, variables, context) {
diff --git a/apps/frontend/src/lib/store/calendar.store.ts b/apps/frontend/src/lib/store/calendar.store.ts
index 3ef444140..fc267d8b6 100644
--- a/apps/frontend/src/lib/store/calendar.store.ts
+++ b/apps/frontend/src/lib/store/calendar.store.ts
@@ -1,3 +1,4 @@
+import { Scope } from "@undb/table"
 import {
   addDays,
   addMonths,
@@ -5,6 +6,7 @@ import {
   eachDayOfInterval,
   endOfDay,
   endOfMonth,
+  endOfWeek,
   getMonth,
   getYear,
   isSameDay,
@@ -18,21 +20,18 @@ import {
 import { persisted } from "svelte-persisted-store"
 import { derived, Writable, writable } from "svelte/store"
 
-export type MonthScope = "selectedDate" | "withoutDate" | "thisMonth" | "allRecords"
-
 interface CalendarState {
-  currentDate: Date
-  selectedDate?: Date
+  selectedDate: Date
   dates: Date[]
-  scope: Writable<MonthScope>
+  weekDates: Date[]
+  scope: Writable<Scope>
 
   isDragging: boolean
 }
 
-export const createCalendarMonthStore = () => {
-  const generateDates = (date: Date): Date[] => {
+export const createCalendarStore = () => {
+  const generateDatesInMonth = (date: Date): Date[] => {
     const monthStart = startOfMonth(date)
-    const monthEnd = endOfMonth(date)
     const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 })
 
     // 生成 35 天的日期数组 (5x7)
@@ -42,18 +41,27 @@ export const createCalendarMonthStore = () => {
     })
   }
 
+  const generateWeekDates = (date: Date): Date[] => {
+    const weekStart = startOfWeek(date, { weekStartsOn: 1 })
+    const weekEnd = endOfWeek(date, { weekStartsOn: 1 })
+    return eachDayOfInterval({
+      start: weekStart,
+      end: weekEnd,
+    })
+  }
+
   const now = new Date()
   const { subscribe, set, update } = writable<CalendarState>({
-    currentDate: now,
     selectedDate: now,
-    dates: generateDates(now),
+    dates: generateDatesInMonth(now),
+    weekDates: generateWeekDates(now),
     scope: persisted("calendar-scope", "thisMonth"),
     isDragging: false,
   })
 
   const store = {
     subscribe,
-    setScope: (scope: MonthScope) => {
+    setScope: (scope: Scope) => {
       update((state) => {
         state.scope.update((s) => scope)
         return state
@@ -69,51 +77,74 @@ export const createCalendarMonthStore = () => {
       const targetDate = new Date(date)
       update((state) => ({
         ...state,
-        currentDate: targetDate,
-        dates: generateDates(targetDate),
+        selectedDate: targetDate,
+        dates: generateDatesInMonth(targetDate),
+        weekDates: generateWeekDates(targetDate),
       }))
     },
+    nextDay: () => {
+      update((state) => {
+        const nextDate = addDays(state.selectedDate, 1)
+        return {
+          ...state,
+          selectedDate: nextDate,
+          dates: generateDatesInMonth(nextDate),
+          weekDates: generateWeekDates(nextDate),
+        }
+      })
+    },
+    prevDay: () => {
+      update((state) => {
+        const prevDate = addDays(state.selectedDate, -1)
+        return {
+          ...state,
+          selectedDate: prevDate,
+          dates: generateDatesInMonth(prevDate),
+          weekDates: generateWeekDates(prevDate),
+        }
+      })
+    },
     nextMonth: () => {
       update((state) => {
-        const nextDate = addMonths(state.currentDate, 1)
+        const nextDate = addMonths(state.selectedDate, 1)
         return {
           ...state,
-          currentDate: nextDate,
-          dates: generateDates(nextDate),
           selectedDate: nextDate,
+          dates: generateDatesInMonth(nextDate),
+          weekDates: generateWeekDates(nextDate),
         }
       })
     },
     prevMonth: () => {
       update((state) => {
-        const prevDate = subMonths(state.currentDate, 1)
+        const prevDate = subMonths(state.selectedDate, 1)
         return {
           ...state,
-          currentDate: prevDate,
-          dates: generateDates(prevDate),
           selectedDate: prevDate,
+          dates: generateDatesInMonth(prevDate),
+          weekDates: generateWeekDates(prevDate),
         }
       })
     },
     prevYear: () => {
       update((state) => {
-        const prevDate = subYears(state.currentDate, 1)
+        const prevDate = subYears(state.selectedDate, 1)
         return {
           ...state,
-          currentDate: prevDate,
-          dates: generateDates(prevDate),
           selectedDate: prevDate,
+          dates: generateDatesInMonth(prevDate),
+          weekDates: generateWeekDates(prevDate),
         }
       })
     },
     nextYear: () => {
       update((state) => {
-        const nextDate = addYears(state.currentDate, 1)
+        const nextDate = addYears(state.selectedDate, 1)
         return {
           ...state,
-          currentDate: nextDate,
-          dates: generateDates(nextDate),
           selectedDate: nextDate,
+          dates: generateDatesInMonth(nextDate),
+          weekDates: generateWeekDates(nextDate),
         }
       })
     },
@@ -121,9 +152,9 @@ export const createCalendarMonthStore = () => {
       const today = new Date()
       update((state) => ({
         ...state,
-        currentDate: today,
-        dates: generateDates(today),
         selectedDate: today,
+        dates: generateDatesInMonth(today),
+        weekDates: generateWeekDates(today),
       }))
     },
     setIsDragging: (isDragging: boolean) => {
@@ -132,6 +163,34 @@ export const createCalendarMonthStore = () => {
         isDragging,
       }))
     },
+    setSelectedDate: (date: Date) => {
+      update((state) => ({
+        ...state,
+        selectedDate: date,
+      }))
+    },
+    nextWeek: () => {
+      update((state) => {
+        const nextDate = addDays(state.selectedDate, 7)
+        return {
+          ...state,
+          selectedDate: nextDate,
+          dates: generateDatesInMonth(nextDate),
+          weekDates: generateWeekDates(nextDate),
+        }
+      })
+    },
+    prevWeek: () => {
+      update((state) => {
+        const prevDate = addDays(state.selectedDate, -7)
+        return {
+          ...state,
+          selectedDate: prevDate,
+          dates: generateDatesInMonth(prevDate),
+          weekDates: generateWeekDates(prevDate),
+        }
+      })
+    },
   }
 
   // 派生 store：获取最早时间戳
@@ -148,20 +207,40 @@ export const createCalendarMonthStore = () => {
 
   const startOfMonthTimestamp = derived(store, ($calendar) => {
     if ($calendar.dates.length === 0) return null
-    return startOfMonth($calendar.currentDate)
+    return startOfMonth($calendar.selectedDate)
   })
 
   const endOfMonthTimestamp = derived(store, ($calendar) => {
     if ($calendar.dates.length === 0) return null
-    return endOfMonth($calendar.currentDate)
+    return endOfMonth($calendar.selectedDate)
+  })
+
+  const startOfDayTimestamp = derived(store, ($calendar) => {
+    if (!$calendar.selectedDate) return null
+    return startOfDay($calendar.selectedDate)
+  })
+
+  const endOfDayTimestamp = derived(store, ($calendar) => {
+    if (!$calendar.selectedDate) return null
+    return endOfDay($calendar.selectedDate)
+  })
+
+  const startOfWeekTimestamp = derived(store, ($calendar) => {
+    if (!$calendar.selectedDate) return null
+    return startOfWeek($calendar.selectedDate, { weekStartsOn: 1 })
+  })
+
+  const endOfWeekTimestamp = derived(store, ($calendar) => {
+    if (!$calendar.selectedDate) return null
+    return endOfWeek($calendar.selectedDate, { weekStartsOn: 1 })
   })
 
   const currentYear = derived(store, ($calendar) => {
-    return getYear($calendar.currentDate)
+    return getYear($calendar.selectedDate)
   })
 
   const currentMonth = derived(store, ($calendar) => {
-    return getMonth($calendar.currentDate) + 1
+    return getMonth($calendar.selectedDate) + 1
   })
 
   const isSelected = derived(
@@ -170,20 +249,38 @@ export const createCalendarMonthStore = () => {
   )
 
   const getIsSameMonth = derived(store, ($calendar) => (date: Date) => {
-    return isSameMonth(date, $calendar.currentDate)
+    return isSameMonth(date, $calendar.selectedDate)
   })
 
+  const weekStart = derived(store, ($calendar) => startOfWeek($calendar.selectedDate, { weekStartsOn: 1 }))
+
+  const weekEnd = derived(store, ($calendar) => endOfWeek($calendar.selectedDate, { weekStartsOn: 1 }))
+
   return {
     ...store,
     startTimestamp,
     endTimestamp,
     startOfMonthTimestamp,
     endOfMonthTimestamp,
+    startOfDayTimestamp,
+    endOfDayTimestamp,
+    startOfWeekTimestamp,
+    endOfWeekTimestamp,
     currentYear,
     currentMonth,
     isSelected,
     getIsSameMonth,
+    weekStart,
+    weekEnd,
   }
 }
 
-export const monthStore = createCalendarMonthStore()
+export const calendarStore = createCalendarStore()
+
+export const HOURS = Array.from({ length: 24 }, (_, i) => i)
+
+export function formatHour(hour: number) {
+  const ampm = hour >= 12 ? "pm" : "am"
+  const h = hour % 12 || 12
+  return `${h} ${ampm}`
+}
diff --git a/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.gql b/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.gql
index f02a015e0..8d42df68b 100644
--- a/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.gql
+++ b/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.gql
@@ -41,6 +41,7 @@ query GetTableQuery($tableId: ID!, $viewId: ID) {
       }
       calendar {
         field
+        timeScale
       }
       pivot {
         columnLabel
diff --git a/apps/frontend/src/routes/(share)/s/b/[shareId]/+layout.gql b/apps/frontend/src/routes/(share)/s/b/[shareId]/+layout.gql
index 26a5c56f1..5a88ed81c 100644
--- a/apps/frontend/src/routes/(share)/s/b/[shareId]/+layout.gql
+++ b/apps/frontend/src/routes/(share)/s/b/[shareId]/+layout.gql
@@ -40,8 +40,9 @@ query GetShareBaseData($shareId: ID!) {
           field
         }
       calendar {
-        field
-      }
+          field
+          timeScale
+        }
         gallery {
           field
         }
diff --git a/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.gql b/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.gql
index 6f2b75572..658c9f96f 100644
--- a/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.gql
+++ b/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.gql
@@ -45,6 +45,7 @@ query GetBaseTableShareData($shareId: ID!, $tableId: ID!) {
       }
       calendar {
         field
+        timeScale
       }
       widgets {
         id
diff --git a/apps/frontend/src/routes/(share)/s/v/[shareId]/+layout.gql b/apps/frontend/src/routes/(share)/s/v/[shareId]/+layout.gql
index 6e75292cd..a2d636450 100644
--- a/apps/frontend/src/routes/(share)/s/v/[shareId]/+layout.gql
+++ b/apps/frontend/src/routes/(share)/s/v/[shareId]/+layout.gql
@@ -53,6 +53,7 @@ query GetViewShareData($shareId: ID!) {
       }
       calendar {
         field
+        timeScale
       }
       pivot {
         columnLabel
diff --git a/package.json b/package.json
index 669d421e4..a06c0b7e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "undb",
-  "version": "1.0.0-120",
+  "version": "1.0.0-121",
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production bun --bun turbo build",
diff --git a/packages/graphql/src/index.ts b/packages/graphql/src/index.ts
index a1e5548e2..2c1dd3df9 100644
--- a/packages/graphql/src/index.ts
+++ b/packages/graphql/src/index.ts
@@ -179,8 +179,15 @@ export class Graphql {
         field: String
       }
 
+      enum CalendarTimeScale {
+        day
+        week
+        month
+      }
+
       type CalendarOption {
         field: String
+        timeScale: CalendarTimeScale
       }
 
       type PivotOption {
diff --git a/packages/i18n/src/i18n/en/index.ts b/packages/i18n/src/i18n/en/index.ts
index da99bf8ec..63d54bc5a 100644
--- a/packages/i18n/src/i18n/en/index.ts
+++ b/packages/i18n/src/i18n/en/index.ts
@@ -1,46 +1,46 @@
 import type { ISpaceMemberRole } from "@undb/authz"
-import type { FieldType,IFieldAggregate,IFieldMacro,IOpType,IRollupFn,ViewType } from "@undb/table"
+import type { CalendarTimeScale,FieldType,IFieldAggregate,IFieldMacro,IOpType,IRollupFn,ViewType } from "@undb/table"
 import type { BaseTranslation } from "../i18n-types.js"
 
 const ops: Record<IOpType, string> = {
   eq: "=",
   neq: "!=",
-  contains: "contains",
-  does_not_contain: "not contains",
-  starts_with: "starts with",
-  ends_with: "ends with",
-  is_empty: "is empty",
-  is_not_empty: "is not empty",
-  min: "min",
-  max: "max",
+  contains: "Contains",
+  does_not_contain: "Not Contains",
+  starts_with: "Starts With",
+  ends_with: "Ends With",
+  is_empty: "Is Empty",
+  is_not_empty: "Is Not Empty",
+  min: "Min",
+  max: "Max",
   gt: ">",
   gte: ">=",
   lt: "<",
   lte: "<=",
-  in: 'in',
-  nin: 'not in',
-  any_of: 'any of',
-  not_any_of: 'not any of',
-  is_same_day: "is same day",
-  is_not_same_day: "is not same day",
-  is_tody: "is today",
-  is_not_today: "is not today",
-  is_after_today: "is after today",
-  is_before_today: "is before today",
-  is_tomorrow: "is tomorrow",
-  is_not_tomorrow: "is not tomorrow",
-  is_after_tomorrow: "is after tomorrow",
-  is_before_tommorow: "is before tomorrow",
-  is_yesterday: "is yesterday",
-  is_not_yesterday: "is not yesterday",
-  is_after_yesterday: "is after yesterday",
-  is_before_yesterday: "is before yesterday",
-  is_before: "is before",
-  is_not_before: "is not before",
-  is_after: "is after",
-  is_not_after: "is not after",
-  is_true: "is true",
-  is_false: "is false",
+  in: 'In',
+  nin: 'Not In',
+  any_of: 'Any Of',
+  not_any_of: 'Not Any Of',
+  is_same_day: "Is Same Day",
+  is_not_same_day: "Is Not Same Day",
+  is_tody: "Is Today",
+  is_not_today: "Is Not Today",
+  is_after_today: "Is After Today",
+  is_before_today: "Is Before Today",
+  is_tomorrow: "Is Tomorrow",
+  is_not_tomorrow: "Is Not Tomorrow",
+  is_after_tomorrow: "Is After Tomorrow",
+  is_before_tommorow: "Is Before Tomorrow",
+  is_yesterday: "Is Yesterday",
+  is_not_yesterday: "Is Not Yesterday",
+  is_after_yesterday: "Is After Yesterday",
+  is_before_yesterday: "Is Before Yesterday",
+  is_before: "Is Before",
+  is_not_before: "Is Not Before",
+  is_after: "Is After",
+  is_not_after: "Is Not After",
+  is_true: "Is True",
+  is_false: "Is False",
 }
 
 const fieldTypes: Record<FieldType, string> = {
@@ -133,6 +133,13 @@ const widgetTypes: Record<string, string> = {
   table: "Table"
 }
 
+
+const timeScales: Record<CalendarTimeScale, string> = {
+  month: "Month",
+  week: "Week",
+  day: "Day"
+}
+
 const en = {
   table: {
     ops,
@@ -143,6 +150,7 @@ const en = {
     macros,
     viewTypes,
     widgetTypes,
+    timeScales,
   },
 } satisfies BaseTranslation
 
diff --git a/packages/i18n/src/i18n/i18n-types.ts b/packages/i18n/src/i18n/i18n-types.ts
index d348561a6..457eb740e 100644
--- a/packages/i18n/src/i18n/i18n-types.ts
+++ b/packages/i18n/src/i18n/i18n-types.ts
@@ -24,35 +24,35 @@ type RootTranslation = {
 			 */
 			neq: string
 			/**
-			 * c​o​n​t​a​i​n​s
+			 * C​o​n​t​a​i​n​s
 			 */
 			contains: string
 			/**
-			 * n​o​t​ ​c​o​n​t​a​i​n​s
+			 * N​o​t​ ​C​o​n​t​a​i​n​s
 			 */
 			does_not_contain: string
 			/**
-			 * s​t​a​r​t​s​ ​w​i​t​h
+			 * S​t​a​r​t​s​ ​W​i​t​h
 			 */
 			starts_with: string
 			/**
-			 * e​n​d​s​ ​w​i​t​h
+			 * E​n​d​s​ ​W​i​t​h
 			 */
 			ends_with: string
 			/**
-			 * i​s​ ​e​m​p​t​y
+			 * I​s​ ​E​m​p​t​y
 			 */
 			is_empty: string
 			/**
-			 * i​s​ ​n​o​t​ ​e​m​p​t​y
+			 * I​s​ ​N​o​t​ ​E​m​p​t​y
 			 */
 			is_not_empty: string
 			/**
-			 * m​i​n
+			 * M​i​n
 			 */
 			min: string
 			/**
-			 * m​a​x
+			 * M​a​x
 			 */
 			max: string
 			/**
@@ -72,99 +72,99 @@ type RootTranslation = {
 			 */
 			lte: string
 			/**
-			 * i​n
+			 * I​n
 			 */
 			'in': string
 			/**
-			 * n​o​t​ ​i​n
+			 * N​o​t​ ​I​n
 			 */
 			nin: string
 			/**
-			 * a​n​y​ ​o​f
+			 * A​n​y​ ​O​f
 			 */
 			any_of: string
 			/**
-			 * n​o​t​ ​a​n​y​ ​o​f
+			 * N​o​t​ ​A​n​y​ ​O​f
 			 */
 			not_any_of: string
 			/**
-			 * i​s​ ​s​a​m​e​ ​d​a​y
+			 * I​s​ ​S​a​m​e​ ​D​a​y
 			 */
 			is_same_day: string
 			/**
-			 * i​s​ ​n​o​t​ ​s​a​m​e​ ​d​a​y
+			 * I​s​ ​N​o​t​ ​S​a​m​e​ ​D​a​y
 			 */
 			is_not_same_day: string
 			/**
-			 * i​s​ ​t​o​d​a​y
+			 * I​s​ ​T​o​d​a​y
 			 */
 			is_tody: string
 			/**
-			 * i​s​ ​n​o​t​ ​t​o​d​a​y
+			 * I​s​ ​N​o​t​ ​T​o​d​a​y
 			 */
 			is_not_today: string
 			/**
-			 * i​s​ ​a​f​t​e​r​ ​t​o​d​a​y
+			 * I​s​ ​A​f​t​e​r​ ​T​o​d​a​y
 			 */
 			is_after_today: string
 			/**
-			 * i​s​ ​b​e​f​o​r​e​ ​t​o​d​a​y
+			 * I​s​ ​B​e​f​o​r​e​ ​T​o​d​a​y
 			 */
 			is_before_today: string
 			/**
-			 * i​s​ ​t​o​m​o​r​r​o​w
+			 * I​s​ ​T​o​m​o​r​r​o​w
 			 */
 			is_tomorrow: string
 			/**
-			 * i​s​ ​n​o​t​ ​t​o​m​o​r​r​o​w
+			 * I​s​ ​N​o​t​ ​T​o​m​o​r​r​o​w
 			 */
 			is_not_tomorrow: string
 			/**
-			 * i​s​ ​a​f​t​e​r​ ​t​o​m​o​r​r​o​w
+			 * I​s​ ​A​f​t​e​r​ ​T​o​m​o​r​r​o​w
 			 */
 			is_after_tomorrow: string
 			/**
-			 * i​s​ ​b​e​f​o​r​e​ ​t​o​m​o​r​r​o​w
+			 * I​s​ ​B​e​f​o​r​e​ ​T​o​m​o​r​r​o​w
 			 */
 			is_before_tommorow: string
 			/**
-			 * i​s​ ​y​e​s​t​e​r​d​a​y
+			 * I​s​ ​Y​e​s​t​e​r​d​a​y
 			 */
 			is_yesterday: string
 			/**
-			 * i​s​ ​n​o​t​ ​y​e​s​t​e​r​d​a​y
+			 * I​s​ ​N​o​t​ ​Y​e​s​t​e​r​d​a​y
 			 */
 			is_not_yesterday: string
 			/**
-			 * i​s​ ​a​f​t​e​r​ ​y​e​s​t​e​r​d​a​y
+			 * I​s​ ​A​f​t​e​r​ ​Y​e​s​t​e​r​d​a​y
 			 */
 			is_after_yesterday: string
 			/**
-			 * i​s​ ​b​e​f​o​r​e​ ​y​e​s​t​e​r​d​a​y
+			 * I​s​ ​B​e​f​o​r​e​ ​Y​e​s​t​e​r​d​a​y
 			 */
 			is_before_yesterday: string
 			/**
-			 * i​s​ ​b​e​f​o​r​e
+			 * I​s​ ​B​e​f​o​r​e
 			 */
 			is_before: string
 			/**
-			 * i​s​ ​n​o​t​ ​b​e​f​o​r​e
+			 * I​s​ ​N​o​t​ ​B​e​f​o​r​e
 			 */
 			is_not_before: string
 			/**
-			 * i​s​ ​a​f​t​e​r
+			 * I​s​ ​A​f​t​e​r
 			 */
 			is_after: string
 			/**
-			 * i​s​ ​n​o​t​ ​a​f​t​e​r
+			 * I​s​ ​N​o​t​ ​A​f​t​e​r
 			 */
 			is_not_after: string
 			/**
-			 * i​s​ ​t​r​u​e
+			 * I​s​ ​T​r​u​e
 			 */
 			is_true: string
 			/**
-			 * i​s​ ​f​a​l​s​e
+			 * I​s​ ​F​a​l​s​e
 			 */
 			is_false: string
 		}
@@ -458,6 +458,20 @@ type RootTranslation = {
 			 */
 			table: string
 		}
+		timeScales: {
+			/**
+			 * M​o​n​t​h
+			 */
+			month: string
+			/**
+			 * W​e​e​k
+			 */
+			week: string
+			/**
+			 * D​a​y
+			 */
+			day: string
+		}
 	}
 }
 
@@ -473,35 +487,35 @@ export type TranslationFunctions = {
 			 */
 			neq: () => LocalizedString
 			/**
-			 * contains
+			 * Contains
 			 */
 			contains: () => LocalizedString
 			/**
-			 * not contains
+			 * Not Contains
 			 */
 			does_not_contain: () => LocalizedString
 			/**
-			 * starts with
+			 * Starts With
 			 */
 			starts_with: () => LocalizedString
 			/**
-			 * ends with
+			 * Ends With
 			 */
 			ends_with: () => LocalizedString
 			/**
-			 * is empty
+			 * Is Empty
 			 */
 			is_empty: () => LocalizedString
 			/**
-			 * is not empty
+			 * Is Not Empty
 			 */
 			is_not_empty: () => LocalizedString
 			/**
-			 * min
+			 * Min
 			 */
 			min: () => LocalizedString
 			/**
-			 * max
+			 * Max
 			 */
 			max: () => LocalizedString
 			/**
@@ -521,99 +535,99 @@ export type TranslationFunctions = {
 			 */
 			lte: () => LocalizedString
 			/**
-			 * in
+			 * In
 			 */
 			'in': () => LocalizedString
 			/**
-			 * not in
+			 * Not In
 			 */
 			nin: () => LocalizedString
 			/**
-			 * any of
+			 * Any Of
 			 */
 			any_of: () => LocalizedString
 			/**
-			 * not any of
+			 * Not Any Of
 			 */
 			not_any_of: () => LocalizedString
 			/**
-			 * is same day
+			 * Is Same Day
 			 */
 			is_same_day: () => LocalizedString
 			/**
-			 * is not same day
+			 * Is Not Same Day
 			 */
 			is_not_same_day: () => LocalizedString
 			/**
-			 * is today
+			 * Is Today
 			 */
 			is_tody: () => LocalizedString
 			/**
-			 * is not today
+			 * Is Not Today
 			 */
 			is_not_today: () => LocalizedString
 			/**
-			 * is after today
+			 * Is After Today
 			 */
 			is_after_today: () => LocalizedString
 			/**
-			 * is before today
+			 * Is Before Today
 			 */
 			is_before_today: () => LocalizedString
 			/**
-			 * is tomorrow
+			 * Is Tomorrow
 			 */
 			is_tomorrow: () => LocalizedString
 			/**
-			 * is not tomorrow
+			 * Is Not Tomorrow
 			 */
 			is_not_tomorrow: () => LocalizedString
 			/**
-			 * is after tomorrow
+			 * Is After Tomorrow
 			 */
 			is_after_tomorrow: () => LocalizedString
 			/**
-			 * is before tomorrow
+			 * Is Before Tomorrow
 			 */
 			is_before_tommorow: () => LocalizedString
 			/**
-			 * is yesterday
+			 * Is Yesterday
 			 */
 			is_yesterday: () => LocalizedString
 			/**
-			 * is not yesterday
+			 * Is Not Yesterday
 			 */
 			is_not_yesterday: () => LocalizedString
 			/**
-			 * is after yesterday
+			 * Is After Yesterday
 			 */
 			is_after_yesterday: () => LocalizedString
 			/**
-			 * is before yesterday
+			 * Is Before Yesterday
 			 */
 			is_before_yesterday: () => LocalizedString
 			/**
-			 * is before
+			 * Is Before
 			 */
 			is_before: () => LocalizedString
 			/**
-			 * is not before
+			 * Is Not Before
 			 */
 			is_not_before: () => LocalizedString
 			/**
-			 * is after
+			 * Is After
 			 */
 			is_after: () => LocalizedString
 			/**
-			 * is not after
+			 * Is Not After
 			 */
 			is_not_after: () => LocalizedString
 			/**
-			 * is true
+			 * Is True
 			 */
 			is_true: () => LocalizedString
 			/**
-			 * is false
+			 * Is False
 			 */
 			is_false: () => LocalizedString
 		}
@@ -907,6 +921,20 @@ export type TranslationFunctions = {
 			 */
 			table: () => LocalizedString
 		}
+		timeScales: {
+			/**
+			 * Month
+			 */
+			month: () => LocalizedString
+			/**
+			 * Week
+			 */
+			week: () => LocalizedString
+			/**
+			 * Day
+			 */
+			day: () => LocalizedString
+		}
 	}
 }
 
diff --git a/packages/openapi/src/index.ts b/packages/openapi/src/index.ts
index 561a4266b..ba1f1145b 100644
--- a/packages/openapi/src/index.ts
+++ b/packages/openapi/src/index.ts
@@ -23,6 +23,7 @@ import {
   createRecords,
   deleteRecordById,
   duplicateRecordById,
+  getAggregateRecords,
   getPivotData,
   getRecordById,
   getRecords,
@@ -89,6 +90,7 @@ export const createOpenApiSpec = (
         viewRecordSchema.openapi({ description: table.name.value + " " + view.name.value + " view record schema" }),
       )
 
+      routes.push(getAggregateRecords(base, table, view))
       routes.push(getViewRecords(base, table, view, viewRecordSchema))
       routes.push(getViewRecordById(base, table, view, viewRecordSchema))
     }
diff --git a/packages/openapi/src/openapi/record.openapi.ts b/packages/openapi/src/openapi/record.openapi.ts
index aa74cbbd9..65d65eded 100644
--- a/packages/openapi/src/openapi/record.openapi.ts
+++ b/packages/openapi/src/openapi/record.openapi.ts
@@ -14,6 +14,7 @@ import { z, type ZodTypeAny } from "@undb/zod"
 
 export const RECORD_ID_COMPONENT = "RecordId"
 export const RECORD_COMPONENT = "Record"
+export const AGGREGATE_RECORD_COMPONENT = "Aggregate"
 export const BUTTON_COMPONENT = "Button"
 export const FORM_COMPONENT = "Form"
 export const VIEW_COMPONENT = "View"
@@ -121,6 +122,29 @@ export const getViewRecords = (base: Base, table: TableDo, view: View, recordSch
   }
 }
 
+export const getAggregateRecords = (base: Base, table: TableDo, view: View): RouteConfig => {
+  return {
+    method: "get",
+    path: `/bases/${base.name.value}/tables/${table.name.value}/views/${view.name.value}/records/aggregate`,
+    description: `Get ${table.name.value} records aggregate in ${view.name.value} view`,
+    summary: `Get ${table.name.value} records aggregate in ${view.name.value} view`,
+    tags: [RECORD_COMPONENT, AGGREGATE_RECORD_COMPONENT, VIEW_COMPONENT],
+    responses: {
+      200: {
+        description: "record aggregate data",
+        content: {
+          "application/json": {
+            schema: z.object({
+              // TODO: add field properties
+              data: z.record(z.string(), z.number()),
+            }),
+          },
+        },
+      },
+    },
+  }
+}
+
 export const getRecordById = (base: Base, table: TableDo, recordSchema: ZodTypeAny): RouteConfig => {
   return {
     method: "get",
diff --git a/packages/persistence/src/record/record.query-repository.ts b/packages/persistence/src/record/record.query-repository.ts
index 5fd069a5f..700388b66 100644
--- a/packages/persistence/src/record/record.query-repository.ts
+++ b/packages/persistence/src/record/record.query-repository.ts
@@ -60,13 +60,14 @@ export class RecordQueryRepository implements IRecordQueryRepository {
     return Number(total)
   }
 
-  async countWhere(table: TableDo, query: Option<CountQueryArgs>): Promise<number> {
-    const t = new UnderlyingTable(table)
-
+  async countWhere(table: TableDo, view: View | undefined, query: Option<CountQueryArgs>): Promise<number> {
     const spec = Option(query.into(undefined)?.filter.into(undefined))
 
-    const { total } = await this.qb
-      .selectFrom(t.name)
+    const selectFields = table.getSelectFields(view, undefined)
+    const foreignTables = await this.getForeignTables(table, selectFields)
+    const qb = this.helper.createQuery(table, foreignTables, selectFields, spec)
+
+    const { total } = await qb
       .select((eb) => eb.fn.countAll().as("total"))
       .where(this.helper.handleWhere(table, spec))
       .executeTakeFirstOrThrow()
@@ -105,8 +106,6 @@ export class RecordQueryRepository implements IRecordQueryRepository {
     const context = executionContext.getStore()
     const userId = context?.user?.userId!
 
-    const t = new UnderlyingTable(table)
-
     const filter = query.into(undefined)?.filter.into(undefined)
     const defaultSort: IViewSort = [{ fieldId: AUTO_INCREMENT_TYPE, direction: "asc" }]
     const ignoreView = query.into(undefined)?.ignoreView
@@ -126,7 +125,7 @@ export class RecordQueryRepository implements IRecordQueryRepository {
       .where(this.helper.handleWhere(table, spec))
       .execute()
 
-    const total = await this.countWhere(table, Some({ filter: spec }))
+    const total = await this.countWhere(table, view, Some({ filter: spec, select: query.map((q) => q.select) }))
 
     const records = result.map((r) => getRecordDTOFromEntity(table, r, foreignTables))
     return { values: records, total: Number(total) }
@@ -305,6 +304,9 @@ export class RecordQueryRepository implements IRecordQueryRepository {
           if (!fieldAggregate) {
             continue
           }
+          if (!selectFields.some((f) => f.id.value === fieldId)) {
+            continue
+          }
           const field = table.schema.fieldMapById.get(fieldId)
           if (!field) {
             continue
@@ -327,6 +329,9 @@ export class RecordQueryRepository implements IRecordQueryRepository {
           if (!field) {
             continue
           }
+          if (!selectFields.some((f) => f.id.value === fieldId)) {
+            continue
+          }
           // const builder = new AggregateFnBuiler(t, eb, field, fieldAggregate)
           // const expr = builder.handleWhere()
           // if (expr.isSome()) {
diff --git a/packages/queries/src/get-aggregates.query.ts b/packages/queries/src/get-aggregates.query.ts
index cbe3de78f..182e76c09 100644
--- a/packages/queries/src/get-aggregates.query.ts
+++ b/packages/queries/src/get-aggregates.query.ts
@@ -17,18 +17,26 @@ export const getAggregatesOutput = z.record(fieldId, aggregateResult)
 export type IGetAggregatesOutput = z.infer<typeof getAggregatesOutput>
 
 export class GetAggregatesQuery extends Query implements IGetAggregatesQuery {
-  public readonly tableId: string
+  public readonly tableId?: string
+  public readonly baseName?: string
+  public readonly tableName?: string
   public readonly viewId?: string
+  public readonly viewName?: string
   public readonly aggregate?: IViewAggregate
   public readonly condition?: IAggregateConditionGroup
   public readonly ignoreView?: boolean
+  public readonly isReadable?: boolean
 
   constructor(props: QueryProps<IGetAggregatesQuery>) {
     super()
     this.tableId = props.tableId
+    this.baseName = props.baseName
+    this.tableName = props.tableName
     this.viewId = props.viewId
+    this.viewName = props.viewName
     this.aggregate = props.aggregate
     this.condition = props.condition
     this.ignoreView = props.ignoreView
+    this.isReadable = props.isReadable
   }
 }
diff --git a/packages/table/src/modules/records/dto/record-aggregate.dto.ts b/packages/table/src/modules/records/dto/record-aggregate.dto.ts
index 2141f4e06..bc57bc5f5 100644
--- a/packages/table/src/modules/records/dto/record-aggregate.dto.ts
+++ b/packages/table/src/modules/records/dto/record-aggregate.dto.ts
@@ -1,18 +1,26 @@
 import { z } from "@undb/zod"
+import { uniqueTableDTO } from "../../../dto/unique-table.dto"
 import { tableId } from "../../../table-id.vo"
 import { aggregateConditionGroup } from "../../aggregate"
-import { viewAggregate, viewId } from "../../views"
+import { fieldId, fieldName } from "../../schema"
+import { viewAggregate, viewId, viewName } from "../../views"
 
 export const aggregateResult = z.number().or(z.string().date()).nullable()
 
 export type AggregateResult = z.infer<typeof aggregateResult>
 
-export const getAggregatesDTO = z.object({
-  tableId: tableId,
-  viewId: viewId.optional(),
-  aggregate: viewAggregate.optional(),
-  condition: aggregateConditionGroup.optional(),
-  ignoreView: z.boolean().optional(),
-})
+export const getAggregatesDTO = z
+  .object({
+    tableId: tableId,
+    viewId: viewId.optional(),
+    viewName: viewName.optional(),
+    aggregate: viewAggregate.optional(),
+    condition: aggregateConditionGroup.optional(),
+    ignoreView: z.boolean().optional(),
+    select: fieldId.or(fieldName).array().optional(),
+
+    isReadable: z.boolean().optional(),
+  })
+  .merge(uniqueTableDTO)
 
 export type IGetAggregatesDTO = z.infer<typeof getAggregatesDTO>
diff --git a/packages/table/src/modules/records/record/record.repository.ts b/packages/table/src/modules/records/record/record.repository.ts
index 38a548e51..37c15c23f 100644
--- a/packages/table/src/modules/records/record/record.repository.ts
+++ b/packages/table/src/modules/records/record/record.repository.ts
@@ -18,6 +18,7 @@ export interface SingleQueryArgs {
 
 export interface CountQueryArgs {
   filter: Option<RecordComositeSpecification>
+  select: Option<string[]>
 }
 
 export interface QueryArgs {
@@ -49,7 +50,7 @@ export interface IRecordQueryRepository {
   find(table: TableDo, view: View, query: Option<QueryArgs>): Promise<PaginatedDTO<IRecordDTO>>
   findOneById(table: TableDo, id: RecordId, query: Option<SingleQueryArgs>): Promise<Option<IRecordDTO>>
   count(tableId: TableId): Promise<number>
-  countWhere(table: TableDo, spec: Option<CountQueryArgs>): Promise<number>
+  countWhere(table: TableDo, view: View | undefined, spec: Option<CountQueryArgs>): Promise<number>
   getPivotData(table: TableDo, viewId: string): Promise<IGetPivotDataOutput>
 
   aggregate(
@@ -91,6 +92,7 @@ export function buildQuery(table: TableDo, dto: IGetRecordsDTO): Option<QueryArg
 export function buildCountQuery(table: TableDo, dto: ICountRecordsDTO): Option<CountQueryArgs> {
   const query: CountQueryArgs = {
     filter: None,
+    select: None,
   }
 
   if (dto.q) {
diff --git a/packages/table/src/modules/records/services/methods/count-records.method.ts b/packages/table/src/modules/records/services/methods/count-records.method.ts
index 466890487..fc283e9fa 100644
--- a/packages/table/src/modules/records/services/methods/count-records.method.ts
+++ b/packages/table/src/modules/records/services/methods/count-records.method.ts
@@ -9,5 +9,5 @@ export async function countRecords(this: RecordsQueryService, dto: ICountRecords
 
   const query = buildCountQuery(table, dto)
 
-  return this.repo.countWhere(table, query)
+  return this.repo.countWhere(table, undefined, query)
 }
diff --git a/packages/table/src/modules/records/services/methods/get-aggregates.method.ts b/packages/table/src/modules/records/services/methods/get-aggregates.method.ts
index 6e59afc60..980b4ce1a 100644
--- a/packages/table/src/modules/records/services/methods/get-aggregates.method.ts
+++ b/packages/table/src/modules/records/services/methods/get-aggregates.method.ts
@@ -1,8 +1,8 @@
 import { None, Option, Some } from "@undb/domain"
-import type { RecordComositeSpecification } from "../../.."
-import { TableIdVo } from "../../../../table-id.vo"
+import { mapKeys } from "radash"
+import { FieldIdVo, type RecordComositeSpecification } from "../../.."
+import { withUniqueTable } from "../../../../specifications/table-name.specification"
 import { getSpec } from "../../../schema/fields/condition"
-import { ViewIdVo } from "../../../views"
 import type { AggregateResult, IGetAggregatesDTO } from "../../dto"
 import type { QueryArgs } from "../../record/record.repository"
 import type { RecordsQueryService } from "../records.query-service"
@@ -11,13 +11,14 @@ export async function getAggregates(
   this: RecordsQueryService,
   dto: IGetAggregatesDTO,
 ): Promise<Record<string, AggregateResult>> {
-  const tableId = new TableIdVo(dto.tableId)
-  const table = (await this.tableRepository.findOneById(tableId)).expect("Table not found")
-  const viewId = dto.viewId ? Some(new ViewIdVo(dto.viewId)) : None
+  const spec = withUniqueTable(dto).expect("Invalid unique table specification")
+  const table = (await this.tableRepository.findOne(Some(spec))).expect("Table not found")
+  const view = table.views.getViewByNameOrId(dto.viewName, dto.viewId)
+  const viewId = Some(view.id)
   const aggregate = dto.aggregate
 
   let args: QueryArgs = {
-    select: None,
+    select: dto.select ? Some(dto.select) : None,
     filter: None,
     pagination: None,
     ignoreView: dto.ignoreView,
@@ -26,5 +27,12 @@ export async function getAggregates(
     args.filter = getSpec(table.schema, dto.condition) as Option<RecordComositeSpecification>
   }
 
-  return this.repo.aggregate(table, viewId, Option(aggregate), Some(args))
+  const result = await this.repo.aggregate(table, viewId, Option(aggregate), Some(args))
+  if (dto.isReadable) {
+    return mapKeys(
+      result,
+      (fieldId) => table.schema.getFieldById(new FieldIdVo(fieldId)).expect("Field not found").name.value,
+    )
+  }
+  return result
 }
diff --git a/packages/table/src/modules/schema/fields/condition/abstract-condition.vo.ts b/packages/table/src/modules/schema/fields/condition/abstract-condition.vo.ts
index cf7cbf849..1345df4d5 100644
--- a/packages/table/src/modules/schema/fields/condition/abstract-condition.vo.ts
+++ b/packages/table/src/modules/schema/fields/condition/abstract-condition.vo.ts
@@ -8,6 +8,7 @@ import type { Field } from "../field.type"
 import type { IRootCondition, MaybeConditionGroup } from "./condition.type"
 import {
   conditionsWithField,
+  getConditionGroupCount,
   getFieldSpec,
   getFlattenFieldConditions,
   getSpec,
@@ -26,7 +27,7 @@ export abstract class Condition<OptionType extends z.ZodTypeAny> extends ValueOb
   }
 
   get count() {
-    return this.fieldIds.size
+    return getConditionGroupCount(this.value)
   }
 
   getSpec(schema: Schema) {
@@ -79,7 +80,7 @@ export abstract class Condition<OptionType extends z.ZodTypeAny> extends ValueOb
   get fieldIds(): Set<string> {
     const result = new Set<string>()
     for (const condition of this.fieldConditiosIter) {
-      result.add(condition.fieldId)
+      result.add(condition.field)
     }
 
     return result
diff --git a/packages/table/src/modules/schema/fields/condition/condition.util.ts b/packages/table/src/modules/schema/fields/condition/condition.util.ts
index 7abf46d05..7d2f85418 100644
--- a/packages/table/src/modules/schema/fields/condition/condition.util.ts
+++ b/packages/table/src/modules/schema/fields/condition/condition.util.ts
@@ -180,6 +180,12 @@ export function isEmptyConditionGroup<OptionType extends z.ZodTypeAny>(
   return condition.children.length === 0
 }
 
+export function getConditionGroupCount<OptionType extends z.ZodTypeAny>(
+  condition: IConditionGroup<OptionType>,
+): number {
+  return condition.children.reduce((acc, child) => acc + (isGroup(child) ? getConditionGroupCount(child) : 1), 0)
+}
+
 /**
  * Removes field conditions from a condition group recursively, based on the provided field IDs.
  * If a child condition is a field condition and its field ID is not in the provided set of field IDs,
diff --git a/packages/table/src/modules/schema/fields/field.type.ts b/packages/table/src/modules/schema/fields/field.type.ts
index 1d16a4813..083b98dc6 100644
--- a/packages/table/src/modules/schema/fields/field.type.ts
+++ b/packages/table/src/modules/schema/fields/field.type.ts
@@ -9,6 +9,7 @@ import type {
   IButtonFieldOption,
   IDateFieldConditionSchema,
   IDateFieldConstraint,
+  IDateFieldOption,
   IDateRangeFieldConditionSchema,
   IDateRangeFieldConstraint,
   IJsonFieldConditionSchema,
@@ -327,5 +328,6 @@ export type IFieldOption =
   | IButtonFieldOption
   | ICurrencyFieldOption
   | IFormulaFieldOption
+  | IDateFieldOption
 
 export type IFieldMacro = IUserFieldMacro | IDateFieldMacro
diff --git a/packages/table/src/modules/schema/fields/variants/abstract-field.vo.ts b/packages/table/src/modules/schema/fields/variants/abstract-field.vo.ts
index 4070ce403..1d8b0eba2 100644
--- a/packages/table/src/modules/schema/fields/variants/abstract-field.vo.ts
+++ b/packages/table/src/modules/schema/fields/variants/abstract-field.vo.ts
@@ -150,6 +150,9 @@ export abstract class AbstractField<
   abstract get aggregate(): ZodEnum<[string, ...string[]]> | ZodUndefined
 
   formatAggregate(aggregate?: string, value?: number | string): string | number {
+    if (aggregate === "percent_empty" || aggregate === "percent_not_empty" || aggregate === "percent_uniq") {
+      return `${(Number(value) ?? 0) * 100}%`
+    }
     return value ?? ""
   }
 
diff --git a/packages/table/src/modules/schema/fields/variants/abstractions/abstract-date-option.ts b/packages/table/src/modules/schema/fields/variants/abstractions/abstract-date-option.ts
new file mode 100644
index 000000000..ba255476f
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/abstractions/abstract-date-option.ts
@@ -0,0 +1,12 @@
+import { z } from "@undb/zod"
+
+export const format = z.enum(["yyyy-MM-dd", "yyyy/MM/dd", "dd-MM-yyyy", "dd/MM/yyyy"])
+export const formatItems = format.options
+
+export const timeFormat = z.enum(["HH:mm", "HH:mm:ss"])
+export const timeFormatItems = timeFormat.options
+
+export const abstractDateOption = z.object({
+  format: format.optional(),
+  timeFormat: timeFormat.optional(),
+})
diff --git a/packages/table/src/modules/schema/fields/variants/abstractions/index.ts b/packages/table/src/modules/schema/fields/variants/abstractions/index.ts
index 60dcb7941..2d845052c 100644
--- a/packages/table/src/modules/schema/fields/variants/abstractions/index.ts
+++ b/packages/table/src/modules/schema/fields/variants/abstractions/index.ts
@@ -1,4 +1,5 @@
 export * from "./abstract-date-field.condition"
+export * from "./abstract-date-option"
 export * from "./abstract-date-value.specification"
 export * from "./abstract-date-value.visitor"
 export * from "./abstract-number-field.condition"
diff --git a/packages/table/src/modules/schema/fields/variants/currency-field/currency-field.vo.ts b/packages/table/src/modules/schema/fields/variants/currency-field/currency-field.vo.ts
index 0c86e6299..506e0a854 100644
--- a/packages/table/src/modules/schema/fields/variants/currency-field/currency-field.vo.ts
+++ b/packages/table/src/modules/schema/fields/variants/currency-field/currency-field.vo.ts
@@ -51,7 +51,7 @@ export const currencyFieldDTO = baseFieldDTO.extend({
 
 export type ICurrencyFieldDTO = z.infer<typeof currencyFieldDTO>
 
-export class CurrencyField extends AbstractField<CurrencyFieldValue, CurrencyFieldConstraint> {
+export class CurrencyField extends AbstractField<CurrencyFieldValue, CurrencyFieldConstraint, ICurrencyFieldOption> {
   constructor(dto: ICurrencyFieldDTO) {
     super(dto)
     if (dto.constraint) {
diff --git a/packages/table/src/modules/schema/fields/variants/date-field/date-field.vo.ts b/packages/table/src/modules/schema/fields/variants/date-field/date-field.vo.ts
index 24a279c39..d256b979d 100644
--- a/packages/table/src/modules/schema/fields/variants/date-field/date-field.vo.ts
+++ b/packages/table/src/modules/schema/fields/variants/date-field/date-field.vo.ts
@@ -8,10 +8,12 @@ import { fieldId, FieldIdVo } from "../../field-id.vo"
 import type { IFieldVisitor } from "../../field.visitor"
 import { AbstractField, baseFieldDTO, createBaseFieldDTO } from "../abstract-field.vo"
 import { createAbstractDateConditionMather } from "../abstractions/abstract-date-field.condition"
+import { abstractDateOption } from "../abstractions/abstract-date-option"
 import { abstractDateAggregate } from "../abstractions/abstract-date.aggregate"
 import { dateFieldConstraint, DateFieldConstraint } from "./date-field-constraint.vo"
 import { isDateFieldMacro } from "./date-field-macro"
 import { dateFieldValue, DateFieldValue } from "./date-field-value.vo"
+
 import {
   createDateFieldCondition,
   type IDateFieldCondition,
@@ -21,10 +23,23 @@ import { DateEqual } from "./date-field.specification"
 
 export const DATE_TYPE = "date" as const
 
+export const dateFieldOption = abstractDateOption.extend({
+  includeTime: z.boolean().optional(),
+})
+
+export type IDateFieldOption = z.infer<typeof dateFieldOption>
+
+export const DEFAULT_DATE_FIELD_OPTION = {
+  format: "yyyy-MM-dd",
+  includeTime: false,
+  timeFormat: "HH:mm",
+} as const satisfies IDateFieldOption
+
 export const createDateFieldDTO = createBaseFieldDTO.extend({
   type: z.literal(DATE_TYPE),
   constraint: dateFieldConstraint.optional(),
   defaultValue: dateFieldValue,
+  option: dateFieldOption.optional(),
 })
 
 export const createTablesDateFieldDTO = createDateFieldDTO
@@ -37,11 +52,12 @@ export const dateFieldDTO = baseFieldDTO.extend({
   type: z.literal(DATE_TYPE),
   constraint: dateFieldConstraint.optional(),
   defaultValue: dateFieldValue,
+  option: dateFieldOption.optional(),
 })
 
 export type IDateFieldDTO = z.infer<typeof dateFieldDTO>
 
-export class DateField extends AbstractField<DateFieldValue> {
+export class DateField extends AbstractField<DateFieldValue, DateFieldConstraint, IDateFieldOption> {
   constructor(dto: IDateFieldDTO) {
     super(dto)
     if (dto.constraint) {
@@ -50,6 +66,32 @@ export class DateField extends AbstractField<DateFieldValue> {
     if (dto.defaultValue) {
       this.defaultValue = new DateFieldValue(dto.defaultValue)
     }
+    if (dto.option) {
+      this.option = Some(dto.option)
+    }
+  }
+
+  get dateFieldOption() {
+    return this.option.unwrapOr(DEFAULT_DATE_FIELD_OPTION)
+  }
+
+  get dateFormatterString() {
+    return this.dateFieldOption.format ?? DEFAULT_DATE_FIELD_OPTION.format
+  }
+
+  get timeFormatterString() {
+    return this.dateFieldOption.timeFormat ?? DEFAULT_DATE_FIELD_OPTION.timeFormat
+  }
+
+  get includeTime() {
+    return this.dateFieldOption.includeTime ?? DEFAULT_DATE_FIELD_OPTION.includeTime
+  }
+
+  get fullFormatterString() {
+    if (this.includeTime) {
+      return `${this.dateFormatterString} ${this.timeFormatterString}`
+    }
+    return this.dateFormatterString
   }
 
   static create(dto: ICreateDateFieldDTO) {
@@ -57,7 +99,8 @@ export class DateField extends AbstractField<DateFieldValue> {
   }
 
   get formatter() {
-    return format("yyyy-MM-dd")
+    const str = this.fullFormatterString
+    return format(str)
   }
 
   format(date: Date) {
diff --git a/packages/table/src/modules/schema/fields/variants/date-range-field/date-range-field.vo.ts b/packages/table/src/modules/schema/fields/variants/date-range-field/date-range-field.vo.ts
index a6c6d2a93..62eb9bc26 100644
--- a/packages/table/src/modules/schema/fields/variants/date-range-field/date-range-field.vo.ts
+++ b/packages/table/src/modules/schema/fields/variants/date-range-field/date-range-field.vo.ts
@@ -6,6 +6,7 @@ import type { RecordComositeSpecification } from "../../../../records/record/rec
 import { fieldId, FieldIdVo } from "../../field-id.vo"
 import type { IFieldVisitor } from "../../field.visitor"
 import { AbstractField, baseFieldDTO, createBaseFieldDTO } from "../abstract-field.vo"
+import { abstractDateOption } from "../abstractions/abstract-date-option"
 import { daterangeFieldConstraint, DateRangeFieldConstraint } from "./date-range-field-constraint.vo"
 import { dateRangeFieldValue, DateRangeFieldValue } from "./date-range-field-value.vo"
 import { dateRangeFieldAggregate } from "./date-range-field.aggregate"
@@ -19,10 +20,23 @@ import { DateRangeEqual } from "./date-range-field.specification"
 
 export const DATE_RANGE_TYPE = "dateRange" as const
 
+export const dateRangeFieldOption = abstractDateOption.extend({
+  includeTime: z.boolean().optional(),
+})
+
+export type IDateRangeFieldOption = z.infer<typeof dateRangeFieldOption>
+
+export const DEFAULT_DATE_RANGE_FIELD_OPTION = {
+  format: "yyyy-MM-dd",
+  includeTime: false,
+  timeFormat: "HH:mm",
+} as const satisfies IDateRangeFieldOption
+
 export const createDateRangeFieldDTO = createBaseFieldDTO.extend({
   type: z.literal(DATE_RANGE_TYPE),
   constraint: daterangeFieldConstraint.optional(),
   defaultValue: dateRangeFieldValue.optional(),
+  option: dateRangeFieldOption.optional(),
 })
 
 export const createTablesDateRangeFieldDTO = createDateRangeFieldDTO
@@ -35,6 +49,7 @@ export const dateRangeFieldDTO = baseFieldDTO.extend({
   type: z.literal(DATE_RANGE_TYPE),
   constraint: daterangeFieldConstraint.optional(),
   defaultValue: dateRangeFieldValue.optional(),
+  option: dateRangeFieldOption.optional(),
 })
 
 export type IDateRangeFieldDTO = z.infer<typeof dateRangeFieldDTO>
@@ -48,14 +63,41 @@ export class DateRangeField extends AbstractField<DateRangeFieldValue> {
     if (dto.defaultValue) {
       this.defaultValue = new DateRangeFieldValue(dto.defaultValue)
     }
+    if (dto.option) {
+      this.option = Some(dto.option)
+    }
   }
 
   static create(dto: ICreateDateRangeFieldDTO) {
     return new DateRangeField({ ...dto, id: FieldIdVo.fromStringOrCreate(dto.id).value })
   }
 
+  get dateRangeFieldOption() {
+    return this.option.unwrapOr(DEFAULT_DATE_RANGE_FIELD_OPTION)
+  }
+
+  get dateFormatterString() {
+    return this.dateRangeFieldOption.format ?? DEFAULT_DATE_RANGE_FIELD_OPTION.format
+  }
+
+  get timeFormatterString() {
+    return this.dateRangeFieldOption.timeFormat ?? DEFAULT_DATE_RANGE_FIELD_OPTION.timeFormat
+  }
+
+  get includeTime() {
+    return this.dateRangeFieldOption.includeTime ?? DEFAULT_DATE_RANGE_FIELD_OPTION.includeTime
+  }
+
+  get fullFormatterString() {
+    if (this.includeTime) {
+      return `${this.dateFormatterString} ${this.timeFormatterString}`
+    }
+    return this.dateFormatterString
+  }
+
   get formatter() {
-    return format("yyyy-MM-dd")
+    const str = this.fullFormatterString
+    return format(str)
   }
 
   format(date: Date) {
diff --git a/packages/table/src/modules/schema/fields/variants/select-field/select-field.vo.ts b/packages/table/src/modules/schema/fields/variants/select-field/select-field.vo.ts
index adc9ab268..7068abc76 100644
--- a/packages/table/src/modules/schema/fields/variants/select-field/select-field.vo.ts
+++ b/packages/table/src/modules/schema/fields/variants/select-field/select-field.vo.ts
@@ -1,13 +1,13 @@
 import { Option, Some, applyRules } from "@undb/domain"
 import { z } from "@undb/zod"
 import { match } from "ts-pattern"
+import type { TableDo } from "../../../../../table.do"
 import { ColorsVO } from "../../../../colors/colors.vo"
 import type { FormFieldVO } from "../../../../forms/form/form-field.vo"
 import type { RecordComositeSpecification } from "../../../../records/record/record.composite-specification"
-import type { TableDo } from "../../../../table.do"
 import { FieldIdVo, fieldId } from "../../field-id.vo"
 import type { IFieldVisitor } from "../../field.visitor"
-import { Options, option, optionId } from "../../option"
+import { Options, option, optionId, type IOptionId } from "../../option"
 import { OptionNameShouldBeUnique } from "../../rules/option-name-should-be-unique.rule"
 import { AbstractField, baseFieldDTO, createBaseFieldDTO } from "../abstract-field.vo"
 import { SelectFieldConstraint, selectFieldConstraint } from "./select-field-constraint.vo"
@@ -146,7 +146,7 @@ export class SelectField extends AbstractField<SelectFieldValue, SelectFieldCons
     return this.option.into(undefined)?.options ?? []
   }
 
-  getOptionById(id: OptionId) {
+  getOptionById(id: IOptionId) {
     return this.options.find((o) => o.id === id)
   }
 
diff --git a/packages/table/src/modules/views/view/variants/calendar-view.vo.ts b/packages/table/src/modules/views/view/variants/calendar-view.vo.ts
index b7aa39e7c..47e3abf2b 100644
--- a/packages/table/src/modules/views/view/variants/calendar-view.vo.ts
+++ b/packages/table/src/modules/views/view/variants/calendar-view.vo.ts
@@ -9,8 +9,14 @@ import { AbstractView, baseViewDTO, createBaseViewDTO, updateBaseViewDTO } from
 
 export const CALENDAR_TYPE = "calendar" as const
 
+export const calendarTimeScale = z.enum(["day", "week", "month"])
+export type CalendarTimeScale = z.infer<typeof calendarTimeScale>
+
+export const calendarTimeScales = ["day", "week", "month"] as const
+
 export const calendarOption = z.object({
   field: fieldId.optional(),
+  timeScale: calendarTimeScale.optional(),
 })
 
 export type ICalendarOption = z.infer<typeof calendarOption>
@@ -38,6 +44,23 @@ export const updateCalendarViewDTO = updateBaseViewDTO.merge(
 
 export type IUpdateCalendarViewDTO = z.infer<typeof updateCalendarViewDTO>
 
+export type MonthScope = "selectedDate" | "withoutDate" | "thisMonth" | "allRecords"
+export type WeekScope = "selectedWeek" | "thisWeek" | "allRecords"
+export type DayScope = "selectedDate" | "withoutDate" | "allRecords"
+export type Scope = MonthScope | WeekScope | DayScope
+
+const baseScope: { value: Scope; label: string }[] = [
+  { value: "selectedDate", label: "In selected date" },
+  { value: "withoutDate", label: "Without date" },
+  { value: "allRecords", label: "All records" },
+]
+
+const scopesMap: Record<CalendarTimeScale, { value: Scope; label: string }[]> = {
+  day: baseScope,
+  week: [{ value: "thisWeek", label: "In this week" }, ...baseScope],
+  month: [...baseScope, { value: "thisMonth", label: "In this month" }],
+} as const
+
 export class CalendarView extends AbstractView {
   calendar: Option<ICalendarOption> = None
 
@@ -45,6 +68,18 @@ export class CalendarView extends AbstractView {
     return this.calendar.map((x) => x.field)
   }
 
+  get timeScale() {
+    return this.calendar.map((x) => x.timeScale ?? "month").unwrapOr("month")
+  }
+
+  set timeScale(timeScale: CalendarTimeScale) {
+    this.calendar = this.calendar.map((x) => ({ ...x, timeScale }))
+  }
+
+  get scopes() {
+    return scopesMap[this.timeScale]
+  }
+
   constructor(table: TableDo, dto: ICalendarViewDTO) {
     super(table, dto)
     this.calendar = Option(dto.calendar)
diff --git a/packages/table/src/table.do.ts b/packages/table/src/table.do.ts
index a27992d40..08e5feb35 100644
--- a/packages/table/src/table.do.ts
+++ b/packages/table/src/table.do.ts
@@ -185,6 +185,12 @@ export class TableDo extends AggregateRoot<ITableEvents> {
         addField(fieldId)
       }
     }
+    if (view?.color.isSome()) {
+      const fieldIds = view.color.unwrap().fieldIds
+      for (const fieldId of fieldIds) {
+        addField(fieldId)
+      }
+    }
 
     for (const field of selected) {
       if (field.type === "button") {
diff --git a/packages/template/src/templates/hr.base.json b/packages/template/src/templates/hr.base.json
index 44f206463..db7cf1613 100644
--- a/packages/template/src/templates/hr.base.json
+++ b/packages/template/src/templates/hr.base.json
@@ -955,6 +955,9 @@
             "type": "date",
             "constraint": {
               "required": true
+            },
+            "option": {
+              "includeTime": true
             }
           },
           "Reviewer": {