Home
Date & Time
Clean And Lightweight Calendar Plugin For Vue.js – V-Calendar

Clean And Lightweight Calendar Plugin For Vue.js – V-Calendar

nathanreyes Last Updated: 6 months ago

A lightweight, dependency-free plugin for building attributed calendars in Vue.js.

Features:

  • Display clean and simple attributed calendars
  • Built-in support for various attributes, including
    • highlighted regions
    • indicators
    • day content styles (hovered and non-hovered)
  • Apply attributes over multiple dates or date ranges (start & end dates)
  • Date-picker supporting all native v-calendar props/events with various selection modes
    • single date
    • multiple dates
    • date range
  • Extensive API with custom slot support
  • Responsive and mobile-friendly
    • Handles taps for date selection
    • Handles swipes for month navigation

Preview:

V-Calendar

Changelog:

v3.0.2 (03/26/2023)

  • Bugfixes

v3.0.1 (03/16/2023)

  • Add missing type=button attribute to navigation buttons

v3.0.0 (03/16/2023)

  • Add view prop to display weekly calendars
  • Add initial-page and initial-page-position props
  • Deprecate from-page, from-date, to-page, to-date props in lieu of initial-page
  • Add moveBy method to move by number of pages
  • Emit native event as 2nd argument for day and week events (dayclick, daymouseenter, daymouseleave, dayfocusin, dayfocusout, daykeydown, weeknumberclick)
  • Rename SetupCalendar export to setupCalendar
  • Add rules prop for limiting hours, minutes, seconds and milliseconds
  • Deprecate valid-hours and minute-increment props in lieu of rules
  • Deprecate modelConfig prop in lieu of number and string model modifiers
  • Soft deprecate is-range prop in lieu of range model modifier
  • Add time-accuracy prop to allow selecting seconds and milliseconds components in time picker
  • Major redesign of TimePicker to fit more time component selections
  • Deprecate update-layout slot prop as it is no longer needed

v2.4.1 (02/05/2022)

  • Fix valid-hours and minute-increment props for input slot usage
  • Fix bug where date picker would reset null dates
  • Allow separate valid-hours and minute-increment for range dates

v2.4.0 (02/03/2022)

  • Add valid-hours prop
  • Bugfixes

v2.3.4 (10/07/2021)

  • Fix broken removal of event handlers in calendar and date picker
  • Dependabot updates
  • Remove custom click detection handlers for Mobile Safari

v2.3.1 (07/26/2021)

  • Bugfix

v2.3.0 (03/14/2021)

  • Fix trim-weeks missing dates if firstDayOfWeek !== 1
  • Fix input format on calendar hide
  • Fix date range normalization for time and input updates
  • Add show-weeknumbers prop (Boolean | String) with support for left, left-outside, right or right-outside positions
  • Add weeknumberclick event that emits week data on click

v2.2.4 (02/28/2020)

  • Set inheritAttrs to false for calendar pane component
  • Fix null dates for time picker when mode === ‘time’
  • Add modelConfig.fillDate parameter to fill missing date parts
  • Provide popover options as defaults for showPopover, hidePopover, togglePopover

v2.2.3 (02/01/2020)

  • Fix on-bottom class when trim-weeks prop is used
  • Fix date range clearing and page adjustment when end date is missing

v2.2.2 (01/27/2020)

  • Update lodash to fix security vulnerability

v2.2.1 (01/24/2020)

  • Fix bug with disabling certain month and year items if any min or max props are provided.
  • Disables navigation to next and previous groups of month and year items when needed.

v2.2.0 (01/17/2020)

  • Set timezone offset to 0 for ISO dates that end with Z
  • Adjust date timezone to UTC when formatting with masks that end with Z
  • Use a default ISO mask for string dates that matches the browser: YYYY-MM-DDTHH:mm:ss.SSSZ
  • Add ZZ, ZZZ and ZZZZ mask tokens
  • Add unit tests for DatePicker and TimePicker with string dates

v2.1.6 (01/01/2020)

  • Fix time parse for browsers < Safari 14

v2.1.5 (12/28/2020)

  • Fix css for nav current month, title & weekday labels

v2.1.4 (12/26/2020)

  • Fix popover.keepVisibleOnInput
  • Patch Media Query addEventListener for browsers < Safari 14, < Edge 16
  • Fix focus styles in navigation pane
  • Remove dedicated Grid component to reduce DOM elements and package size
  • Remove unnecessary JS/CSS
  • Tighten min pane width to 250px

v2.1.3 (12/18/2020)

  • Bug Fixes
  • Shortens picker popover hide delay to prevent multiple rapid date selections

v2.1.2 (12/14/2020)

  • Fix container height in flex containers
  • Fix disabled date detection
  • Fix timezone offset calculation

v2.1.1 (11/18/2020)

  • Fixes aria-label for calendar days
  • Adds trim-weeks prop for both calendars and date pickers
  • Adds force option to move and focusDate methods
  • Adds move and focusDate method wrappers to date picker
  • Convert move and focusDate to promise-based methods for compatibility
  • Adds showDelay and hideDelay options for date picker popover
  • Adds showDelay, hideDelay and transition options for attribute popovers

11/01/2020

  • v2.0.2

10/25/2020

  • v2.0.1

10/24/2020

  • v2.0.0

10/16/2020

  • v1.1.1

06/17/2020

  • v1.0.8

Download Details:

Author: nathanreyes

Live Demo: https://vcalendar.netlify.com/

Download Link: https://github.com/nathanreyes/v-calendar/archive/master.zip

Official Website: https://github.com/nathanreyes/v-calendar

Install & Download:

$npm install v-calendar

Related Posts

Tags:

Add Comment