@quasar/quasar-ui-qcalendar

{ "props": { "day-height": { "type": [ "Number", "String" ], "category": "behavior", "desc": "The maximum height in pixels for the day height. Using 0 will make the rows variable height based on content.", "default": "0", "examples": [ "'80'", "100" ] }, "day-min-height": { "type": [ "Number", "String" ], "category": "behavior", "desc": "The minimum height to be used", "default": "40", "examples": [ "'80'", "100" ] }, "day-style": { "type": "Function", "category": "style", "desc": "Gets called to provide custom styling of a day", "__runtimeDefault": true, "default": "# null", "params": { "timestamp": { "type": "Timestamp", "tsType": "Timestamp", "desc": "A timestamp object associated with the day", "__exemption": [ "examples" ] } }, "returns": { "type": [ "Array", "Object", "String" ], "desc": "A Vue style object", "examples": [ "{ color: '#ccc' }" ] }, "applicable": [ "month" ], "examples": [ "(timestamp) => { return { 'background-color': '#c0c0c0' } }", "(timestamp) => dayStyle(timestamp)" ] }, "day-class": { "type": "Function", "category": "style", "desc": "Gets called to provide custom styling (via classes) of a day", "__runtimeDefault": true, "params": { "timestamp": { "type": "Timestamp", "tsType": "Timestamp", "desc": "A timestamp object associated with the day", "__exemption": [ "examples" ] } }, "returns": { "type": [ "Array", "Object", "String" ], "desc": "A Vue style object of classes", "examples": [ "{ 'q-range': true }" ] }, "default": "# null", "applicable": [ "month" ], "examples": [ "(timestamp) => { return { 'q-range': true } }", "(timestamp) => getDayClass(timestamp)" ] }, "weekday-style": { "type": [ "Function" ], "category": "style", "desc": "Gets called to provide custom styling of a weekday", "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope data passed to the function", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "A timestamp object associated with the weekday", "__exemption": [ "examples" ] }, "columnIndex": { "type": "Number", "desc": "The index of the column", "__exemption": [ "examples" ] }, "activeDate": { "type": "Boolean", "desc": "True if the active date" }, "droppable": { "type": "Boolean", "desc": "Value is set by return value of a drag and drop function" } } } } } }, "returns": { "type": "Object", "desc": "A Vue style object", "examples": [ "{ color: '#ccc' }" ] }, "default": "# null", "__runtimeDefault": true, "examples": [ "(data) => { return { 'background-color': '#c0c0c0' } }", "(data) => getWeekdayStyle(data)" ] }, "weekday-class": { "type": "Function", "category": "style", "desc": "Gets called to provide custom styling (via classes) of a weekday", "__runtimeDefault": true, "default": "# null", "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope data passed to the function", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "A timestamp object associated with the weekday", "__exemption": [ "examples" ] }, "columnIndex": { "type": "Number", "desc": "The index of the column", "__exemption": [ "examples" ] }, "activeDate": { "type": "Boolean", "desc": "True if the active date" }, "droppable": { "type": "Boolean", "desc": "Value is set by return value of a drag and drop function" } } } } } }, "returns": { "type": "Object", "desc": "A Vue style object of classes", "examples": [ "{ 'my-class': true }" ] }, "examples": [ "(data) => { return { 'my-class': true } }", "(data) => getWeekdayClass(data)" ] }, "day-padding": { "type": "String", "category": "style", "desc": "Overrides the padding to be used for a day element. You can use any CSS padding format", "__runtimeDefault": true, "default": "'48px 2px'", "applicable": [ "month" ], "examples": [ "'20px 5px'" ] }, "min-weeks": { "type": [ "Number", "String" ], "category": "model", "desc": "The minimum number of weeks to be displayed", "default": "1", "applicable": [ "month" ], "examples": [ "2" ] }, "short-month-label": { "type": "Boolean", "category": "style", "desc": "Makes the month label short. January becomes Jan...", "applicable": [ "month" ] }, "show-work-weeks": { "type": "Boolean", "category": "content", "desc": "Show work weeks", "applicable": [ "month" ] }, "show-month-label": { "type": "Boolean", "category": "content", "desc": "Shows the month label - this occurs on the 1st of the month", "default": "true", "applicable": [ "month" ] }, "show-day-of-year-label": { "type": "Boolean", "category": "content", "desc": "Show the day of the year - this occurs in the top right of each day element. If show-month-label is true, then that day is skipped", "applicable": [ "month" ] }, "enable-outside-days": { "type": "Boolean", "category": "behavior", "desc": "By default, outside days are disabled in month view. Use the property to enable them.", "applicable": [ "month" ] }, "no-outside-days": { "type": "Boolean", "category": "behavior", "desc": "Do not display the labels of outside days", "applicable": [ "month" ] }, "hover": { "type": "Boolean", "category": "style", "desc": "Changes the style `selected-start-end-dates` selection when in `mini-mode`. Typically, set this to `true` on `mousedown` and `false` on `mouseup`", "applicable": [ "month (mini-mode)" ] }, "mini-mode": { "type": [ "Boolean", "String" ], "category": "behavior", "values": [ "true", "false", "'auto'" ], "desc": "When `true` puts the calendar into mini-mode. When `auto`, then the property `breakpoint` is used to determine when the calendar will be put into mini-mode", "applicable": [ "month" ], "examples": [ "true", "'auto'" ] }, "breakpoint": { "type": [ "String", "Number" ], "category": "behavior", "values": [ "'xs'", "'sm'", "'md'", "'lg'", "'xl'" ], "desc": "This property is used when `mini-mode` is set with `auto`", "default": "'md'", "applicable": [ "month" ], "examples": [ "'sm'", "'md'" ] }, "month-label-size": { "type": "String", "category": "style", "values": [ "'xs'", "'sm'", "'md'", "'lg'", "'xl'" ], "desc": "This property is used change the size of the month label button. This property is ignored when `mini-mode` is set to true", "default": "'sm'", "applicable": [ "month" ], "examples": [ "'sm'", "'md'" ] } }, "events": { "mini-mode": { "desc": "Event occurs when switching to/from mini-mode, when the `breakpoint` property is set to `auto`", "applicable": [ "Month" ], "params": { "value": { "type": "Boolean", "desc": "If switched to `mini-mode`, then the value is `true`, otherwise it is `false" } } }, "click-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "contextmenu-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "mousedown-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "mouseup-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "mouseenter-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "mouseleave-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "mousemove-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "touchstart-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "touchend-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } }, "touchmove-day": { "desc": "Occurs on day", "applicable": [ "month" ], "params": { "data": { "type": "Object", "desc": "The data passed to the function", "__exemption": [ "examples" ], "definition": { "scope": { "type": "Object", "desc": "The scope object", "__exemption": [ "examples" ], "definition": { "timestamp": { "type": "Object", "tsType": "Timestamp", "desc": "The timestamp object", "__exemption": [ "examples" ] }, "outside": { "type": "Boolean", "desc": "true if this is an outside day" }, "miniMode": { "type": "Boolean", "desc": "true if calendar is currently in mini-mode" } } }, "event": { "type": "Object", "desc": "JS event object", "__exemption": [ "examples" ] } } } } } } }