A collection of components that visualizes DaySpan Calendars and Schedules using Vuetify

Last update: Jun 28, 2022

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.

Current documentation

Notice

  • This library uses v-html in a few places (to display event details for example) so you must sanitize your own data against XSS vulnerabilities.

Usage

Install with npm install --save dayspan-vuetify

This library works best with Vuetify >= 1.1.9

import DaySpanVuetify from 'dayspan-vuetify'

Vue.use( DaySpanVuetify, {
  // options is vue definition, the resulting reactive component is stored in components as this.$dayspan or Vue.$dayspan
  data: {
    // data or computed to override
  },
  computed: {
    // data or computed to override
  },
  methods: {
    // methods to override
  }
});

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

import Vue from 'vue'
import Vuetify from 'vuetify'
import DaySpanVuetify from 'dayspan-vuetify'
import App from './App.vue'

import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'dayspan-vuetify/dist/lib/dayspan-vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify);

Vue.use(DaySpanVuetify, {
  methods: {
    getDefaultEventColor: () => '#1976d2'
  }
});

new Vue({
  el: '#app',
  render: h => h(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
">
>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>You Calendar App Titletitle>
    <style> [v-cloak] { display: none; } style>
  head>
  <body>
    <div id="app">div>
    
  body>
html>

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.setLocale('en'); // if en does not exist, this will have no affect
$dayspan.setLocale('fr', true); // true was passed, so if the locale does not exist an error is thrown
$dayspan.locales; // 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.addLocale('es', {
  promptLabels: {
    // Are you sure you want to remove this event?
    actionRemove: '¿Estás seguro de que quieres eliminar este evento?'
  }
});

// Update locale (merge changes into locale)
$dayspan.updateLocale('en', {
  patterns: {
    lastDay: (day) => 'Final day of the month'
  }
});

French Locale

import fr from 'dayspan-vuetify/src/locales/fr';
import Vue from 'vue';
// dayspan-vuetify should already be loaded at this point
Vue.$dayspan.addLocales(['fr', 'fr-CA', 'fr-BE', 'fr-CH', 'fr-FR', 'fr-LU', 'fr-MC'], fr);

Dutch Locale

import nl from 'dayspan-vuetify/src/locales/nl';
import Vue from 'vue';
// dayspan-vuetify should already be loaded at this point
Vue.$dayspan.addLocales(['nl', 'nl-NL', 'nl-BE'], nl);

German Locale

import de from 'dayspan-vuetify/src/locales/de';
import Vue from 'vue';
// dayspan-vuetify should already be loaded at this point
Vue.$dayspan.addLocales(['de', 'de-DE', 'de-CH', 'de-AT', 'de-BE', 'de-IT', 'de-LI', 'de-LU'], de);

Catalan Locale

import ca from 'dayspan-vuetify/src/locales/ca';
import Vue from 'vue';
// dayspan-vuetify should already be loaded at this point
Vue.$dayspan.addLocales(['ca', 'ca-ES'], ca);

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

GitHub

https://github.com/ClickerMonkey/dayspan-vuetify
Comments
  • 1. Clicking on a day does not open the create event menu

    I just got the newest code (0.2.3) and ran the sample code. There is no errors when I do npm run serve but in the calendar when I click on a day this comes up calender

    Reviewed by anbcodes at 2018-08-07 12:40
  • 2. Documentation for calendar embedded in app

    Any documentation, guide or hint on how to embed a calendar inside an existing app? I see that your example app rebuild the entire layout (ds-calendar-app instantiate toolbar, drawers, etc., whereas I already have them), which is the base element that I should add in my existing app?

    Reviewed by lucafaggianelli at 2018-09-23 15:46
  • 3. Effecient way to load events

    On prev and next, I am adding events to calendar. There are around 60-70 events per month. Adding events one by one in loop like this

    this.calendar.addEvent(event)
    

    takes a long time and hangs the browser.

    Adding events all at once with this code

    this.calendar.addEvents(events)
    

    is better but it still hangs the browser for few seconds. I was trying to use the progress bar to wait for the load. event the progress bar stops for few seconds, while the events load.

    Is there a more efficient way to load events?

    Reviewed by developernaren at 2018-09-11 08:56
  • 4. Not sure how to customize

    I am looking to customize calendar. I need to add and remove some fields in the create event pop up and load event when the calendar starts, But it is not mentioned anywhere in the doc and am very confused.

    Are there any docs or links I can get started on?

    You can publish the code you are using for the example somewhere, that can be helpful to me.

    Reviewed by developernaren at 2018-08-08 11:30
  • 5. How to save event times to database

    How could i save event times to database to use them for loading state from database in future? Is there some helpers in schedule object to get formatted date?

    I can get schedule.duration and schedule.durationUnit. But what about date timestamp?

    Reviewed by pwnz22 at 2018-11-02 06:16
  • 6. How to set another first day of the week?

    Hi,

    i've been searching the code to found the settings for week or month view. More in particular, how to set the first day of the week to a monday instead of a sunday?

    Reviewed by webwakko at 2018-08-20 13:09
  • 7. ds-calendar-app in a div container

    This template is wrapped in another component.

    So I need the calendar APP to be restricted to display within the div, but for some reason, it keeps injecting the files into the main '#app'

    <template>
        <div id="calendarContainer">
            <v-container id="dayspan" v-cloak>
                <ds-calendar-app :calendar="calendar"></ds-calendar-app>
            </v-container>
        </div>
    </template>
    
    <script>
        import { Calendar } from 'dayspan';
    
        export default {
            name: 'calendarContainer',
            data: () => ({
                calendar: Calendar.months()
            }),
            mounted(){
    
            }
        }
    </script>
    
    <style>
        #calendarContainer, #dayspan {
            font-family: Roboto, sans-serif;
            width: 100%;
            height: 100%;
        }
    </style>
    
    

    Also, I am getting that in console.

    [Vuetify] Unable to locate target [data-app]
    
    Reviewed by deep0410 at 2018-11-13 18:55
  • 8. Events displaying on same line

    Hi,

    Thanks for your calendar, it's very powerfull and complete, but I've got a pretty annoying problem.

    When I've created a new event on a day which already have an event, the new one go one the same line than the other, so we can't see the two events on this day.

    I was thinking it was my dev, but I've tryed on your example and I arrived to reproduce the same bug just when we create two events a day.

    I join to this a picture because I'm not sure to be really clear.

    sans titre

    Thank you !

    Regards, Audric

    Reviewed by AudricCh at 2018-11-02 15:58
  • 9. Not finding any vuetify components

    I'm using dayspan-vuetify version "^0.3.6", and vuetifyversion "^1.3.3". I've followed the installation instructions, but I'm getting a lot of vue warnings:

    [Vue warn]: Unknown custom element: <v-navigation-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <DsCalendarApp>
           <Temp> at src/views/Temp.vue
             <VApp>
               <App> at src/App.vue
                 <Root>
    

    This warning appears for a lot of different components:

    • v-tooltip
    • v-btn
    • v-toolbar-side-icon
    • v-toolbar-title
    • v-toolbar ... And dozens more. The calendar appears completely unstyled.

    This is my vuetify.js import file:

    import Vue from "vue";
    import Vuetify from "vuetify/lib";
    import DaySpanVuetify from "dayspan-vuetify";
    
    import "vuetify/dist/vuetify.min.css";
    import "material-design-icons-iconfont/dist/material-design-icons.css";
    import "dayspan-vuetify/dist/lib/dayspan-vuetify.min.css";
    
    Vue.use(Vuetify, {
      iconfont: "fa"
    });
    
    Vue.use(DaySpanVuetify, {
      methods: {
        getDefaultEventColor: () => "#1976d2"
      }
    });
    

    Which I import into my main.js file:

    import "./plugins/vuetify";
    

    I'm mounting the calendar as follows:

    <template>
      <v-container>
        <ds-calendar-app :calendar="calendar" />
      </v-container>
    </template>
    
    <script>
    import { Calendar } from "dayspan";
    
    export default {
      name: "Temp",
      data: () => ({
        calendar: Calendar.months()
      })
    };
    </script>
    
    <style>
    body,
    html,
    #app,
    #dayspan {
      font-family: Roboto, sans-serif;
      width: 100%;
      height: 100%;
    }
    </style>
    

    I'm not sure why I'm getting these warnings. I have vuetify installed and working correctly in the rest of my application, and have been able to use it without any difficulty.

    My only thought is that I am running into some library collisions, as I have the bootstrap and elementUI frameworks installed (I'm currently transitioning to vuetify, and I'm working on removing these other frameworks). Is it possible those frameworks are interfering with this library?

    Reviewed by andrewhl at 2018-10-27 20:00
  • 10. Week view headers and body misaligned.

    I noticed that the headers in the week view are a bit misaligned from the body. I think I may have a quick fix to that.

    Since we cannot for sure state what the width of a scroll bar on any random browser on any random computer is, I suggest we measure this out:

    getScrollbarWidth() {
                    return window.innerWidth - document.documentElement.clientWidth;
                }
    

    With this we can add a padding to the row in the header to replicate something like this:

    <div class="ds-week-header" v-bind:style="{ padding-right: getScrollbarWidth() + 'px' }"> ... </div>

    Reviewed by sonoftheweb at 2018-08-21 00:51
  • 11. [Vuetify] Multiple instances of Vue detected

    [Vuetify] Multiple instances of Vue detected See https://github.com/vuetifyjs/vuetify/issues/4068

    You probably need to update the version of vuetify to the 1.2.1.

    Reviewed by rohsyl at 2018-08-30 12:03
  • 12. Dayspan with Vuejs v3

    I am upgrading a large app to Vuejs, V3. I realized that Vuetify did not support V3 and instead of waiting for that, I rewrote the interface using Element Plus. I have been working through issue by issue (v-for and v-if incompatibility, etc) but wondering if you have starting looking at V3 and specifically how the javascript/plugins would be converted?

    Reviewed by bobbarnard0205 at 2022-05-04 18:27
  • 13. Bump moment from 2.7.0 to 2.29.2

    Bumps moment from 2.7.0 to 2.29.2.

    Changelog

    Sourced from moment's changelog.

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    TypeScript fixes and many locale improvements

    2.25.3

    • Release May 4, 2020

    Remove package.json module property. It looks like webpack behaves differently for modules loaded via module vs jsnext:main.

    2.25.2

    • Release May 4, 2020

    ... (truncated)

    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.

    Reviewed by dependabot[bot] at 2022-04-08 23:52
  • 14. iterateSpan efficiency

    In my case, there are more than 500 events to display within a month. I found out that it cost around 30-50ms for each event in shedule.iterateSpan(day,covers).iterate(function(span,iterator){...}. The total cost for 500 events is around 15s, which is too slow.

    How can I improve that?

    looking forward to hearing from you soon :-)

    Reviewed by mengyingzh at 2022-03-02 11:55
  • 15. Bump node-sass from 4.9.0 to 7.0.0

    Bumps node-sass from 4.9.0 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    v4.12.0

    https://github.com/sass/node-sass/releases/tag/v4.12.0

    v4.11.0

    https://github.com/sass/node-sass/releases/tag/v4.11.0

    v4.10.0

    https://github.com/sass/node-sass/releases/tag/v4.10.0

    v4.9.4

    https://github.com/sass/node-sass/releases/tag/v4.9.4

    v4.9.3

    https://github.com/sass/node-sass/releases/tag/v4.9.3

    v4.9.2

    https://github.com/sass/node-sass/releases/tag/v4.9.2

    v4.9.1

    https://github.com/sass/node-sass/releases/tag/v4.9.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.

    Reviewed by dependabot[bot] at 2022-02-10 11:20
  • 16. Bump shelljs from 0.7.8 to 0.8.5

    Bumps shelljs from 0.7.8 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    v0.8.4

    Small patch release to fix a circular dependency warning in node v14. See #973.

    v0.8.3

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752
    • which() should check executability before returning a value #657
    • Bad encoding experience #456
    • phpcs very slow #440
    • Error shown when triggering a sigint during shelljs.exec if process.on sigint is defined #254
    • .to\(file\) does not mute STDIO output #146
    • Escaping shell arguments to exec() #143
    • Allow multiple string arguments for exec() #103
    • cp does not recursively copy from readonly location #98
    • Handling permissions errors on file I/O #64

    Merged pull requests:

    ... (truncated)

    Changelog

    Sourced from shelljs's changelog.

    Change Log

    Unreleased

    Full Changelog

    Closed issues:

    • find returns empty array even though directory has files #922
    • exec() should support node v10 (maxbuffer change) #915
    • grep exit status and extra newlines #900
    • Travis CI currently broken #893
    • Drop node v4 support #873
    • cp -Ru respects the -R but not the -u #808

    Merged pull requests:

    v0.8.3 (2018-11-13)

    Full Changelog

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752

    ... (truncated)

    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.

    Reviewed by dependabot[bot] at 2022-01-15 03:04
