Official Vue.js wrapper for the year-calendar widget

Overview

v-year-calendar

Official Vue.js wrapper for the year-calendar widget. https://year-calendar.github.io/

CircleCI NPM

This library is also available for:

Pure javascript React.js

Installation

You can get the widget using the following methods:

  • From the GitHub repository
  • From the Node package manager, using the following command: npm install v-year-calendar
  • From Yarn, using the following command: yarn add v-year-calendar
  • From the CDN, using the following script:

Usage

You can create a calendar using the following javascript code :


   


Using props

You can specify props to customize the calendar:

">

   

Available props

Option name Description Type Default value
allow-overlap Specifies whether the user can select a range which overlapping an other element present in the datasource. boolean true
always-half-day Specifies whether the beginning and the end of each range should be displayed as half selected day. boolean false
context-menu-items Specifies the items of the default context menu. array []
custom-day-renderer Specify a custom renderer for data source. Works only with the style set to "custom". This function is called duringender for each day containing at least one event. Render function null
custom-data-source-renderer Specify a custom renderer for days. This function is called during render for each day. Render function null
data-source The elements that must be displayed on the calendar. array or function []
disabled-days The days that must be displayed as disabled. array []
disabled-week-days The days of the week that must be displayed as disabled (0 for Sunday, 1 for Monday, etc.). array []
display-disabled-data-source Specifies whether the data source must be rendered on disabled days. boolean false
display-header Specifies whether the calendar header is displayed. boolean true
display-week-number Specifies whether the weeks number are displayed. boolean false
enable-context-menu Specifies whether the default context menu must be displayed when right clicking on a day. boolean false
enable-range-selection Specifies whether the range selection is enabled. boolean false
hidden-week-days The days of the week that must not be displayed (0 for Sunday, 1 for Monday, etc.). array []
language The language/culture used for calendar rendering. String en
loading-template A custom loading template String null
max-date The date until which days are enabled. Date null
min-date The date from which days are enabled. Date null
round-range-limits Specifies whether the beginning and the end of each range should be displayed as rounded cells. boolean false
style Specifies the style used for displaying datasource ("background", "border" or "custom"). string border
week-start The starting day of the week. This option overrides the parameter define in the language file. number 0
year The year displayed by the calendar. number Current year

Available events

Event name Description Parameter
click-day Function fired when a day is clicked. { date, events }
day-context-menu Function fired when a day is right clicked. { date, events }
mouse-on-day Function fired when the mouse enter on a day. { date, events }
mouse-out-day Function fired when the mouse leaves a day. { date, events }
render-end Function fired when the calendar rendering is ended. { currentYear }
select-range Function fired when a date range is selected. { startDate, endDate }
year-changed Function fired when the visible year of the calendar is changed. { currentYear }

Language

If you want to use the calendar in a different language, you should import the locale file corresponding to the language you want to use, and then set the language prop of the calendar:

import Calendar from 'v-year-calendar';
import 'v-year-calendar/locales/v-year-calendar.fr';

OR

">


Then

">

   

The list of available languages is available here

What next

Check the examples page to discover all the functionalities.

Comments
  • disables array of date

    disables array of date

    hi, got a problem, to disable list of date, can someone help me which methods should i use, and can provide example?, here is currently what i'm doing

    :disabled-days = "holiday"

    holiday:['2020-05-05', '2020-04-04', '2020-03-03', '2020-03-02', '2020-01-01']

    basically this 5 dates should be disable, thanks. :)

    opened by syafieqq 2
  • Day of the week labels cannot be changed

    Day of the week labels cannot be changed

    How do I change the day and month labels? Example: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

    And in my opinion, I thought it would be nice to have a code sample that added to dataSource when I clicked on the calendar.

    opened by yukkes 2
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils and rollup-plugin-vue

    Bump loader-utils and rollup-plugin-vue

    Bumps loader-utils to 1.4.1 and updates ancestor dependency rollup-plugin-vue. These dependencies need to be updated together.

    Updates loader-utils from 1.4.0 to 1.4.1

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Updates rollup-plugin-vue from 4.7.2 to 6.0.0

    Release notes

    Sourced from rollup-plugin-vue's releases.

    Version 5.0.0

    Chores

    BREAKING CHANGES

    Changelog

    Sourced from rollup-plugin-vue's changelog.

    6.0.0 (2020-11-25)

    Features

    6.0.0-beta.11 (2020-11-02)

    Bug Fixes

    • add language fallback for template code (#407) (e334e8c)
    • avoid adding render function when no template in an SFC (#387) (6960203)
    • avoid conflicting filename for sourcemaps (#375) (4ec1315)
    • default render function name for ssr (#402) (714afd7)
    • support options for template block preprocessor render (#377) (3222451)

    Features

    • add watchers to imports within vue files (#385) (cd41410)

    6.0.0-beta.9 (2020-07-16)

    Features

    • distinguish options for different CSS preprocessing languages (#366) (860595e)

    6.0.0-beta.8 (2020-07-15)

    Bug Fixes

    • backwards compat with older versions of compiler-sfc (7cb9fa4)

    6.0.0-beta.7 (2020-07-15)

    Features

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by yyx990803, a new releaser for rollup-plugin-vue since your current version.


    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • How to change the color ?

    How to change the color ?

    Hello, I have a small issue. There are six default colors , '#2C8FC9', '#9CB703', '#F5BB00', '#FF4A32', '#B56CE2', '#45A597'. How can I change them to colors what I want ?

    opened by leyouBaloy 1
  • Bump minimist from 1.2.5 to 1.2.6

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Can't install a different way Laravel 8

    Can't install a different way Laravel 8

    -- app.js

    window.Vue = require('vue').default;
    ¥import Calendar from 'v-year-calendar';
    Vue.use(Calendar);
    
    

    --- calendar.blade.php

     <template>
        <Calendar></Calendar>
    </template>
    
    

    --- console error [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    (found in )

    opened by garethwatt 0
Releases(1.0.2)
Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Kalpa Madushan Perera 129 Aug 13, 2022
Convenient Vue wrapper for the add to calendar button snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars.

The Add to Calendar Button - optimized for Vue 3 This is a wrapper repository for the popular Add to Calendar Button, making it even more convenient,

Add to Calendar 3 Nov 9, 2022
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.5k Dec 18, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.7k Dec 31, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022
Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. ?? Table of Contents Collect statistics on the use of open source Install

NHN 195 Dec 6, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 425 Dec 27, 2022
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. ?? Installation npm i vue-cal Vue 3 npm i vue-cal@next Demo & Documentation antoniandre.github

Antoni 982 Dec 29, 2022
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. ?? 12

null 114 Dec 13, 2022
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

The Codest 76 Oct 5, 2022
Full Calendar based on Vue.js

Vue Spring Calendar It's a Vue based component which provides the functionality of a full-calendar that shows daily events. Installation npm install v

Brahim 40 Jun 8, 2022
A full 12-Month view calendar made by vue.js.

A full 12-Month view calendar made by vue.js.

null 90 Mar 23, 2021
Vue Mobile Calendar - 基于 Vue2的移动端日历插件

Vue Mobile Calendar - 基于 Vue2的移动端日历插件,仿钉钉签到日历,vue 钉钉日历, 自适应,周月切换

Hoyt 12 Sep 9, 2022
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

?? A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

飞翔的荷兰人 434 Jan 3, 2023
a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

jacques 37 Aug 10, 2022