A calendar component for vue.js

Zhengbin Sun

Last update: Aug 2, 2022

Related tags

Calendar vue-calendar

Overview

vue-calendar

A calendar component for vue.js compitable with vue 2.x

examples

website: GilbertSun/vue-calendar

install & use

npm install vue-calendar-mobile

# for 1.x
npm install vue-calendar-mobile@1

use in a vue component

<template>
<calendar :view="'month'"></calendar>
</template>

<script>
import Calendar from 'vue-calendar-mobile'

export default {
  components: {
    Calendar
  }
}
</script>

Develope

you want to change the source and see what's you change

$ make dev

it will server a locale demo page in http://localhost:8080

then you change change the source code in src directory

refresh the demo page

$ make deploy

publish to npm

$ make pub

API

prop	type	description	example	default value
currentView	Object	cureent shown view	{}, simple pass a clean object	`{start: Object, end: Object}`
decorate	Object	control the date to have a dot docorate	`{'2016-08-09': true}`	{}
sub	Object	control the date sub decorate	`{'2016-08-09': {content: '休', color: '班'}}}`	{}
i18n	String	control week name language	`'zh-cn', 'en'`	`'zh-cn'`
indicator	Object	control the header indicator default the year and month	`{title: ..., main: ...}`	`{}`
selected	Date	current select date	new Date(2016, 11, 6)	new Date()
startMonday	Boolean	is the week start from monday, true for monday and false for sunday	true	false
startDate	Date	this start Date to control the first view to show startDate	new Date(2016, 11, 6)	new Date()
view	String	show to month view of week view	'month', 'week'	'month'
centerHeader	Boolean	control the calendar header position	true	false

A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

55 May 2, 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

1.5k Dec 18, 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

3.7k Dec 31, 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

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

195 Dec 6, 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

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

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

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

40 Jun 8, 2022

Comments

More documentation needed
For example

[x] screentshot,

[x] configuration,

[x] demo

[ ] further clarification, e.g. for mobile only?

I think I need all these to judge my star :smile:
opened by jizusun 6
startMonday

Thank you for your component. When I used it ,I found a weird question that "startMonday" always is true even though I set default as false. But if I changed "startMon" or any word ,it would work successfully. I do not know why.

opened by xiaowoniu22 4
vue 2.0 报错？确定支持vue 2.0 吗？

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selected" (found in component )

opened by SidFeng 3