A lightweight collection of Vue components (including molecules and organisms) to manage dates easily

vue-date-tools VueJS Date Components based on the date-fns library Click Here to Try the Live Demo Best features: Lightweight and almost no dependenci

Jul 6, 2021
Vuetify Week scheduler - Simple week scheduler component

Vuetify Week scheduler A simple component to manage weekly events Inspired by jquery-schedule. Installation NPM npm install vuetify-week-scheduler --s

Jun 7, 2022
A Vue Components for rendering Postmark Nodes

Postmark Components -- for Vue2 Components for rendering Postmark Nodes. By which your can provide custom components to render your markdown extension

Dec 29, 2021
Vue Illustration Components from undraw.co

Vue Illustration Components from undraw.co

Aug 25, 2021
Vue Clock - Simple clock component using Vue.js
Vue Clock - Simple clock component using Vue.js

Simple clock component using Vue.js

Jun 22, 2022
DateTime formatting & parsing in Vue using Luxon

Easy use of datetime with Luxon in Vue

Mar 15, 2022
Using vue3.x composition api in react-hooks style.

v3-use Using vue3.x composition api in react-hooks style. Install npm install v3-use # or yarn add v3-use Usage <template> <div>{{state}}</div>

Jun 8, 2022
VUE chinese-lunar date-picker component with festivals and solar terms
VUE  chinese-lunar date-picker component with festivals and solar terms

vue-jLunar-datePicker @JinWen Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms. Online demo enjoy the de

Jan 30, 2022
An elegant calendar and datepicker plugin for Vue.
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

Jul 1, 2022
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

Apr 20, 2021
Simple and clean calendar written in Vue.js
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

Jun 4, 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

Mar 18, 2021
List Maker - CQRS and Event Sourcing Example
 List Maker - CQRS and Event Sourcing Example

List Maker - CQRS and Event Sourcing Example This is the frontend app written in Vue.js for the CQRS and Event Sourcing Example project. Usage Instala

Mar 31, 2022
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+
📅 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...

Jul 1, 2022
A simple and sweet vue.js calendar
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

Jun 2, 2022
⏱ A library for working with dates and times in JS

Luxon Luxon is a library for working with dates and times in JavaScript. DateTime.now().setZone("America/New_York").minus({ weeks: 1 }).endOf("day").t

Jun 27, 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

Jun 15, 2022
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

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

Mar 16, 2022
Vue 3 composable to create reactive calendars

Vue use-calendar A vue 3 composable to create any kind of calendar! Open source SSR compliant Fully typed with Typescript Full customize your calendar

Jun 23, 2022