Calendar
The v-calendar component is used to display information in a daily, weekly, or monthly view. The daily view has slots for all day or timed elements, and the weekly and monthly view has a slot for each day.
Usage
A calendar has a type and a value which determines what type of calendar is shown over what span of time.
API
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Applies the dark theme variant
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.
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.
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.
Applies the light theme variant
The locale of the calendar.
The maximum number of days to display in the custom calendar if an end day is not set.
The minimum number of weeks to display in the month or week view.
Formats month string that appears in a day to specified locale
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.
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, and custom-daily. 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.
Formats day of the week string that appears in the header to specified locale
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.
Examples
Slots
Slots allow you to define the content for each day, time interval for the daily views, and various labels.
Events
This is an example of an event calendar with type of month. Click on an event to show event details.
Weekly
This is an example of an event calendar with all-day and timed events with a type of week.
Daily
This is an example of calendar with content in each interval slot and a type of day.
Features
This example allows you to explore many of the features of the v-calendar component.