jacques33 / vue-horizontal-calendar Goto Github PK

View Code? Open in Web Editor NEW

44.0 3.0 29.0 1.32 MB

a horizontal calendar component for Vue.js

Home Page: http://calendar.wantalone.com/

JavaScript 25.50% HTML 0.81% Vue 69.48% CSS 4.21%

vue calendar horizontal vuejs-components vuejs

vue-horizontal-calendar's Introduction

vue-horizontal-calendar

a horizontal calendar component for Vue.js(only for 2.x) 💻

doc & demos

click here.

install

npm install vue-horizontal-calendar -S

or if you prefer yarn

yarn add vue-horizontal-calendar

local import

<template>
    <div class="demo">
        <vue-horizontal-calendar></vue-horizontal-calendar>
    </div>
</template>

<script>
import VueHorizontalCalendar from 'vue-horizontal-calendar';

export default {
    components: {
        VueHorizontalCalendar
    }
}

</script>

Language

So far, it supports Chinese, English, French, German, Italian , Spanish , Slovak, Czech.

vue-horizontal-calendar's People

Contributors

Stargazers

Watchers

vue-horizontal-calendar's Issues

Vue 3: Cannot read property 'parentNode' of null

Hi, when I want to use the library in a Vue 3 Typescript environment I get this error:

ReferenceError window is not defined

Hi,
steps :
1-c import VueHorizontalCalendar from 'vue-horizontal-calendar'
2- export default { components: { VueHorizontalCalendar },
add it to the template
3- <VueHorizontalCalendar lang="en" />

mac os
project is nuxt.js /vuejs
when refreshing the page it gives an error in the file node_modules/vue-horizontal-calendar/lib/vue-horizontal-calendar.umd.min.js

"ReferenceError
window is not defined"

CDN component

I can not make it work
Can you give me an example? please
thank you

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-slideout-panel</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
    
</head>
<body>

<style>
    
</style>

<div id="app">
    <div class="container mt-4">
        <p class="excample-text">{{choosedDay2.dateFormat}}  星期{{choosedDay2.day}}</p>
        <vue-horizontal-calendar lang="en" choosedDate="2021/08/02" v-on:change="dateChange2"></vue-horizontal-calendar>
    </div>
</div>

<!-- <script src="vue-horizontal-calendar-0.9.0/lib/vue-horizontal-calendar.umd.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vue-horizontal-calendar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


<script>


// Vue.use("vue-horizontal-calendar");

Vue.component("VueHorizontalCalendar", window["vue-horizontal-calendar"]);

var vm = new Vue({
    el: '#app',
    data: {
        choosedDay2: {
            dateFormat: "",
            year: "",
            month: "",
            date: "",
            day: "",
            timestamp: ""
        },
    },
    methods: {
        dateChange2(day) {
          this.choosedDay2 = day;
        },
    }
})
</script>
  

</body>
</html>

How can I customize your component?

_c error

在我使用vite+vue3的环境中，use了该包，放在对应的组件位置上时出现了报错，请问知道这是怎么回事吗？

Customising the text content inside the picker

Multi Language Support

Currently, there is an option of selecting either of two languages, Chinese or English.
Can it also support Portuguese or any other language?

minDate doesn't seem to work with date object

Below is my code

<template>
<vue-horizontal-calendar lang="en" :minDate='tomorrow' swipeSpace="5" choosedItemColor="rgb(249, 197, 46)"></vue-horizontal-calendar>
 {{tomorrow}}
</template>
 data(){
    return{
           tomorrow : new Date(new Date().setDate(new Date().getDate() + 1))
     }
}

Think it should start showing from 24 Fr instead of 23 Th..

But is showing 23 Th as well.

Customising the text content inside the picker

Thanks a lot for this nice library.

It will great if we are customise the format of display inside the selection boxes

E.g
3 words for day instead of 2
Showing month date and day instead of day and date only.