Le composant « v-calendar » est utilisé pour afficher des informations dans une vue quotidienne, hebdomadaire ou mensuelle. La vue quotidienne a des créneaux pour tous les éléments de jour ou de minuit, et la vue hebdomadaire et mensuelle a un emplacement pour chaque jour. Vous pouvez peut-être passer dans un ensemble d'événements et ils seront rendus au cours des jours et des heures appropriés.
Un calendrier a un type et une valeur qui détermine le type de calendrier affiché sur quelle durée. Ceci montre la configuration minimale minimale minimale minimale, un tableau d'événements avec les propriétés name, start et end. end est optionnel, il est par défaut à start. Si le start a une heure il est considéré comme un événement chronologique et sera affiché en conséquence dans les vues du jour. Un événement peut durer plusieurs jours et sera rendu en conséquence.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
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.
Applique la couleur spécifiée à la commande - cela peut être le nom de la couleur matérielle (par exemple success ou purple) ou la couleur css (#033 ou rgba(255, 0, 0, 0.5)). Vous pouvez trouver la liste des classes construites dans la page couleurs.
Applique la variante du thème foncé au composant. Vous pouvez trouver plus d'informations sur la documentation Material Design pour thèmes sombres.
Formate le jour de la chaîne de caractères du mois qui apparaît dans un jour à une locale spécifiée
La date de fin du calendrier (inclusivement) au format de YYYY-MM-DD. Cela peut être ignoré en fonction du type du calendrier.
Set property of event's category. Instead of a property a function can be given which takes an event and returns the category.
Une couleur d'arrière-plan pour tous les événements ou une fonction qui accepte un objet d'événement passé au calendrier pour retourner une couleur.
Définir la propriété de event's end timestamp.
La hauteur d'un événement en pixels dans la vue mois et en haut des vues jour.
Marge en bas pour l'événement
Si le bouton "plus" est affiché sur un calendrier avec trop d'événements dans une journée donnée. Cela dira quelque chose comme "5" et lorsque cliqué génère un événement click:more.
Le texte à afficher dans le bouton "plus" étant donné le nombre d'événements cachés.
Définissez la propriété du nom affiché de événement, ou une fonction qui accepte un objet d'événement passé au calendrier comme premier argument et un drapeau indiquant si le nom est pour un événement chronométré (vrai) ou un événement au cours d'une journée.
One of stack, column, or a custom render function
Une valeur en minutes permet de déterminer si deux événements en temps opportun doivent être placés dans la colonne à côté de l'autre ou doivent être traités comme un événement légèrement chevauchant.
Applique la directive v-ripple.
Définir la propriété de event's start timestamp.
Une couleur de texte pour tous les événements ou une fonction qui accepte un objet d'événement passé au calendrier pour retourner une couleur.
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.
Un tableau d'objets d'événements avec une propriété pour un timestamp de début et éventuellement un nom et un timestamp de fin. Si un timestamp de fin n'est pas donné, la valeur de début sera utilisée. Si aucun nom n'est donné, vous devez fournir une implémentation pour l'emplacement event.
Le premier intervalle à afficher dans la vue day. Si intervalMinutes est fixé à 60 et ceci est fixé à 9 la première fois dans la vue est de 9h.
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.
Si l'en-tête en haut de la vue day doit être visible.
Le nombre d'intervalles à afficher dans la vue day.
Formate l'heure de la chaîne de caractères qui apparaît dans l'intervalle de la vue day et week à la locale spécifiée
La hauteur d'un intervalle en pixels dans la vue day.
Le nombre de minutes que les intervalles sont dans la vue day. Un intervalle commun est de 60 minutes pour que les intervalles soient une heure.
Retourne le style CSS à appliquer à l'intervalle.
The width of the interval gutter on the left side in the day view.
Applique la variante claire du thème au composant.
La locale du calendrier.
Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4.
Le nombre maximum de jours à afficher dans le calendrier personnalisé si une journée end n'est pas définie.
Le nombre minimum de semaines à afficher dans la vue month ou week.
Formate la chaîne de mois qui apparaît dans un jour à une locale spécifiée
Remplacer le jour et l'heure qui est considéré maintenant. Ceci est au format de YYYY-MM-DD hh:mm:ss. Le calendrier est stylisé selon maintenant.
Si vrai, les intervalles dans la vue day seront de 9 heures par rapport à 09:00 AM
Si les versions courtes d'un mois doivent être utilisées (Jan vs Janvier).
Si les versions courtes d'une semaine doivent être utilisées (lun contre lundi).
Vérifie si un jour et une heure donnés doivent être affichés dans l'intervalle de la vue day.
Si le nom du mois doit être affiché le premier jour du mois.
Whether weeknumbers should be displayed when using the month view.
La date de début du calendrier (inclusivement) au format de YYYY-MM-DD. Cela peut être ignoré en fonction du type du calendrier.
Une chaîne qui est l'une des dates month, week, day, 4day, custom-weekly, et custom-daily. Les types personnalisés regardent les dates start et end passées au composant par opposition à la valeur`.
Une date au format de YYYY-MM-DD qui détermine quelle durée pour le calendrier.
Formate le jour de la chaîne de semaine qui apparaît dans l'en-tête à la locale spécifiée
Spécifie quels jours de la semaine à afficher. Pour afficher le lundi au vendredi seulement, une valeur de [1, 2, 3, 4, 5] peut être utilisée. Pour afficher une semaine à partir du lundi une valeur de [1, 2, 3, 4, 5, 6, 0] peut être utilisée.
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
}Le contenu placé dans une vue week ou month. L'objet jour et heure est passé à travers cette portée.
{
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
}Le contenu placé dans une vue day dans le conteneur d'intervalle défilé. L'objet jour et heure est passé à travers cette portée.
{
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
}
]
}Le contenu placé dans une vue day dans le conteneur en haut. L'objet jour et heure est passé à travers cette portée.
{
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
}Le contenu placé dans l'espace du mois dans la vue week ou month. L'objet jour et heure est passé à travers cette portée.
{
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
}Le contenu placé dans l'espace d'intervalle dans la vue day. L'objet jour et heure est passé à travers cette portée.
{
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
}
]
}La plage de jours affichée sur le calendrier a changé. Ceci est déclenché lors de l'initialisation. L'événement passé est un objet avec des objets de date de début et de fin.
{
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
}
}L'événement clique le jour du lien du mois. L'événement passé est l'objet jour et heure.
{
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
}
]
}L'événement clique le jour. L'événement passé est l'objet du jour.
{
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
}L'événement clique sur un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement clique sur le bouton « X more » sur les vues avec trop d'événements en un jour.
{
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
}L'événement clique à un moment précis dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement clique droit le jour du lien du mois. L'événement passé est l'objet jour et heure.
{
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
}
]
}L'événement clique droit le jour. L'événement passé est l'objet du jour.
{
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
}L'événement clic droit à un libellé d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement clic droit à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}Un alias à l'événement click:date utilisé pour supporter 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
}L'événement de la mousson le jour. L'événement est passé l'objet du jour.
{
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
}L'événement de la mousophonie à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement de la mousson à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mouseenter le jour. L'événement passé est l'objet du jour.
{
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
}L'événement mouseenter à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mouseenter à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mouseleave le jour. L'événement passé est l'objet du jour.
{
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
}L'événement mouseleave à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mouseleave à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mousemove le jour. L'événement passé est l'objet du jour.
{
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
}L'événement mousemove à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mousemove à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mouseup le jour. L'événement passé est l'objet du jour.
{
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
}L'événement mouseup à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement mouseup à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}Une des fonctions next, prev, et move a été appelée. L'événement passé est l'objet jour calculé pour le mouvement.
{
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
}L'événement touché sur un jour. L'événement passé est l'objet du jour.
{
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
}L'événement touché à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement touché à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement touchmove le jour. L'événement est passé l'objet du jour.
{
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
}L'événement touchmove à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement touchmove à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement touchstart le jour. L'événement est passé l'objet du jour.
{
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
}L'événement touchstart à un étiquette d'intervalle spécifique dans la vue day. L'événement passé est l'objet jour et heure.
{
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
}L'événement touchstart à un moment précis de la vue day. L'événement passé est l'objet jour et heure.
{
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
}Vérifie le changement des dates de début et de fin. Mise à jour et émet un événement de changement s'ils ont changé.
(): 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[]Convertit des minutes en une valeur de pixel sur l'axe y pour la vue day. Si la vue n'est pas day alors -1 est retournée.
(minutes: number): numberUne fonction générique qui déplace le calendrier suivant (si le montant est positif) ou précédent (si le montant est négatif).
(amount: number = 1): voidDéclenche l'événement d'entrée avec une date qui ferait progresser le calendrier dans le prochain timespan. Si le type est month il retournera un jour dans le mois suivant, si le type est 4day il retournera une date 4 jours après 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 | nullDéclenche l'événement d'entrée avec une date qui ferait progresser le calendrier dans l'horloge précédente. Si le type est month il retournera un jour dans le mois précédent, si le type est 4day il retournera une date 4 jours avant value/v-model, etc.
(amount: number = 1): voidDéfile la zone défilée dans la vue day à l'heure donnée. Si l'heure n'est pas dans un format valide ou si le calendrier n'est pas dans la vue day alors false est retourné.
(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): DateConvertit un temps en une valeur de pixel sur l'axe y pour la vue day. Si l'heure n'est pas dans un format valide ou si le calendrier n'est pas dans la vue day alors false est retourné.
(time: number | string | { hour: number, minute: number }, clamp: boolean = true): number | falsestringMises à jour maintenant et aujourd'hui dans le calendrier, peut-être mettre à jour les styles dans le calendrier.
(): 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;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Ceci est un exemple d'un calendrier d'événements avec des événements tout-jour et des événements minutés avec un type de week.
Ceci est un exemple de calendrier avec le contenu dans chaque intervalle et un type de day.
Les machines vous permettent de définir le contenu pour chaque jour, l'intervalle de temps pour les vues quotidiennes et les étiquettes différentes.
Il s'agit d'un exemple de planificateur avec des gestionnaires d'événements supplémentaires et des composants externes contrôlant l'affichage du calendrier.
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.
Prêt pour plus ? Continuez la lecture avec :