nathanreyes / v-calendar Goto Github PK

There's a bug when clearing the input for date picker in range mode, it can be reproduced in the demo page.

In range mode:

• Select a range and clear the input by hand => the whole calendar date range will be visually selected
• Date picker value object has start & end as null
• Selecting another range works normally

Here's a screenshot:

Possibility to disable specific days of the week. Par exemple, disable choosing Sathurdays and Sundays

I was trying to set theme / background linear-gradient on a popup (not inline), its not working but it works only when I use is-inline attribute.

I tried with the same ExStyling-3.vue example.

Guide me if I am missing something.

Hey =)
I was wondering if there is a way to change the first day of week, i went through the documentation a couple of times but i don't find any hints on how to do that.
If it is possible, could you show me how to do that ?
Thanks a lot for your work, this library is cleary the greatest calendar library i have found for vue.js =)

I'm browsing through the examples and API but can't find it. Is there a way to use the v-calendar to quickly set a particular year? For example, to set the date of my birthday without clicking the "previous month" 50 times and without using the keyboard to enter the date in the input field.

If I use the calendar in multiple pages I'm forced to define a locale in every instance (tag) of the calendar or the datepicker. It would be nice if the declaration Vue.use(VCalendar) accepts an object (locale configuration) as a second argument: Vue.use(VCalendar, config)
Or even better, the locales are inside the package, so, all the users have to do is Vue.use(VCalendar, { locale: 'es' }) (in my case, because I speak spanish). BTW, if you choose the second solution, here you have the translation ready for use 😜

