repository·main·Indexed 23 days ago
https://github.com/antoniandre/vue-cal-v4A full-featured Vue.js calendar component with no external dependencies. Version 4.10.2 provides a robust calendar interface with configurable views (years, year, month, week, day), event management, and extensive customization via props and slots. It includes programmatic control through $refs for methods like switchView and createEvent, as well as a drag-and-drop module based on the HTML5 Drag and Drop API (not supported on touch devices).
Comprehensive documentation, usage examples, and live demos for Vue Cal v4 can be found at the official documentation site.
https://antoniandre.github.io/vue-cal-v4Vue Cal provides several slots to customize the UI of different parts of the calendar:
arrow-prev / arrow-next: Customize the navigation arrows in the header.today-button: Customize the 'Today' button.title: Customize the calendar title (receives :title and :view props).weekday-heading: Customize the day headings (receives :heading and :view props).split-label: Customize labels for day splits (receives :split and :view.id props).event: Customize the rendering of an event (receives :view and :event props).time-cell: Customize the time labels in the time column (receives :hours and :minutes props).week-number-cell: Customize the week number display (receives :week prop).cell-content: Customize the content inside a calendar cell (receives :cell, :view, :go-narrower, and :events props).events-count: Customize the display of the number of events in a cell (receives :view and :events props).no-event: Customize the display when a cell has no events (receives no props).The drag and drop functionality in Vue Cal relies on the native HTML5 Drag and Drop API.
Key Behaviors:
snapToTime option is enabled on the Vue Cal instance, dropped events will automatically snap to the nearest time interval defined by that value.previous, next, today, or specific view buttons like month) will trigger a view change if held for a certain duration (default 800ms).years, year, or month views, holding a drag over a cell will automatically trigger a transition to a narrower view (e.g., from year to month).Limitations:
The vue-cal component is the main entrypoint for the calendar. It is highly configurable through props. Key configuration categories include:
activeView (default: 'week'), disableViews (array of views to hide), selectedDate (current focus date).events (array of event objects), editableEvents (boolean or object for editing permissions), onEventClick, onEventCreate, onEventDblclick (callback functions).time (boolean, default: true), timeStep (minutes, default: 60), timeFrom/timeTo (minutes), twelveHour (boolean), showAllDayEvents (boolean or string), showWeekNumbers (boolean).minCellWidth (number), minSplitWidth (number), minEventWidth (number), hideWeekends (boolean), startWeekOnSunday (boolean), small (boolean), xsmall (boolean).dragToCreateEvent (boolean), cellClickHold (boolean), cellContextmenu (boolean), clickToNavigate (boolean), dblclickToNavigate (boolean).updateDateTexts() on the component instance via $refs. This method uses the texts prop currently provided to the component.event-resizing event. This allows for real-time UI updates or validation during the resize interaction.editableEvents.title is enabled, users can edit event titles directly in the calendar. When the editing is finished (on blur), the component emits the event-title-change event. This event provides the updated event object and the previous title.event-change event is emitted when an event is modified (e.g., via title editing). It provides the cleaned event object and the original event state (including the old title).The vue-cal component emits several events that allow you to react to user interactions:
view-change: Emitted when the view changes. Returns an object containing view, startDate, endDate, and view-specific properties like firstCellDate/lastCellDate for month view.update:activeView: Emitted when the activeView prop is updated (useful with v-model).event-change: Emitted when an event is modified (e.g., via resizing). Returns the new event and the originalEvent.event-duration-change: Emitted when an event's duration is changed. Returns the new event, the oldDate, and the originalEvent.event-drag-create: Emitted when a new event is successfully created via dragging.When using the drag and drop module, Vue Cal emits two specific events when an event is successfully moved or updated via dragging. You can listen to these to sync your backend or application state.
event-drop: Emitted when an event is dropped into a cell or split. It provides details about the movement and the original event data.event-change: Emitted when an event's properties are modified via dragging.event-drop payload:
event: The updated event object (cleaned via cleanupEvent).oldDate: The original start date of the event.newDate: The new start date of the event.originalEvent: The original event data (useful if the event was external).oldSplit (optional): The previous split index/ID.newSplit (optional): The new split index/ID.external: Boolean indicating if the event originated from outside a Vue Cal instance.event-change payload:
event: The updated event object.originalEvent: The original event data.You can create a new event in the calendar's internal memory using the createEvent(dateTime, duration, eventOptions) method via $refs.
dateTime: A String or Date representing the start time.duration: The duration of the event in minutes.eventOptions: An object containing any additional event properties (e.g., title, class, color).Returns the created event object.