dayspan-vuetify
A collection of components for Schedules and Calendars in DaySpan using Vuetify
This library strives to offer all the functionality any modern calendar app could support, and more. Not only can this be used for calendar apps, but any application where the user wishes to control when events should occur within a system.
Click here for a full app example
Every feature of the library can be toggled with local and global settings, and all text can be localized.
Status
This library is nearing functional completion (documentation on every component, prop, event, slot, method will have to wait) but is still subject to the occasional small change in API.
Usage
Install with npm install --save dayspan-vuetify
This library works best with Vuetify >= 1.1.9
Vue;
To see what options can be passed to the plugin, checkout this file.
Once done, you can access components like ds-event
, ds-calendar
, and ds-calendar-app
from any component (they are registered globally).
Example / Template
Checkout dayspan-vuetify-example for an example of a calendar app which saves events to localStorage.
Example Code
Install with npm install --save dayspan-vuetify
app.js
VueconfigproductionTip = false Vue; Vue; el: '#app'
App.vue
<template> <v-app id="dayspan" v-cloak> <ds-calendar-app :calendar="calendar"></ds-calendar-app> </v-app></template> <script>import { Calendar } from 'dayspan'; export default { name: 'app', data: () => ({ calendar: Calendar.months() })}</script> <style>body, html, #app, #dayspan { font-family: Roboto, sans-serif; width: 100%; height: 100%;}</style>
index.html
You Calendar App Title <!-- built files should be auto injected -->
Locales
This library supports multiple locales but the build only comes with en-us/en. The following code shows you how to add locales, changing the current locale, and updating a given locale:
// You can access $dayspan via Vue.$dayspan or this.$dayspan inside a component. $dayspan; // if en does not exist, this will have no affect$dayspan; // true was passed, so if the locale does not exist an error is thrown$dayspanlocales; // map of locale names to locale values // A locale is really just an object that overrides the values you specify found in $dayspan. A locale does not need to specify all possible values, just ones that should be overriden when setLocale is called. $dayspan; // Update locale (merge changes into locale)$dayspan;
French Locale
;;// dayspan-vuetify should already be loaded at this pointVue$dayspan;
Dutch Locale
;;// dayspan-vuetify should already be loaded at this pointVue$dayspan;
Catalan Locale
;;// dayspan-vuetify should already be loaded at this pointVue$dayspan;
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.