All Projects → arietimmerman → Vue Responsive Calendar

arietimmerman / Vue Responsive Calendar

A responsive calendar component for Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Responsive Calendar

Vue Schedule Calendar
日程调度日历。
Stars: ✭ 110 (+547.06%)
Mutual labels:  calendar, vue-component
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+4058.82%)
Mutual labels:  calendar, vue-component
Vue A11y Calendar
Accessible, internationalized Vue calendar
Stars: ✭ 255 (+1400%)
Mutual labels:  calendar, vue-component
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (+364.71%)
Mutual labels:  calendar, vue-component
Vue2 Calendar
vue 2.x calendar component
Stars: ✭ 477 (+2705.88%)
Mutual labels:  calendar, vue-component
Vue Pull To
⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件
Stars: ✭ 708 (+4064.71%)
Mutual labels:  vue-component
Vue Flatpickr Component
Vue.js component for Flatpickr datetime picker 📆
Stars: ✭ 773 (+4447.06%)
Mutual labels:  vue-component
Oncall
Oncall is a calendar tool designed for scheduling and managing on-call shifts. It can be used as source of dynamic ownership info for paging systems like http://iris.claims.
Stars: ✭ 702 (+4029.41%)
Mutual labels:  calendar
Material Calendarview
A Material design back port of Android's CalendarView
Stars: ✭ 5,755 (+33752.94%)
Mutual labels:  calendar
Electron Jalali Calendar
📆 A simple menubar app for Jalali calendar built by Electron and React
Stars: ✭ 16 (-5.88%)
Mutual labels:  calendar
React Native Calendars
React Native Calendar Components 🗓️ 📆
Stars: ✭ 7,363 (+43211.76%)
Mutual labels:  calendar
Calendar Phonegap Plugin
📅 Cordova plugin to Create, Change, Delete and Find Events in the native Calendar
Stars: ✭ 729 (+4188.24%)
Mutual labels:  calendar
Laravel Google Calendar
Manage events on a Google Calendar
Stars: ✭ 787 (+4529.41%)
Mutual labels:  calendar
Leantime
Leantime is a lean project management system for innovators. Designed to help you manage your projects from ideation to delivery.
Stars: ✭ 702 (+4029.41%)
Mutual labels:  calendar
Vue Calendar
🏆 基于 vue 2.0 开发的轻量,高性能日历组件
Stars: ✭ 828 (+4770.59%)
Mutual labels:  calendar
Vue Typer
Vue component that simulates a user typing, selecting, and erasing text.
Stars: ✭ 691 (+3964.71%)
Mutual labels:  vue-component
Vue
Vue implementation of Geist
Stars: ✭ 725 (+4164.71%)
Mutual labels:  vue-component
Angular Bootstrap Calendar
A port of the bootstrap calendar widget to AngularJS (no jQuery required!)
Stars: ✭ 803 (+4623.53%)
Mutual labels:  calendar
Vue Qrcode
QR code component for Vue.js
Stars: ✭ 724 (+4158.82%)
Mutual labels:  vue-component
Koyomi
Simple customizable calendar component in Swift 📆
Stars: ✭ 716 (+4111.76%)
Mutual labels:  calendar

A responsive calendar component for Vue.js

A responsive calendar component for Vue.js

Demo

Install

npm install --save vue-responsive-calendar

It's also available on unpkg: https://unpkg.com/vue-responsive-calendar

Usage

<html>
<head>

<!-- Vue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<script src="https://unpkg.com/[email protected]/dist/vue-responsive-calendar.browser.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vue-responsive-calendar.css">

</head>
<body>

<div id="app">

    <responsive-calendar force-monday-first="true" max-size="l" :events="events"></responsive-calendar>

</div>

<script>
var today = new Date();

const app = new Vue({

  el: '#app',
  data: {
    events: [{
        dateStart: new Date(today.getTime() + (21.5 * 60 * 60 * 1000)),
        dateEnd: new Date(today.getTime() + (22.5 * 60 * 60 * 1000)),
        styleClass: 'optional css class',
        summary: 'Here a summary',
        description: 'The description',
        location: 'Location'
      }
    ]

  }
});
</script>
</body>
</html>

Development

# install dependencies
npm install

# build for production with minification
npm run build

# develop
npm run devserver
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].