feat(calendar-web): default captions for empty custom toolbar items, custom view tab visibility

Author: rahmanunver

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

@@ -32,7 +32,17 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
     }
 
     if (values.view === "standard") {
-        hidePropertiesIn(defaultProperties, values, ["defaultViewCustom"]);
+        hidePropertiesIn(defaultProperties, values, [
+            "defaultViewCustom",
+            "toolbarItems",
+            "customViewShowMonday",
+            "customViewShowTuesday",
+            "customViewShowWednesday",
+            "customViewShowThursday",
+            "customViewShowFriday",
+            "customViewShowSaturday",
+            "customViewShowSunday"
+        ]);
     } else {
         hidePropertyIn(defaultProperties, values, "defaultViewStandard");
     }

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

@@ -56,7 +56,7 @@ export type ResolvedToolbarItem = {
 };
 
 export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props: ToolbarProps) => ReactElement {
-    return function ConfigurableToolbar({ label, localizer, onNavigate, onView, view, views }: ToolbarProps) {
+    return function ConfigurableToolbar({ label, localizer, onNavigate, onView, view }: ToolbarProps) {
         const renderButton = (
             key: string,
             content: ReactElement | string,
@@ -75,10 +75,6 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
             </Button>
         );
 
-        const isViewEnabled = (name: View): boolean => {
-            return Array.isArray(views) ? (views as View[]).includes(name) : true;
-        };
-
         const groups: Record<"left" | "center" | "right", ResolvedToolbarItem[]> = {
             left: [],
             center: [],
@@ -100,9 +96,10 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                         item.tooltip
                     );
                 case "today":
+                    // Always provide a default caption for 'today' button
                     return renderButton(
                         "today",
-                        (item.caption ?? localizer.messages.today) as unknown as ReactElement,
+                        (item.caption || localizer.messages.today) as unknown as ReactElement,
                         () => onNavigate(Navigate.TODAY),
                         false,
                         item.renderMode,
@@ -118,6 +115,7 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                         item.tooltip
                     );
                 case "title":
+                    // Title always shows the formatted label, regardless of caption
                     return (
                         <span key="title" className="calendar-label" title={item.tooltip}>
                             {label}
@@ -129,10 +127,8 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                 case "day":
                 case "agenda": {
                     const name = item.itemType as View;
-                    if (!isViewEnabled(name)) {
-                        return null;
-                    }
-                    const caption = item.caption ?? localizer.messages[name];
+                    // Provide default caption from localizer messages if not specified
+                    const caption = item.caption || localizer.messages[name];
                     return renderButton(
                         name,
                         caption as unknown as ReactElement,

packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts

@@ -41,13 +41,16 @@ export class CalendarPropsBuilder {
                 ? createConfigurableToolbar(this.toolbarItems)
                 : CustomToolbar;
 
+        // Use custom caption for work_week if provided in toolbar items, else default to "Custom"
+        const workWeekCaption = this.toolbarItems?.find(item => item.itemType === "work_week")?.caption || "Custom";
+
         return {
             components: {
                 toolbar
             },
             defaultView: this.defaultView,
             messages: {
-                work_week: "Custom"
+                work_week: workWeekCaption
             },
             events: this.events,
             formats,