diff --git a/pages/index.js b/pages/index.js
index 5ce6034e..6c8dfc8c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -69,6 +69,9 @@ export default function Playground() {
                                 period: {
                                     start: new Date(new Date().setDate(new Date().getDate() - 3)),
                                     end: new Date()
+                                },
+                                onClick: (text, e) => {
+                                    console.log("on click", text, e);
                                 }
                             },
                             thisDay: {
diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index ae54b21c..bc650812 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -68,10 +68,14 @@ const ItemTemplate = React.memo((props: ItemTemplateProps) => {
     return (
         <li
             className={getClassName()}
-            onClick={() => {
+            onClick={e => {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 chosePeriod(props?.item.period);
+
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                props?.item?.onClick && props?.item.onClick(props?.item.text, e);
             }}
         >
             {children}
@@ -97,9 +101,13 @@ const Shortcuts: React.FC = () => {
                 return [[key, DEFAULT_SHORTCUTS[key]]];
             }
 
-            const { text, period } = customConfig as {
+            const { text, period, onClick } = customConfig as {
                 text: string;
                 period: { start: string; end: string };
+                onClick?: (
+                    text: string,
+                    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+                ) => void;
             };
             if (!text || !period) {
                 return [];
@@ -117,7 +125,8 @@ const Shortcuts: React.FC = () => {
                             period: {
                                 start: start.format(DATE_FORMAT),
                                 end: end.format(DATE_FORMAT)
-                            }
+                            },
+                            onClick: onClick
                         }
                     ]
                 ];
diff --git a/src/types/index.ts b/src/types/index.ts
index b9e561cd..be3ef8f1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -33,6 +33,7 @@ export interface ShortcutsItem {
         start: Date | string;
         end: Date | string;
     };
+    onClick?: (text: string, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 export type DateType = string | null | Date;