Skip to content

Commit d9ec9d1

Browse files
ManukMinasyanManukMinasyan
committed
Redesign month and year picker container. Added shortMonthNames prop
1 parent 5df558d commit d9ec9d1

File tree

7 files changed

+217
-113
lines changed

7 files changed

+217
-113
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ ___
153153
| disabledDates | Array | [] | ['24/12/2018','27/12/2018'] | Disabled Dates |
154154
| dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names |
155155
| 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 |
156+
| shortMonthNames | Array | ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] | ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] | Short month names |
156157
| transition | Boolean | true | false | Calendar animations |
157158
| hiddenElements | Array | [] | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] | Hide calendar elements |
158159
| isDark | Boolean | false | true | Dark theme |

‎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": "Lightweight, high-performance calendar component based on Vue.js",
9-
"version": "2.6.1",
9+
"version": "2.6.2",
1010
"license": "MIT",
1111
"repository": {
1212
"type": "git",

‎src/Demo.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<FunctionalCalendar class="demo-calendar"
44
ref="Calendar"
55
:is-date-range="true"
6+
:min-sel-days="3"
67
:is-dark="true"
78
:date-format="'dd/mm/yyyy'"
89
:is-multiple="true"

‎src/assets/scss/calendar.scss

Lines changed: 132 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ input.vfc-single-input {
3939
background-color: $mirage
4040
}
4141
}
42+
4243
.vfc-single-input {
4344
border-color: $astronaut;
4445
background-color: $mirage
@@ -60,65 +61,98 @@ input.vfc-single-input {
6061
}
6162

6263
.vfc-months-container {
63-
height: 100%;
6464
display: flex;
65-
flex-direction: column;
65+
flex-direction: row;
66+
justify-content: center;
6667

67-
.vfc-navigation-buttons {
68-
.vfc-top-date {
69-
text-align: center;
70-
font-size: 21px;
71-
font-weight: bold;
72-
margin: 0;
68+
.vfc-content {
69+
width: 45%;
70+
height: 50%;
71+
position: absolute;
72+
z-index: 1000;
73+
background-color: $licorice;
74+
border: 1px solid;
75+
border-radius: 5px;
76+
top: 55px;
77+
color: $white;
78+
padding: 5px 0;
7379

80+
.vfc-navigation-buttons {
7481
div {
75-
margin: 20px 20px;
76-
}
82+
margin: 10px 10px;
7783

84+
.vfc-arrow-left, .vfc-arrow-right {
85+
border-color: $white;
86+
width: 8px;
87+
height: 8px;
88+
cursor: pointer;
7889

79-
&.vfc-underline {
80-
cursor: pointer;
81-
text-decoration: underline dotted #66b3cc;
90+
&:hover {
91+
border-color: $pictionBlue;
92+
}
93+
}
8294
}
83-
}
84-
}
8595

86-
.vfc-months {
87-
flex: 1 1 75%;
88-
padding: 0;
89-
display: flex;
90-
flex-wrap: wrap;
91-
justify-content: space-between;
96+
.vfc-top-date {
97+
text-align: center;
98+
font-size: 18px;
99+
font-weight: bold;
100+
margin: 0;
101+
display: flex;
102+
flex-direction: row;
103+
justify-content: center;
104+
105+
.vfc-popover-caret {
106+
content: "";
107+
position: absolute;
108+
display: block;
109+
width: 12px;
110+
height: 12px;
111+
border-top: inherit;
112+
border-left: inherit;
113+
background: inherit;
114+
z-index: -1;
115+
background-color: $licorice;
116+
transform: translateY(-40%) rotate(45deg);
117+
top: 0;
118+
}
92119

93-
div.vfc-item {
94-
border-top: 1px solid #d4d4d4;
95-
flex: 1;
96-
flex-basis: 30%;
97-
//height: 69px;
98-
display: flex;
99-
justify-content: center;
100-
flex-direction: column;
101-
text-align: center;
102-
outline-style: none;
103120

104-
&:hover {
105-
background-color: rgba(113, 113, 113, 0.3);
106-
transition: background-color 0.2s ease-in-out;
107-
cursor: pointer;
121+
&.vfc-underline {
122+
cursor: pointer;
123+
text-decoration: underline dotted $royalblue;
124+
}
108125
}
126+
}
109127

110-
&.vfc-selected {
111-
background-color: #66b3cc;
112-
color: #fff;
113-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
114-
font-weight: 700;
128+
.vfc-months {
129+
flex: 1 1 75%;
130+
padding: 0;
131+
display: flex;
132+
flex-wrap: wrap;
133+
justify-content: space-between;
115134

116-
&:nth-last-child(3) {
117-
border-radius: 0 0 0 5px;
135+
div.vfc-item {
136+
flex: 1;
137+
flex-basis: 30%;
138+
margin: 3px;
139+
display: flex;
140+
justify-content: center;
141+
flex-direction: column;
142+
text-align: center;
143+
outline-style: none;
144+
border-radius: 5px;
145+
146+
&:hover {
147+
background-color: rgba(113, 113, 113, 0.3);
148+
transition: background-color 0.2s ease-in-out;
149+
cursor: pointer;
118150
}
119151

120-
&:last-child {
121-
border-radius: 0 0 5px;
152+
&.vfc-selected {
153+
background-color: $pictionBlue;
154+
color: #fff;
155+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
122156
}
123157
}
124158
}
@@ -389,13 +423,23 @@ input.vfc-single-input {
389423
font-size: 18px;
390424
font-weight: normal;
391425

392-
&.vfc-cursor-pointer {
393-
cursor: pointer;
394-
}
426+
a {
427+
text-decoration: unset;
428+
margin: 0 2px;
429+
color: $black;
395430

396-
&.vfc-underline {
397-
cursor: pointer;
398-
text-decoration: underline #66b3cc;
431+
&.vfc-cursor-pointer {
432+
cursor: pointer;
433+
}
434+
435+
&.vfc-underline {
436+
cursor: pointer;
437+
text-decoration: underline $royalblue;
438+
439+
&.vfc-underline-active {
440+
text-decoration-color: $black;
441+
}
442+
}
399443
}
400444
}
401445
}
@@ -613,10 +657,6 @@ input.vfc-single-input {
613657
&.vfc-dark {
614658
background-color: $mirage;
615659

616-
.vfc-top-date {
617-
color: $white
618-
}
619-
620660
.vfc-navigation-buttons {
621661
div {
622662
.vfc-arrow-right, .vfc-arrow-left {
@@ -636,8 +676,16 @@ input.vfc-single-input {
636676
&.vfc-content {
637677
h2 {
638678
&.vfc-top-date {
639-
&.vfc-underline {
640-
text-decoration: underline $pictionBlue;
679+
a {
680+
color: $white;
681+
682+
&.vfc-underline {
683+
text-decoration: underline $pictionBlue;
684+
685+
&.vfc-underline-active {
686+
text-decoration-color: $white;
687+
}
688+
}
641689
}
642690
}
643691
}
@@ -711,26 +759,39 @@ input.vfc-single-input {
711759

712760

713761
.vfc-months-container {
714-
.vfc-navigation-buttons {
715-
.vfc-top-date {
716-
&.vfc-underline {
717-
text-decoration: underline dotted #66b3cc;
762+
.vfc-content {
763+
background-color: $white;
764+
765+
.vfc-navigation-buttons {
766+
.vfc-arrow-left, .vfc-arrow-right {
767+
border-color: $black;
718768
}
719-
}
720-
}
721769

722-
.vfc-months {
723-
div.vfc-item {
724-
color: $white;
725-
border-top: 1px solid #d4d4d4;
770+
.vfc-top-date {
771+
color: $black;
726772

727-
&:hover {
728-
background-color: rgba(113, 113, 113, 0.3);
773+
.vfc-popover-caret {
774+
background-color: $white;
775+
}
776+
777+
&.vfc-underline {
778+
text-decoration: underline dotted #66b3cc;
779+
}
729780
}
781+
}
730782

731-
&.vfc-selected {
732-
background-color: $pictionBlue;
733-
color: #fff;
783+
.vfc-months {
784+
div.vfc-item {
785+
color: $black;
786+
787+
&:hover {
788+
background-color: rgba(113, 113, 113, 0.3);
789+
}
790+
791+
&.vfc-selected {
792+
background-color: $pictionBlue;
793+
color: #fff;
794+
}
734795
}
735796
}
736797
}

‎src/assets/scss/variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $mirage: #1A202C !default;
33
$ebony: #0A0C19 !default;
44
$mineShaft: #333333 !default;
55
$tundora: #464646 !default;
6+
$licorice: #2D3748 !default;
67
$white: #FFFFFF !default;
78
$lightgrey: #d9d9d9 !default;
89
$lightgreyHover: #dadada !default;

0 commit comments

Comments
 (0)