month-labels: ["Enero","Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
weekday-labels: ["D", "L", "M", "X", "J", "V", "S"]
weekday-labels-variant: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"]

First off, this is one of the best pickers I've worked with! Thanks a ton! I am having an issue with the is-expanded prop. It doesn't seem to fill the full width of the container.
Below is how I am using it:

<div class="col-sm-3" style="background-color: red;">
     <v-date-picker
           mode="range"
           select-color="#5c852c"
           drag-color="#5c852c"
           :is-inline="true"
           @input="getTrips"
           v-model="range"
           :is-expanded="true">
     </v-date-picker>
</div>

For some reason this is much easier to duplicate in my own project, I can click much more slowly to produce this bug, slow enough that I encountered it while interacting in a pretty normal way. On your demo page, I have to rapid-fire click much faster, but it is still reproducible. The calendar is restored if I click once more after breaking it.

Hi! v-calendar no functions in laravel 5 ? :(

Hello,

When clicking on the Reference the styling page for more details link, the page is directing to:

http://vcalendar.netlify.com/styling

but instead, you get a page not found. When clicking go back to the site, the url changes back to:

http://vcalendar.netlify.com/api

but it still displays the not found page

I have to type the url to get back to the pages, just a head's up.
Good work

Can't find a way to disable the toolptip on daterange picker e.g. "24 days, 23 nights" ? Is it possible to disable this tooltip ?

I promise this will be my last issue, but I think this is one of the most beauty calendar and datepicker for Vue, and I want to use in my developments.
This would be an enhancement, but it would be nice to have the possibility to show the count of days or nights when select a range in datepicker. This behavior appears mostly in lodging sites, with check-in and check-out.
This component has the behavior https://krystalcampioni.github.io/vue-hotel-datepicker/

How can I disable this popover?

When it's shown, it breaks the bootstrap 4 layout, affecting the fixed-top and fixed-footer elements. It seems to add extra elements in the body that affects viewport sizing.

[NotaBug]
I want to fade out and make weekends less prominent, how can you apply a style just to weekends?

Hi,

I'd like to override css for selected date in v-date-picker component, so I added the following attributes as a computed properties:

<script>
  import dateUtils from '../utils/DateUtils'

  export default {
    name: 'elnlms-date-picker',
    props: {
      patterns: {
        type: Object,
        default: () => ({
          weekdays: [1, 7]
        })
      },
      value: [String, Number, Object]
    },
    data () {
      return {
        placeholder: 'Pick a date',
        selectedDate: this.value
      }
    },
    computed: {
      attributes () {
        return [{
          // highlight today
          highlight: {
            backgroundColor: '#FE8B2D',
            borderColor: '#D26F22',
            borderWidth: '2px',
            borderStyle: 'solid'
          },
          contentStyle: {
            color: '#4F6166'
          },
          dates: [ dateUtils.toDate(this) ]
        },
        {
          // highlight selected date
          highlight: {
            backgroundColor: '#08A14A', // green
            borderColor: '#067B39',
            borderWidth: '2px',
            borderStyle: 'solid'
          },
          contentStyle: {
            color: 'white'
          },
          dates: [ dateUtils.toDate(this, this.selectedDate) ]
        },
        {
          // highlight weekends
          highlight: {
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            borderWidth: '0px',
            borderStyle: 'none'
          },
          contentStyle: {
            color: '#A31313'
          },
          dates: [
            {
              ...this.patterns
            }
          ]
        }]
      }
    },
    methods: {
      dateFormatter: function (date) {
        return dateUtils.toDateString(this, date)
      },
      updateValue: function (value) {
        this.$emit('input', dateUtils.toUtcMillis(this, value))
      }
    }
  }
</script>

but the default css is applied for selected date. How can I override this?

Hi,

I got a feature request. Maybe it's already possible but I don't seem to get it working.

Is there a way to allow multiple date range selections on the date picker? Now if you pick multiple you can pick multiple days, but if you choose range, you can't select multiple ranges.

It seems that build script include the whole vue library in an encapsulated scope (not available outside the component).
We can see too in CDN https://unpkg.com/[email protected]/lib/v-calendar.min.js with the copyright.

Is it really needed? There is a way to have only the component?

Trying to get the text parsing to work, but when I enter in a date thats ambiguous "01/02/2017" could be 1st of February or 2nd of January depending on locale.

I'm seeing an issue where sometimes the order of which they appear are reversed, meaning sometimes the dates values are incorrect by at least a month.

Issue appears on the docs site too. https://vcalendar.netlify.com/datepicker.

Edit: I'm also on 0.5.3

When there are two closer instances of v-calendar the input fields remains over the popover calendars.

I want to use datePicker. but it's difficult to adjust the theme properties. please paste some beautiful theme properties

Any idea how to best implement :min date so that dates before today are disabled?

Is it possible to build a custom popover for an inline date picker?

I need to perform a custom action when an event on the calendar is clicked. It would be far easier to have the event's related data directly in the calendar's attributes array:

attributes: [{
   dot: {
      backgroundColor: '#D52824',
   },
   dates: ['2017-12-25'],
   contentHoverStyle: {
      'cursor': 'pointer',
      'color': '#333'
   },
   // Add this attribute
   customData: {
      'title': 'Christmas Party',
      'url': 'https://events.com/christmas-2017'
   }
}]

Absolutely love this datepicker!

Do you have any suggestions on how to handle the date input inside modals? If a parent container has overflow: hidden, the calendar is obviously cut off. Another datepicker I've used in the past, Kalendae, addressed this problem by appending the calendar element to <body> and setting the position of the calendar.

I really wouldn't mind having to do that myself in my application, maybe using vue-portal, but I'm not sure that it's currently possible to access the calendar component for inputs in that way.

Any suggestions?

I'm trying to implement a popover example when you press on the date and u can set something up. But by some weird reason it gives me errors

This dependency was not found:

        This dependency was not found:

           * @/utils/helpers.js in ./node_modules/babel-loader/lib!./node_modules/vue-
           loader/lib/selector.js?

type=script&index=0&bustCache!./src/components/profile/creator/components/MyCreator/SetSessions.v
ue

         To install it, you can run: npm install --save @/utils/helpers.js

not sure what i'm doing wrong i've followed all the steps that u said in your setup.

These are my dependencies for webpack project

       "dependencies": {
"axios": "^0.17.1",
"babel-runtime": "^6.26.0",
"v-calendar": "^0.5.5",
"vue": "^2.5.2",
 }

  "devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
  },
 "engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
   "not ie <= 8"
   ]
}   

Whats wrong with this?

I try to build ( npm run-script build ) from current source (6f25fa4) and I got:

Error: Cannot find module 'uglifyjs-webpack-plugin'

So I've tried with npm install uglifyjs-webpack-plugin --save-dev but I got

ValidationError: UglifyJs Plugin Invalid Options
options['compress'] should NOT have additional properties

I'm missing something else?

When date is selected, and when it is clicked again, selectedDate will be set to null. My suggestion is to add some option so users can choose if selectedDate can be null or can not.

Is there a reason this is not using moment.js as a dependency? I was expecting to find it in the package.json file.

I see there is a lot of code in the project that calculates things like leapyear, days in the week, first day of the month, etc. Logic like this could all be removed from the project with an implementation of moment.js.

Besides that, moment.js is already heavily used so there is a big chance a large project already relies on that library. I have been working on my own calendar implementation but I see a lot of potential in this project.

Thoughts on implementing moment.js?

From doc, the Calendar component should accept @daySelect and @update:fromPage listeners

But this code does not works

    <v-calendar @daySelect='selectDay' @update:fromPage="selectDay"> </v-calendar>
