Skip to content

Commit 1dd7bc6

Browse files
ManukMinasyanManukMinasyan
committed
Added hiddenElements prop, for hide calendar elements
1 parent eb1c990 commit 1dd7bc6

File tree

5 files changed

+33
-28
lines changed

5 files changed

+33
-28
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ ___
123123
| limits | [Object, Boolean] | false | {min: '31/10/2019', max: '31/12/2019'} | Set calendar show, and marked dates limits. |
124124
| placeholder | [String, Boolean] | false | 'yyyy/mm/dd' | Date input placeholder |
125125
| dateFormat | String | 'dd/mm/yyyy' | 'yyyy/mm/dd' | Date formatting string |
126-
| leftAndRightDays | Boolean | true | false | Show or hide left and right days, prev or next months |
127126
| isDatePicker | Boolean | false | true | Enable or disable date picker |
128127
| isDateRange | Boolean | false | true | Enable or disable date range |
129128
| isMultiple | Boolean | false | true | Enable multiple calendar function |
@@ -140,6 +139,7 @@ ___
140139
| dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names |
141140
| monthNames | Array | ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] | ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] | Month names |
142141
| transition | Boolean | true | false | Calendar animations |
142+
| hiddenElements | Array | [] | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] | Hide calendar elements |
143143
___
144144

145145
### Events

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
},
77
"name": "vue-functional-calendar",
88
"description": "A style-uninstallable datepicker component for Vue.js",
9-
"version": "2.3.1",
9+
"version": "2.3.2",
1010
"license": "MIT",
1111
"repository": {
1212
"type": "git",

‎src/Demo.vue

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,32 @@
33
<functional-calendar class="demo-calendar"
44
v-model="calendarData2"
55
:sunday-start="true"
6-
:is-modal="false"
7-
:date-format="'dd.mm.yyyy'"
8-
:change-month-function="true"
9-
:change-year-function="true"
10-
:is-date-range="true"
11-
:is-multiple="true"
12-
:calendars-count="2"
13-
:marked-date-range="{start: '22.4.2019', end: '24.4.2019'}"
14-
:left-and-right-days="true"
15-
></functional-calendar>
16-
17-
<functional-calendar class="demo-calendar2"
18-
v-model="calendarData"
19-
:sunday-start="true"
20-
:is-modal="false"
6+
:is-modal="true"
217
:date-format="'dd.mm.yyyy'"
228
:change-month-function="true"
9+
:is-typeable="true"
2310
:change-year-function="true"
2411
:is-date-range="true"
2512
:is-multiple="false"
2613
:calendars-count="2"
2714
:marked-date-range="{start: '22.4.2019', end: '24.4.2019'}"
28-
:left-and-right-days="true"
15+
:hidden-elements="['leftAndRightDays']"
2916
></functional-calendar>
3017

18+
<!--<functional-calendar class="demo-calendar2"-->
19+
<!--v-model="calendarData"-->
20+
<!--:sunday-start="true"-->
21+
<!--:is-modal="false"-->
22+
<!--:date-format="'dd.mm.yyyy'"-->
23+
<!--:change-month-function="true"-->
24+
<!--:change-year-function="true"-->
25+
<!--:is-date-range="true"-->
26+
<!--:is-multiple="false"-->
27+
<!--:calendars-count="2"-->
28+
<!--:marked-date-range="{start: '22.4.2019', end: '24.4.2019'}"-->
29+
<!--:left-and-right-days="true"-->
30+
<!--&gt;</functional-calendar>-->
31+
3132

3233
<!--:disabledDates="['27.4.2019','29.4.2019']"-->
3334
<!--:disabledDayNames="['Su']"-->

‎src/components/FunctionalCalendar.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</template>
6363
<template v-else>
6464
<div class="vfc-calendars-container">
65-
<div class="vfc-navigation-buttons" ref="navigationButtons" v-if="true">
65+
<div class="vfc-navigation-buttons" ref="navigationButtons" v-if="checkHiddenElement('navigationArrows')">
6666
<div @click="PreMonth" :class="{'vfc-cursor-pointer': allowPreDate}">
6767
<div class="vfc-arrow-left" :class="{'vfc-disabled': !allowPreDate}"></div>
6868
</div>
@@ -74,12 +74,13 @@
7474
<div class="vfc-calendar" v-for="(calendarItem, key) in listCalendars" :key="key">
7575
<div class="vfc-content">
7676
<h2 class="vfc-top-date"
77+
v-if="checkHiddenElement('month')"
7778
:class="{'vfc-cursor-pointer vfc-underline':changeMonthFunction}"
7879
@click="openMonthPicker(key)">
7980
{{ calendarItem.dateTop }}
8081
</h2>
8182
<section class="vfc-dayNames">
82-
<span v-for="(dayName, key) in fConfigs.dayNames" :key="key">
83+
<span v-for="(dayName, key) in fConfigs.dayNames" v-if="checkHiddenElement('dayNames')" :key="key">
8384
{{ dayName }}
8485
</span>
8586
</section>
@@ -244,7 +245,7 @@
244245
initCalendar() {
245246
// Set Help Calendar Configs
246247
helpCalendar.configs.sundayStart = this.fConfigs.sundayStart;
247-
helpCalendar.configs.leftAndRightDays = this.fConfigs.leftAndRightDays;
248+
helpCalendar.configs.leftAndRightDays = this.checkHiddenElement('leftAndRightDays');
248249
helpCalendar.configs.dateFormat = this.fConfigs.dateFormat;
249250
helpCalendar.configs.dayNames = this.fConfigs.dayNames;
250251
helpCalendar.configs.monthNames = this.fConfigs.monthNames;
@@ -732,12 +733,15 @@
732733
let day = this.$refs.day[0];
733734
let container = this.$refs.mainContainer;
734735
container.style.display = "";
735-
let height = container.clientHeight + day.clientHeight;
736+
let height = container.clientHeight + (day.clientHeight + (day.clientHeight/2.5));
736737
container.style.height = height + "px";
737738
738739
if(this.fConfigs.isModal){
739740
container.style.display = "none"
740741
}
742+
},
743+
checkHiddenElement(elementName) {
744+
return !this.fConfigs.hiddenElements.includes(elementName);
741745
}
742746
}
743747
}

‎src/mixins/propsAndData.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ export const propsAndData = {
1717
type: String,
1818
default: () => 'dd/mm/yyyy'
1919
},
20-
leftAndRightDays: {
21-
type: Boolean,
22-
default: () => true
23-
},
2420
isMultiple: {
2521
type: Boolean,
2622
default: () => false
@@ -100,6 +96,10 @@ export const propsAndData = {
10096
transition: {
10197
type: Boolean,
10298
default: () => true
99+
},
100+
hiddenElements: {
101+
type: Array,
102+
default: () => []
103103
}
104104
},
105105
data() {
@@ -131,7 +131,6 @@ export const propsAndData = {
131131
sundayStart: false,
132132
placeholder: false,
133133
dateFormat: 'dd/mm/yyyy',
134-
leftAndRightDays: true,
135134

136135
isDatePicker: false,
137136
isDateRange: false,
@@ -160,7 +159,8 @@ export const propsAndData = {
160159
dayNames: [],
161160
monthNames: [],
162161

163-
transition: true
162+
transition: true,
163+
hiddenElements: []
164164
}
165165
}
166166
}

0 commit comments

Comments
 (0)