vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update Calendar doc and demo

pull/1751/head
mertsincan 2021-11-12 17:14:26 +03:00
parent d5a26c61ad
commit f7ee19240d
2 changed files with 55 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/calendar/CalendarDemo.vue
View File

@ -62,7 +62,7 @@
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
@ -131,7 +131,17 @@ export default {
dates2: null, dates2: null,
minDate: null, minDate: null,
maxDate: null, maxDate: null,
invalidDates: null invalidDates: null,
responsiveOptions: [
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]
} }
}, },
components: { components: {
@ -144,4 +154,4 @@ export default {
.special-day { .special-day {
text-decoration: line-through; text-decoration: line-through;
} }
</style> </style>

48
src/views/calendar/CalendarDoc.vue
View File

@ -241,6 +241,12 @@ export default {
<td>1</td> <td>1</td>
<td>Number of months to display.</td> <td>Number of months to display.</td>
</tr> </tr>
<tr>
<td>responsiveOptions</td>
<td>any</td>
<td>null</td>
<td>An array of options for responsive design.</td>
</tr>
<tr> <tr>
<td>view</td> <td>view</td>
<td>string</td> <td>string</td>
@ -656,7 +662,7 @@ export default {
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
@ -719,7 +725,17 @@ export default {
dates2: null, dates2: null,
minDate: null, minDate: null,
maxDate: null, maxDate: null,
invalidDates: null invalidDates: null,
responsiveOptions: [
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]
} }
} }
} }
@ -789,7 +805,7 @@ export default {
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
@ -843,6 +859,16 @@ export default {
const date14 = ref(); const date14 = ref();
const dates1 = ref(); const dates1 = ref();
const dates2 = ref(); const dates2 = ref();
const responsiveOptions = ref([
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]);
minDate.value.setMonth(prevMonth); minDate.value.setMonth(prevMonth);
minDate.value.setFullYear(prevYear); minDate.value.setFullYear(prevYear);
@ -854,7 +880,7 @@ export default {
invalidDates.value = [today, invalidDate]; invalidDates.value = [today, invalidDate];
return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7, return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
date8, date9, date10, date11, date12, date13, date14, dates1, dates2 } date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions }
} }
} }
<\\/script> <\\/script>
@ -922,7 +948,7 @@ export default {
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="p-field p-col-12 p-md-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
@ -975,6 +1001,16 @@ export default {
const date14 = ref(); const date14 = ref();
const dates1 = ref(); const dates1 = ref();
const dates2 = ref(); const dates2 = ref();
const responsiveOptions = ref([
{
breakpoint: '1400px',
numMonths: 2
},
{
breakpoint: '1200px',
numMonths: 1
}
]);
minDate.value.setMonth(prevMonth); minDate.value.setMonth(prevMonth);
minDate.value.setFullYear(prevYear); minDate.value.setFullYear(prevYear);
@ -986,7 +1022,7 @@ export default {
invalidDates.value = [today, invalidDate]; invalidDates.value = [today, invalidDate];
return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7, return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
date8, date9, date10, date11, date12, date13, date14, dates1, dates2 } date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions }
}, },
components: { components: {
"p-calendar": primevue.calendar "p-calendar": primevue.calendar