<script type="text/javascript">
	new Vue({
		el     : '#app',
		data   : {
			// Data used by the date picker
			mode        : 'single',
			selectedDate: null,
		},
		methods: {
			selectDay: function () {
				console.log(arguments);
			}
		}
	});
</script>

The method selectDay is never called
It seems that the problem is the case sensitive event name.

[Vue tip]: Event "dayselect" is emitted in component but the handler is registered for "daySelect". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "day-select" instead of "daySelect".

Using @day-select does not resolve. I think that the event name should be "dayselect", "update:frompage", "update:topage".

The attributes object contains an array of indexes rather than the actual attributes data.
And "el" DOM element is missing from "dayInfo" object.

To facilitate the development, it would be interesting to have a new option to mark the available date that disables the rest.

<v-date-picker is-inline ... :avaliable-dates="{ start: today, end: oneMonth" />

And set max-page and min-page too.

When i change the month or the day in the input of the datepicker it changes the inverse of it

This doesn't seem to be documented.
How is this configurable?

It appears this package is ES6 code which isn't compatible IE 11 and other older browsers.
Can you distribute a compiled ES5 version instead of ES6?

The event 'input' emits two times when a range is selected when the property 'is-double-paned' is active

Is there a 'native' way to override the font used in the header arrow? I would like to use consistent arrows across the page, and the only way I came up with was to hardcode it this way in my stylesheet:

.vc-angle-left::before {
    content: "my_new_arrow" !important;
}

I know I can customize e.g. the font size using the headerArrows property of themeStyles, but how can I style the pseudo element ::before with it?

Thank you for the month/year picker ❤️

Can you implement a better UI experience to switch between them?
Like Semantic-UI Calendar would be lovely 😊

When we click on the month we can have something like this:

And on the year:

And when we click we go deeper to date (and maybe hour/minute picker?) 🙂

Hello,
Thank you for your work.
If I change the date of the datepicker programmatically, fromPage_ and toPage_ are not updating based on the new value.
Take a look on this example: https://jsfiddle.net/z48vdoan/

I would much rather continue to work on improving the plugin rather than stumbling through Illustrator.
If anyone has the chops for a simple logo...something perhaps medium sized (like the main Vue logo) as well as the favicon, I'm up for submissions. I'd recommend something with a more simple flat design using a variant of either of the two site colors (#66b3cc or #ff5050).

Proper attribution would be noted in the docs site homepage.

Hi, DataPicker component collides with component with same name from Vuetify library.
Can you please add the 'componentPrefix' option to make this component unique?
Best regards
Karel

The month and weekdays are appearing different on mobile relative to desktop (without modifications, except the color style), look:

Desktop:

Mobile:

It's a known bug @nathanreyes?

Like others datepickers, it would be useful that the popover closes itself when I select the date. And for the Year and Month selection too.

Hi and thanks for you great component !

I use you component in a Symfony application, i implement this as a Type.
But because it is an HTML form, i need an input to send my datas to the server.

If not in line not problem to add one, but when i set the :is-inline props to true i have no input left.

Is there a way to have one ?

Thanks

My default "selected" stage has deep blue background color with white foreground color. I'd like to keep it the same for days during drag...but it's not possible at the moment:

Number of days displayed wrongly in previous months when the firstDayOfWeek property is set to a different value than 1.

When I use this code:

:disabled-dates="[{ start: new Date(), end: null }]"

Why this code should not disable days today until infinity?

OBS:
:disabled-dates="[{ start: null, end: new Date() }]" is same result, this is wrong.
This should disable the days until today and available in future.

This is taken from the example in https://vcalendar.netlify.com/datepicker.
As you can see the popover says "Sun, Oct 13, 1968" but the calendar shows "Mon, Oct 14, 1968".
This seems to happen only when you go back a few decades, let say to the 60s or 20s...

Hi Nathan,

sorry if i'm asking obvious, i'm trying to change disabled-attributes in a way that can be done with select-attribute or drag-attribute, but it's not working for me. Is it even possible?

Hello,
Thank you for your work, I really like this plugin. I read the documentation and look at your code, but I'm not really familiar with Vue.js yet. Is it possible to chenge dynamically the day label in the current showed days? I have to put a price in the bottom of each day. I see that you create a object dayInfo in CalendarWeeks.vue, and push it in weeks array, but I don't know how to access this array from within the parent template, maybe it's not possible?

Thank you

Hello,
I am getting a bunch of warnings 'Duplicate keys detected: 'T'. This may cause an update error.' when trying to render v-calendar.

I am wrapping it with NoSSR, because the app is rendered on server. And registering v-calendar component globally in the beforeMount hook

May be I should not register it globally in beforeMount hook and import directly the calendar?
Thank you.