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

Date template and Multiple months display

pull/12/head
cagataycivici 2019-05-16 15:51:02 +03:00
parent caf69e0d56
commit d0e46962bf
2 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/calendar/Calendar.vue
View File

@ -36,8 +36,9 @@
<tbody> <tbody>
<tr v-for="week of month.dates" :key="week[0].day + '' + week[0].month"> <tr v-for="week of month.dates" :key="week[0].day + '' + week[0].month">
<td v-for="date of week" :key="date.day + '' + date.month" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}"> <td v-for="date of week" :key="date.day + '' + date.month" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
<span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}" <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}" @click="onDateSelect(date)" draggable="false">
@click="onDateSelect(date)" draggable="false">{{date.day}}</span> <slot name="date" :date="date">{{date.day}}</slot>
</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>

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

@ -11,7 +11,7 @@
<div class="p-grid p-fluid"> <div class="p-grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4">
<h3>Basic</h3> <h3>Basic</h3>
<Calendar v-model="date1" />{{date1}} <Calendar v-model="date1" />
</div> </div>
<div class="p-col-12 p-md-4"> <div class="p-col-12 p-md-4">
<h3>Spanish</h3> <h3>Spanish</h3>
@ -57,7 +57,27 @@
<h3>Month/Year Picker</h3> <h3>Month/Year Picker</h3>
<Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /> <Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
</div> </div>
<div class="p-col-12 p-md-4">
<h3>Multiple Months</h3>
<Calendar v-model="date11" :numberOfMonths="3" />
</div>
<div class="p-col-12 p-md-4">
<h3>Date Template</h3>
<Calendar v-model="date12">
<template #date="slotProps">
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
<span v-else>{{slotProps.date.day}}</span>
</template>
</Calendar>
</div>
<div class="p-col-12 p-md-4">
<h3>Touch UI</h3>
<Calendar v-model="date13" :touchUI="true" />
</div>
</div> </div>
<h3>Inline</h3>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
</div> </div>
<CalendarDoc /> <CalendarDoc />
@ -99,6 +119,10 @@ export default {
date8: null, date8: null,
date9: null, date9: null,
date10: null, date10: null,
date11: null,
date12: null,
date13: null,
date14: null,
dates1: null, dates1: null,
dates2: null, dates2: null,
es: { es: {
@ -121,4 +145,18 @@ export default {
'CalendarDoc': CalendarDoc 'CalendarDoc': CalendarDoc
} }
} }
</script> </script>
<style lang="scss" scoped>
.special-day {
background-color: #1dcbb3;
color: #ffffff;
font-weight: bold;
border-radius: 50%;
width: 2em;
height: 2em;
line-height: 2em;
padding: 0;
display: inline-block;
}
</style>