,
initialEvents: any[]
@@ -138,6 +137,32 @@ export const useCalendar = (
if (activeView === "Day") setCurrentDate((d) => d.subtract(1, "day"));
}, [activeView]);
+ const formatter = useCallback(
+ (val: Date | string) => {
+ const date = dayjs(val);
+ if (activeView === "Month") {
+ return date.format("MMMM YYYY");
+ } else if (activeView === "Week") {
+ const weekStart = datesInWeeks[weekIndex]?.[0];
+ const weekEnd = datesInWeeks[weekIndex]?.[6];
+ if (weekStart && weekEnd) {
+ const startMonth = dayjs(weekStart).month();
+ const endMonth = dayjs(weekEnd).month();
+ if (startMonth === endMonth) {
+ return dayjs(weekStart).format("MMMM YYYY");
+ }
+ return `${dayjs(weekStart).format("MMM")} - ${dayjs(weekEnd).format(
+ "MMM YYYY"
+ )}`;
+ }
+ return date.format("MMMM YYYY");
+ } else {
+ return date.format("ddd, D MMM YYYY");
+ }
+ },
+ [activeView, datesInWeeks, weekIndex]
+ );
+
useEffect(() => {
if (!config.enableShortcuts) return;
const handleShortcuts = (e: KeyboardEvent) => {
@@ -167,6 +192,7 @@ export const useCalendar = (
setActiveView,
increment,
decrement,
+ formatter,
createNewEvent,
updateEventState,
handleCellDblClick,
diff --git a/packages/frappe-ui-react/src/components/combobox/combobox.stories.tsx b/packages/frappe-ui-react/src/components/combobox/combobox.stories.tsx
index 949fc35c..7c0fa117 100644
--- a/packages/frappe-ui-react/src/components/combobox/combobox.stories.tsx
+++ b/packages/frappe-ui-react/src/components/combobox/combobox.stories.tsx
@@ -94,6 +94,17 @@ const groupedOptions = [
options: [
{ label: "Carrot", value: "carrot", icon:
🥕 },
{ label: "Broccoli", value: "broccoli", icon:
🥦 },
+ { label: "Tomato", value: "tomato", icon:
🍅 },
+ { label: "Lettuce", value: "lettuce", icon:
🥬 },
+ ],
+ },
+ {
+ group: "Proteins",
+ options: [
+ { label: "Chicken", value: "chicken", icon:
🍗 },
+ { label: "Fish", value: "fish", icon:
🐟 },
+ { label: "Beef", value: "beef", icon:
🥩 },
+ { label: "Tofu", value: "tofu", icon:
🪤, disabled: true },
],
},
];
@@ -129,11 +140,11 @@ export const SimpleStringOptions: Story = {
args: {
options: simpleOptions,
value: "",
- placeholder: "Select a person",
+ placeholder: "Select a person...",
onChange: () => {},
},
render: (args) => {
- const [val, setVal] = React.useState("");
+ const [val, setVal] = React.useState
("");
return (
@@ -150,11 +161,11 @@ export const ObjectOptions: Story = {
args: {
options: objectOptions,
value: "",
- placeholder: "Select a person",
+ placeholder: "Select a person...",
onChange: () => {},
},
render: (args) => {
- const [val, setVal] = React.useState("");
+ const [val, setVal] = React.useState
("");
return (
@@ -172,11 +183,11 @@ export const WithIcons: Story = {
args: {
options: optionsWithIcons,
value: "",
- placeholder: "Select an item",
+ placeholder: "Select an item...",
onChange: () => {},
},
render: (args) => {
- const [val, setVal] = React.useState("");
+ const [val, setVal] = React.useState
("");
return (