Simple and clean calendar written in Vue.js

Related tags

Calendar vuejs calendar calendar-component vuejs-components
Overview

Vuelendar

Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here.

CircleCI

Features

Select single date

vuelendar-single

Select range of dates

vuelendar-range

Installation

npm install [email protected]

Usage

Import styles in your .vue file:

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

Register components:

import VRangeSelector from 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Use in template:

<v-range-selector
  :start-date.sync="range.start"
  :end-date.sync="range.end"
/>

<v-day-selector
  v-model="date"
/>

Disabling dates

Vuelendar allows two ways for disabling dates.

Using an array:

<v-day-selector
  v-model="date"
  disabled-dates="['2019-04-21', '2019-04-25']
/>
Will disable 21st April 2019 and 25th April 2019

Using an object to describe a range of dates:

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
    to: '2019-04-23'
  }"
/>
Will disable all dates from 21st April 2019 and 25th April 2019

Specifying only 'from' attribute will disable all dates past that date.

<v-day-selector
  v-model="date"
  disabled-dates="{
    from: '2019-04-21',
  }"
/>
Will disable all dates from 21st April 2019

Specifying only 'to' attribute will disable all dates before that date.

<v-day-selector
  v-model="date"
  disabled-dates="{
    to: '2019-04-21',
  }"
/>
Will disable all dates before 21st April 2019
Comments
  • Config: disabled dates

    Config: disabled dates

    Add disabled: Array to vl-day-selector properties and setup it.

    Example usage

    <vl-day-selector
  :disabled-dates="['2019-04-03', '2019-04-05']"
/>
    good first issue 
    opened by lusarz 11
  • Disabled Days not working for Range Selector

    Disabled Days not working for Range Selector

    When using the Range Selector the disabling of Dates is not working.

    <v-range-selector
  :start-date.sync="range.start"
  :end-date.sync="range.end"
   disabled-dates="['2019-04-21', '2020-09-25']"
  ></v-range-selector>

    image

    opened by 5chub1 4
  • Bitbucket error on npm run test:e2E

    Bitbucket error on npm run test:e2E

    Hello guys, When I run e2E tests, I get this error.

    Error: Command failed: npm install --only=production
npm ERR! Error while executing:
npm ERR! /usr/local/bin/git ls-remote -h -t ssh://[email protected]/lusarz/vuelendar.git
npm ERR!
npm ERR! [email protected]: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/valdoghafoor/.npm/_logs/2019-04-15T14_38_26_513Z-debug.log

    I think it comes from the fact that in mock-example, vuelendar is referenced in package.json with a bitbucket link.

      "dependencies": {
    "vuelendar": "git+ssh://[email protected]/lusarz/vuelendar.git"
  },
  "devDependencies": {
    "node-sass": "^4.11.0"
  },

    Is it on purpose ?

    opened by ValdoGhafoor 4
  • disabled dates are not working properly

    disabled dates are not working properly

    Hi, I am using your calendar component for one of my project, but it seems that the disabled-dates props are not working properly, it is disabling only "to" date

    <v-range-selector :start-date.sync="range.start" :end-date.sync="range.end" :disabledDates="{ to: '2020-02-24', from: '2020-02-12' }"/>

    this is the code which is I am using

    opened by f24aalam 2
  • Add lang=scss to style script in README.md

    Add lang=scss to style script in README.md

    I was unable to get the project to build without specifying the lang=scss attribute on the style tag. Adding this lang attribute allowed me to import vuelendar styles

    opened by nicktu12 0
  • Reduce Calendar

    Reduce Calendar

    Hello,

    Thank you for this plugin. I like it and it works !

    I would like to know if it was possible to permit to reduce the calendar when we click on the month ?

    Thank you !

    opened by aszymkiw 0
  • How to change the active month after initial selection?

    How to change the active month after initial selection?

    Setting default-date to a new value doesn't change the active month being displayed

    Here is what I tried https://codesandbox.io/s/vuelendar-simple-day-selector-obfxe?fontsize=14&hidenavigation=1&theme=dark

    opened by vumaasha 6
Owner
The Codest
In Code We Trust
The Codest
GitHub
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 10 Dec 29, 2022
A simple and sweet vue.js calendar

vue-sweet-calendar A simple and sweet vue.js calendar Features Showing Multiple-Events Fully customizable How to install npm install vue-sweet-calenda

Mahdi Aryayi 35 Oct 5, 2022
A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

Roman Ranniew 6 Jun 15, 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
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 Simple Calendar With Vue.js

vue_calendar Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build 0.

Роман 5 Aug 25, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 633 Nov 11, 2022
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 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
Localized, accessible calendar and datepicker for Vue with no external dependencies

Calendar Localized, accessible calendar and datepicker for Vue with no external dependencies. Installation $ npm install vue-a11y-calendar Pe

Rohan C 0 Feb 11, 2021
Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. 中文文档 ?? Live demo I

Kit 75 Nov 11, 2022
A responsive and customizable Github heatmap calendar.

vue-github-calendar A responsive and customizable Github heatmap calendar for Vue.js Usage Install npm install vue-github-calendar Import the componen

Antoine Carat 4 Mar 18, 2021
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
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
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
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