diff --git a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/date_cell_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/date_cell_bloc.dart
index b71ccabd3a..10887860dd 100644
--- a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/date_cell_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/date_cell_bloc.dart
@@ -1,4 +1,5 @@
 import 'package:app_flowy/workspace/application/grid/cell_bloc/cell_listener.dart';
+import 'package:app_flowy/workspace/application/grid/field/field_listener.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show Cell;
@@ -11,11 +12,13 @@ part 'date_cell_bloc.freezed.dart';
 
 class DateCellBloc extends Bloc<DateCellEvent, DateCellState> {
   final CellService _service;
-  final CellListener _listener;
+  final CellListener _cellListener;
+  final FieldListener _fieldListener;
 
   DateCellBloc({required CellData cellData})
       : _service = CellService(),
-        _listener = CellListener(rowId: cellData.rowId, fieldId: cellData.field.id),
+        _cellListener = CellListener(rowId: cellData.rowId, fieldId: cellData.field.id),
+        _fieldListener = FieldListener(fieldId: cellData.field.id),
         super(DateCellState.initial(cellData)) {
     on<DateCellEvent>(
       (event, emit) async {
@@ -39,18 +42,27 @@ class DateCellBloc extends Bloc<DateCellEvent, DateCellState> {
 
   @override
   Future<void> close() async {
-    await _listener.stop();
+    await _cellListener.stop();
+    await _fieldListener.stop();
     return super.close();
   }
 
   void _startListening() {
-    _listener.updateCellNotifier.addPublishListener((result) {
+    _cellListener.updateCellNotifier.addPublishListener((result) {
       result.fold(
         (notificationData) => _loadCellData(),
         (err) => Log.error(err),
       );
     });
-    _listener.start();
+    _cellListener.start();
+
+    _fieldListener.updateFieldNotifier.addPublishListener((result) {
+      result.fold(
+        (field) => _loadCellData(),
+        (err) => Log.error(err),
+      );
+    });
+    _fieldListener.start();
   }
 
   Future<void> _loadCellData() async {
diff --git a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart
index b12b56b827..d472016bfc 100644
--- a/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell_bloc/selection_cell_bloc.dart
@@ -1,5 +1,6 @@
 import 'package:app_flowy/workspace/application/grid/cell_bloc/cell_listener.dart';
 import 'package:app_flowy/workspace/application/grid/cell_bloc/select_option_service.dart';
+import 'package:app_flowy/workspace/application/grid/field/field_listener.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
@@ -11,12 +12,14 @@ part 'selection_cell_bloc.freezed.dart';
 
 class SelectionCellBloc extends Bloc<SelectionCellEvent, SelectionCellState> {
   final SelectOptionService _service;
-  final CellListener _listener;
+  final CellListener _cellListener;
+  final FieldListener _fieldListener;
 
   SelectionCellBloc({
     required CellData cellData,
   })  : _service = SelectOptionService(),
-        _listener = CellListener(rowId: cellData.rowId, fieldId: cellData.field.id),
+        _cellListener = CellListener(rowId: cellData.rowId, fieldId: cellData.field.id),
+        _fieldListener = FieldListener(fieldId: cellData.field.id),
         super(SelectionCellState.initial(cellData)) {
     on<SelectionCellEvent>(
       (event, emit) async {
@@ -35,7 +38,8 @@ class SelectionCellBloc extends Bloc<SelectionCellEvent, SelectionCellState> {
 
   @override
   Future<void> close() async {
-    await _listener.stop();
+    await _cellListener.stop();
+    await _fieldListener.stop();
     return super.close();
   }
 
@@ -56,13 +60,21 @@ class SelectionCellBloc extends Bloc<SelectionCellEvent, SelectionCellState> {
   }
 
   void _startListening() {
-    _listener.updateCellNotifier.addPublishListener((result) {
+    _cellListener.updateCellNotifier.addPublishListener((result) {
       result.fold(
         (notificationData) => _loadOptions(),
         (err) => Log.error(err),
       );
     });
-    _listener.start();
+    _cellListener.start();
+
+    _fieldListener.updateFieldNotifier.addPublishListener((result) {
+      result.fold(
+        (field) => _loadOptions(),
+        (err) => Log.error(err),
+      );
+    });
+    _fieldListener.start();
   }
 }
 
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell.dart
index b4692074c2..70febd9adf 100644
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell.dart
@@ -44,7 +44,7 @@ class _DateCellState extends State<DateCell> {
               child: MouseRegion(
                 opaque: false,
                 cursor: SystemMouseCursors.click,
-                child: FlowyText.medium(state.content, fontSize: 12),
+                child: Center(child: FlowyText.medium(state.content, fontSize: 12)),
               ),
             ),
           );
@@ -99,6 +99,7 @@ class _CellCalendar extends StatefulWidget {
 }
 
 class _CellCalendarState extends State<_CellCalendar> {
+  CalendarFormat _calendarFormat = CalendarFormat.month;
   DateTime _focusedDay = DateTime.now();
   DateTime? _selectedDay;
 
@@ -108,7 +109,8 @@ class _CellCalendarState extends State<_CellCalendar> {
       firstDay: kFirstDay,
       lastDay: kLastDay,
       focusedDay: _focusedDay,
-      calendarFormat: CalendarFormat.month,
+      calendarFormat: _calendarFormat,
+      headerStyle: const HeaderStyle(formatButtonVisible: false),
       selectedDayPredicate: (day) {
         return isSameDay(_selectedDay, day);
       },
@@ -122,7 +124,11 @@ class _CellCalendarState extends State<_CellCalendar> {
           });
         }
       },
-      onFormatChanged: (format) {},
+      onFormatChanged: (format) {
+        setState(() {
+          _calendarFormat = format;
+        });
+      },
       onPageChanged: (focusedDay) {
         _focusedDay = focusedDay;
       },