From 72ec5d786d6f811aaef11e88e0ffa844b282adb7 Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin@tooljet.io>
Date: Tue, 23 Nov 2021 15:46:10 +0530
Subject: [PATCH] Add option to display day names as headers of calendar week
 view (#1444)

---
 frontend/src/Editor/Components/Calendar.jsx  | 3 +++
 frontend/src/Editor/Components/components.js | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/frontend/src/Editor/Components/Calendar.jsx b/frontend/src/Editor/Components/Calendar.jsx
index 6836b6cf70..6906d92322 100644
--- a/frontend/src/Editor/Components/Calendar.jsx
+++ b/frontend/src/Editor/Components/Calendar.jsx
@@ -73,6 +73,9 @@ export const Calendar = function ({
 
   const components = {
     timeGutterHeader: () => <div style={{ height: '100%', display: 'flex', alignItems: 'flex-end' }}>All day</div>,
+    week: {
+      header: (props) => <div>{moment(props.date).format(styles.displayDayNamesInWeekView ? 'ddd' : 'DD MMM')}</div>,
+    },
   };
 
   return (
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 90bede2fd3..b326c9717c 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -1227,6 +1227,10 @@ export const componentTypes = [
           { name: 'Spacious', value: 'spacious' },
         ],
       },
+      displayDayNamesInWeekView: {
+        type: 'toggle',
+        displayName: 'Display only names of days as headers on week view',
+      },
     },
     exposedVariables: {
       selectedEvent: {},
@@ -1271,6 +1275,7 @@ export const componentTypes = [
       styles: {
         visibility: { value: '{{true}}' },
         cellSizeInViewsClassifiedByResource: { value: 'spacious' },
+        displayDayNamesInWeekView: { value: true },
       },
     },
   },