v-calendarコンポーネントは、日・週・月のビューで情報を表示するために使用されます。日次ビューには、終日または時間指定要素のスロットがあり、週次ビューおよび月次ビューには、各日のスロットがあります。必要に応じて、イベントの配列を渡すことができ、それらは適切な曜日と時間にわたってレンダリングされます。
カレンダーには、どのタイプのカレンダーがどの期間にわたって表示されるかを決定するタイプと値があります。これは、最低限の設定、 name、startおよび endプロパティを持つイベントの配列を示しています。 endはオプションで、デフォルトはstartです。 startに時間が設定されている場合は、時間指定イベントと見なされ、日表示されます。イベントは複数日にまたがることができ、それに応じてレンダリングされます。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
Specifies what categories to display in the category view. This controls the order of the categories as well. If the calendar uses events any categories specified in those events not specified in this value are dynamically rendered in the view unless category-hide-dynamic is true.
The number of days to render in the category view.
The category to place events in that have invalid categories. A category is invalid when it is not a string. By default events without a category are not displayed until this value is specified.
Sets whether categories specified in an event should be hidden if it's not defined in categories.
Set whether the category view should show all defined categories even if there are no events for a category.
指定された色をコントロールに適用します。利用できるのは色の名前 (たとえば、success または purple) または css 表記の色 (#033またはrgba(255, 0, 0, 0.5)) です。colors のページ で、組み込みクラスのリストが確認できます。
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
Formats day of the month string that appears in a day to a specified locale
The ending date on the calendar (inclusive) in the format of YYYY-MM-DD. This may be ignored depending on the type of the calendar.
Set property of event's category. Instead of a property a function can be given which takes an event and returns the category.
A background color for all events or a function which accepts an event object passed to the calendar to return a color.
イベントの終了時刻のプロパティを設定します。
The height of an event in pixels in the month view and at the top of the day views.
Margin bottom for event
Whether the more 'button' is displayed on a calendar with too many events in a given day. It will say something like '5 more' and when clicked generates a click:more event.
The text to display in the more 'button' given the number of hidden events.
eventの表示名のプロパティを設定するか、カレンダーに渡されたイベントオブジェクトを第一引数として受け取り、その名前が時限付きイベント(true) なのか、一日以上のイベントなのかを示すフラグを指定する関数を設定します。
One of stack, column, or a custom render function
A value in minutes that's used to determine whether two timed events should be placed in column beside each other or should be treated as slightly overlapping events.
v-ripple ディレクティブを適用します。
イベントの開始時刻のプロパティを設定します。
A text color for all events or a function which accepts an event object passed to the calendar to return a color.
If Dates or milliseconds are used as the start or end timestamp of an event, this prop can be a string to a property on the event that is truthy if the event is a timed event or a function which takes the event and returns a truthy value if the event is a timed event.
An array of event objects with a property for a start timestamp and optionally a name and end timestamp. If an end timestamp is not given, the value of start will be used. If no name is given, you must provide an implementation for the event slot.
The first interval to display in the day view. If intervalMinutes is set to 60 and this is set to 9 the first time in the view is 9am.
The first time to display in the day view. If specified, this overwrites any firstInterval value specified. This can be the number of minutes since midnight, a string in the format of HH:mm, or an object with number properties hour and minute.
If the header at the top of the day view should be visible.
The number of intervals to display in the day view.
Formats time of day string that appears in the interval gutter of the day and week view to specified locale
The height of an interval in pixels in the day view.
The number of minutes the intervals are in the day view. A common interval is 60 minutes so the intervals are an hour.
Returns CSS styling to apply to the interval.
The width of the interval gutter on the left side in the day view.
コンポーネントにlightテーマを適用します。
カレンダーのロケール
Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4.
end 日が設定されていない場合にカスタムカレンダーに表示する最大日数。
monthまたはweekビューに表示する最小週数。
日に表示される月の文字列を指定されたロケールでフォーマットします
Override the day & time which is considered now. This is in the format of YYYY-MM-DD hh:mm:ss. The calendar is styled according to now.
If true, the intervals in the day view will be 9 AM as opposed to 09:00 AM
Whether the short versions of a month should be used (Jan vs January).
Whether the short versions of a weekday should be used (Mon vs Monday).
Checks if a given day and time should be displayed in the interval gutter of the day view.
Whether the name of the month should be displayed on the first day of the month.
Whether weeknumbers should be displayed when using the month view.
The starting date on the calendar (inclusive) in the format of YYYY-MM-DD. This may be ignored depending on the type of the calendar.
A string which is one of month, week, day, 4day, custom-weekly, custom-daily, and category. The custom types look at the start and end dates passed to the component as opposed to the value.
A date in the format of YYYY-MM-DD which determines what span of time for the calendar.
ヘッダーに表示される曜日文字列を指定されたロケールにフォーマットします
Specifies which days of the week to display. To display Monday through Friday only, a value of [1, 2, 3, 4, 5] can be used. To display a week starting on Monday a value of [1, 2, 3, 4, 5, 6, 0] can be used.
The content placed in a category header for the category type. The category variable is null for events with invalid (non-string) categories.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The content that is placed in a week or month view. The day & time object is passed through this slots scope.
{
outside: boolean
index: number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content that is placed in a day view in the scrollable interval container. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The content that is placed in a day view in the top container. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The content that is placed in the day of the month space in the custom-weekly or month view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content that is placed in the day of the month space in the week, day, 4day, or custom-daily view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content that is placed in the month space in the week or month view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content placed in an event. This ignores the event-name prop.
{
event: any
eventParsed: {
input: any
start: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
startIdentifier: number
startTimestampIdentifier: number
end: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
endIdentifier: number
endTimestampIdentifier: number
allDay: boolean
index: number
category: string
},
day: {
outside: boolean
index: number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
outside: boolean
start: boolean
end: boolean
timed: boolean
singleline: boolean
overlapsNoon: boolean
formatTime: (time: VTimestamp, ampm: boolean): string
timeSummary: (): string
eventSummary: (): string
}The content that is placed in the interval space in the day view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The range of days displayed on the calendar changed. This is triggered on initialization. The event passed is an object with start and end date objects.
{
start: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
end: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
}The click event on the day of the month link. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The click event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The click event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The click event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The click event on the X more button on views with too many events in a day.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The click event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The click event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The right-click event on the day of the month link. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The right-click event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The right-click event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The right-click event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The right-click event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The right-click event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}An alias to the click:date event used to support v-model.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mousedown event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousedown event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mousedown event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mousedown event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousedown event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseenter event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseenter event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseenter event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mouseenter event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseenter event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseleave event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseleave event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseleave event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mouseleave event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseleave event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mousemove event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousemove event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mousemove event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mousemove event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousemove event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseup event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseup event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseup event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mouseup event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseup event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}One of the functions next, prev, and move was called. The event passed is the day object calculated for the movement.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchend event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchend event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchend event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchend event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchend event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchmove event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchmove event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchmove event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchmove event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchmove event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}dayのタッチスタート イベント。渡されたイベントは、dayオブジェクトです。
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchstart event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchstart event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchstart event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchstart event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}Checks for change in start and end dates. Updates and emits a change event if they have changed.
(): voidReturns the list of events seen on the current calendar where each element returned has the following properties:
- input: the event passed in the events prop.
- start: a CalendarTimestamp of the start timestamp parsed.
- startIdentifier: a number which represents the day the event starts on.
- startTimestampIdentifier: a number which represents the day and time the event starts on.
- end: a CalendarTimestamp of the end timestamp parsed.
- endIdentifier: a number which represents the day the event ends on.
- endTimestampIdentifier: a number which represents the day & time the event ends on.
- allDay: if this is an all-day event (has no time specified in the start/end on the event).
- index: the index of the event in the given array.
- category: the category of the event if the calendar type is category, otherwise false.
(): CalendarEventParsed[]Converts minutes to a pixel value on the y-axis for the day view. If the view is not day then -1 is returned.
(minutes: number): numberA generic function that moves the calendar next (if amount is positive) or previous (if amount is negative).
(amount: number = 1): voidTriggers the input event with a date that would progress the calendar to the next timespan. If the type is month it will return a day in the next month, if the type is 4day it will return a date 4 days after value/v-model, etc.
(amount: number = 1): voidA utility function which takes an event and returns the parsed version of that event.
(input: CalendarEvent, index: number = 0): CalendarEventParsedA utility function which takes timestamp input and returns a timestamp object.
(input: VTimestampInput, required?: false): CalendarTimestamp | nullTriggers the input event with a date that would progress the calendar to the previous timespan. If the type is month it will return a day in the previous month, if the type is 4day it will return a date 4 days before value/v-model, etc.
(amount: number = 1): voidScrolls the scrollable area in the day view to the given time. If the time is not in a valid format or if the calendar is not in the day view then false is returned.
(time: number | string | { hour: number, minute: number }): booleanConverts a time to a delta value for the day view. If the time is not in a valid format or if the calendar is not in the day view then false is returned. A delta value is typically between 0 and 1. If the time given is before the first interval then a negative number will be returned. If the timee given is after the last interval than a number greater than 1 will be returned.
(time: number | string | { hour: number, minute: number }): number | falseA utility function which takes timestamp and returns a Date.
(timestamp: CalendarTimestamp): DateConverts a time to a pixel value on the y-axis for the day view. If the time is not in a valid format or if the calendar is not in the day view then false is returned.
(time: number | string | { hour: number, minute: number }, clamp: boolean = true): number | falsestringUpdates now & today in the calendar, possibly updating the styles in the calendar.
(): void40px !default;0px 0px 3px 0px !default;right !default;10px !default;8px !default;-6px !default;4px !default;11px !default;3px 0px 0px 0px !default;$border-radius-root !default;1px !default;1px !default;12px !default;20px !default;10px !default;1px !default;12px !default;4px 0 0 0 !default;32px !default;36px !default;0px 0px 0px 0px !default;11px !default;0px 4px 0px 4px !default;24px !default;14.5px !default;以下に、簡単な例から複雑な例まで示します。
これは、タイプがweekの終日イベントおよび時間指定イベントを含むイベントカレンダーの例です。
これは、各 interval slotスロットにコンテンツが含まれ、タイプがdayのカレンダーの例です。
Slotを使用すると、各日のコンテンツ、日単位のビューの時間間隔、およびさまざまなラベルを定義できます。
これは、カレンダーの表示を制御する追加のイベントハンドラと外部コンポーネントを備えたプランナーの例です。
This is an example of an event calendar with a type of category that allows you to compare two schedules side-by-side.
This is an example of an calendar with a line for the current time.
This is an example of an event calendar where you can drag events, extend their length, and create events.