fix(calendar-web): styling, config

Author: rahmanunver

packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts

@@ -44,12 +44,17 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
             "customViewShowSunday"
         ]);
     } else {
-        hidePropertiesIn(defaultProperties, values, ["defaultViewStandard", "topBarDateFormat"]);
+        hidePropertiesIn(defaultProperties, values, ["defaultViewStandard", "topBarDateFormat", "timeFormat"]);
     }
 
     values.toolbarItems?.forEach((item, index) => {
         if (item.itemType === "title") {
-            hideNestedPropertiesIn(defaultProperties, values, "toolbarItems", index, ["buttonTooltip", "buttonStyle"]);
+            hideNestedPropertiesIn(defaultProperties, values, "toolbarItems", index, [
+                "caption",
+                "renderMode",
+                "buttonTooltip",
+                "buttonStyle"
+            ]);
         }
         // Hide all format properties for non-view items (navigation buttons, title)
         if (!["day", "month", "agenda", "week", "work_week"].includes(item.itemType)) {

packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx

@@ -13,7 +13,7 @@ export function CustomToolbar({ label, localizer, onNavigate, onView, view, view
 
     return (
         <div className="calendar-toolbar">
-            <div className="btn-group">
+            <div className="btn-group calendar-toolbar-left">
                 <Button className="btn btn-default" onClick={handlePrev}>
                     <IconInternal icon={{ type: "glyph", iconClass: "glyphicon-backward" }} />
                 </Button>
@@ -25,11 +25,11 @@ export function CustomToolbar({ label, localizer, onNavigate, onView, view, view
                 </Button>
             </div>
 
-            <div className="btn-group">
+            <div className="btn-group calendar-toolbar-center">
                 <span className="calendar-label">{label}</span>
             </div>
 
-            <div className="btn-group">
+            <div className="btn-group calendar-toolbar-right">
                 {Array.isArray(views) &&
                     views.map(name => {
                         return (
@@ -170,9 +170,9 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
 
         return (
             <div className="calendar-toolbar">
-                <div className="btn-group">{groups.left.map(renderItem)}</div>
-                <div className="btn-group">{groups.center.map(renderItem)}</div>
-                <div className="btn-group">{groups.right.map(renderItem)}</div>
+                <div className="btn-group calendar-toolbar-left">{groups.left.map(renderItem)}</div>
+                <div className="btn-group calendar-toolbar-center">{groups.center.map(renderItem)}</div>
+                <div className="btn-group calendar-toolbar-right">{groups.right.map(renderItem)}</div>
             </div>
         );
     };

packages/pluggableWidgets/calendar-web/src/ui/Calendar.scss

@@ -41,11 +41,20 @@
     }
 
     .calendar-toolbar {
-        display: flex;
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
         align-items: center;
-        justify-content: space-between;
-        flex-wrap: wrap;
         padding-bottom: var(--spacing-medium, 10px);
+
+        &-left {
+            justify-self: start;
+        }
+        &-center {
+            justify-self: center;
+        }
+        &-right {
+            justify-self: end;
+        }
     }
 
     .rbc-current-time-indicator {