Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
150859 | Jan 22,2020 08:05 AM UTC | Apr 8,2020 01:50 PM UTC | Vue | 8 |
![]() |
Tags: Calendar |
<template>
<div id="app">
<div class='wrap'>
<ejs-calendar id='calendar' ref="CalendarInstance" :isMultiSelection="isMultiSelection" :values="values" :min="minDate" :max="maxDate" ></ejs-calendar>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";
Vue.use(CalendarPlugin);
export default {
data () {
return {
isMultiSelection: true,
minDate: new Date('01/06/2020'),
maxDate: new Date('02/15/2020'),
values: [
new Date('1/6/2020'), new Date('1/7/2020'), new Date('1/8/2020'), new Date('1/9/2020'), new Date('1/10/2020'),
new Date('1/13/2020'), new Date('1/14/2020'), new Date('1/15/2020'), new Date('1/16/2020'), new Date('1/17/2020'),
new Date('1/20/2020'), new Date('1/21/2020'), new Date('1/22/2020'), new Date('1/23/2020'), new Date('1/24/2020'),
new Date('1/27/2020'), new Date('1/28/2020'), new Date('1/29/2020'), new Date('1/30/2020'), new Date('1/31/2020'),
new Date('2/3/2020'), new Date('2/4/2020'), new Date('2/5/2020')
]
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrap {
margin: 0px auto;
max-width: 250px;
}
</style>
first load is fine but when i go back to january then go back to february, february 4 and 5 is unselected
<template>
<div id="app">
<div class='wrap'>
<ejs-calendar ref="cal" id="calendar" :change="onValueChange"></ejs-calendar>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { CalendarPlugin } from "@syncfusion/ej2-vue-calendars";
Vue.use(CalendarPlugin);
export default {
methods:{
onValueChange: function(args) {
this.$refs.cal.navigateTo("Month", new Date("01/01/2020"));
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
.wrap {
margin: 0px auto;
width: 240px;
}
</style> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.