Skip to content

Commit 5f4a15c

Browse files
ManukMinasyanManukMinasyan
committed
Redesign and improve functionality
1 parent 7fa7616 commit 5f4a15c

File tree

5 files changed

+94
-35
lines changed

5 files changed

+94
-35
lines changed

‎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.1.9",
9+
"version": "2.2.0",
1010
"license": "MIT",
1111
"repository": {
1212
"type": "git",

‎src/Demo.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
:is-multiple="true"
1212
:calendars-count="2"
1313
:marked-date-range="{start: '22.4.2019', end: '24.4.2019'}"
14+
:left-and-right-days="false"
1415
ref="calendar"
1516
></functional-calendar>
17+
<!--:disabledDates="['27.4.2019','29.4.2019']"-->
18+
<!--:disabledDayNames="['Su']"-->
1619
<blockquote>
1720
<pre>
1821
<code>

‎src/assets/scss/calendar.scss

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import './variables.scss';
2+
13
html, body {
24
margin: 0;
35
padding: 0;
@@ -33,7 +35,7 @@ input.vfc-single-input {
3335
border-radius: .28571429rem;
3436
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
3537
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", serif;
36-
background-color: #FFFFFF;
38+
background-color: $white;
3739

3840
&.vfc-modal {
3941
position: absolute;
@@ -109,7 +111,7 @@ input.vfc-single-input {
109111

110112
div {
111113
display: flex;
112-
color: #000000;
114+
color: $black;
113115
font-size: 18px;
114116

115117
&.vfc-cursor-pointer {
@@ -210,6 +212,23 @@ input.vfc-single-input {
210212
background-color: #fff;
211213
margin-top: 3px;
212214

215+
.vfc-base-start, .vfc-base-end {
216+
position: absolute;
217+
background: $lightskyblue;
218+
width: 50% !important;
219+
border-radius: 0 !important;
220+
border-right-width: 0 !important;
221+
height: 100%;
222+
}
223+
224+
.vfc-base-start {
225+
right: 0;
226+
}
227+
228+
.vfc-base-end {
229+
left: 0;
230+
}
231+
213232
span {
214233
display: block;
215234
width: 65%;
@@ -221,7 +240,7 @@ input.vfc-single-input {
221240
background-color: #ff8498;
222241

223242
&:after {
224-
color: #FFFFFF;
243+
color: $white;
225244
}
226245
}
227246

@@ -230,30 +249,35 @@ input.vfc-single-input {
230249
}
231250

232251
&.vfc-marked {
252+
margin: auto;
253+
background-color: $royalblue;
254+
border-radius: 50%;
255+
opacity: 1;
256+
z-index: 2;
257+
233258
&.vfc-borderd, &.vfc-start-marked, &.vfc-end-marked {
259+
&:after {
260+
color: $white;
261+
}
262+
234263
&:before {
235264
background: transparent;
236265
}
237266
}
267+
238268
&:before {
239269
top: 0;
240270
left: 0;
241271
content: "";
242272
position: absolute;
243-
background: #66b3cc;
273+
background-color: $lightskyblue;
244274
width: 100%;
245275
height: 100%;
246276
z-index: 1;
247277
}
248278

249-
margin: auto;
250-
background-color: rgb(102, 179, 204);
251-
border-radius: 50%;
252-
opacity: 1;
253-
z-index: 2;
254-
255279
&:after {
256-
color: #FFFFFF;
280+
color: $black;
257281
}
258282

259283
&.vfc-hide {
@@ -265,7 +289,7 @@ input.vfc-single-input {
265289

266290
&.vfc-hide {
267291
&:after {
268-
color: #bfbfbf;
292+
color: $gainsboro;
269293
}
270294
}
271295

@@ -275,7 +299,7 @@ input.vfc-single-input {
275299
border-radius: 50%;
276300
opacity: 1;
277301
z-index: 2;
278-
color: #FFFFFF;
302+
color: $white;
279303
}
280304

281305
&:after {
@@ -286,7 +310,7 @@ input.vfc-single-input {
286310
bottom: 0;
287311
right: 0;
288312
content: attr(data-date);
289-
color: #000000;
313+
color: $black;
290314
display: flex;
291315
justify-content: center;
292316
align-items: center;
@@ -298,10 +322,9 @@ input.vfc-single-input {
298322
}
299323

300324

301-
302325
/* Weekends */
303326
&:last-child {
304-
color: #000;
327+
color: $black;
305328
}
306329

307330
}

‎src/assets/scss/variables.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
$black: #000000 !default;
2+
$white: #FFFFFF !default;
3+
$powderblue: #B0E0E6 !default;
4+
$lightskyblue: #8fd8ec !default;
5+
$royalblue: #66b3cc !default;
6+
$steelblue: #4682B4 !default;
7+
$gainsboro: #bfbfbf !default;

‎src/components/FunctionalCalendar.vue

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,12 @@
6868
</div>
6969
</div>
7070
<div class="vfc-calendars" :key="calendarsKey">
71-
<div class="vfc-calendar" v-for="(calendar, key) in listCalendars" :key="key">
71+
<div class="vfc-calendar" v-for="(calendarItem, key) in listCalendars" :key="key">
7272
<div class="vfc-content">
7373
<h2 class="vfc-top-date"
7474
:class="{'vfc-cursor-pointer':changeMonthFunction}"
7575
@click="openMonthPicker(key)">
76-
{{ calendar.dateTop }}
76+
{{ calendarItem.dateTop }}
7777
</h2>
7878
<section class="vfc-dayNames">
7979
<span v-for="(dayName, key) in fConfigs.dayNames" :key="key">
@@ -82,14 +82,18 @@
8282
</section>
8383
<transition-group
8484
tag='div'
85-
class='c-title-anchor'
8685
:name='getTransition_()' appear>
87-
<div class="vfc-week" v-for="(week, week_key) in calendar.weeks" :key="week_key+0">
86+
<div class="vfc-week" v-for="(week, week_key) in calendarItem.weeks" :key="week_key+0">
8887
<div class="vfc-day" v-for="(day, day_key) in week.days" :key="day_key">
89-
<span :data-date="day.day" :key="day_key"
88+
<div v-if="(day.isDateRangeStart || day.isMouseToLeft) && !day.hideLeftAndRightDays"
89+
class="vfc-base-start"></div>
90+
<div v-else-if="(day.isDateRangeEnd || day.isMouseToRight) && !day.hideLeftAndRightDays"
91+
class="vfc-base-end"></div>
92+
<span v-if="!day.hideLeftAndRightDays"
93+
:data-date="day.day" :key="day_key"
9094
:class="getClassNames(day)"
9195
@click="clickDay(day)"
92-
@mouseover="dateMouseOver(week_key, day.date)">
96+
@mouseover="dayMouseOver(week_key, day.date)">
9397
</span>
9498
</div>
9599
</div>
@@ -351,6 +355,10 @@
351355
day: day.day,
352356
date: helpCalendar.formatDate(date),
353357
hide: day.hide,
358+
isMouseToLeft: false,
359+
isMouseToRight: false,
360+
isDateRangeStart: vm.checkDateRangeStart(helpCalendar.formatDate(date)),
361+
isDateRangeEnd: vm.checkDateRangeEnd(helpCalendar.formatDate(date)),
354362
hideLeftAndRightDays: day.hideLeftAndRightDays,
355363
isToday: isToday,
356364
isMarked: isMarked
@@ -443,12 +451,19 @@
443451
if (this.calendar.selectedDate === day.date)
444452
day.isMarked = true;
445453
} else {
454+
day.isMouseToLeft = false;
455+
day.isMouseToRight = false;
456+
446457
// Date Range
447-
if (startDate === day.date)
458+
if (startDate === day.date) {
459+
day.isMouseToLeft = !!endDate;
448460
day.isMarked = true;
461+
}
449462
450-
if (endDate === day.date)
463+
if (endDate === day.date) {
464+
day.isMouseToRight = !!endDate;
451465
day.isMarked = true;
466+
}
452467
453468
if (startDate && endDate) {
454469
if (helpCalendar.getDateFromFormat(day.date).getTime() > helpCalendar.getDateFromFormat(startDate)
@@ -464,13 +479,14 @@
464479
})
465480
})
466481
},
467-
dateMouseOver(week_key, date) {
482+
dayMouseOver(week_key, date) {
468483
if (!this.fConfigs.isDateRange) {
469484
return false;
470485
}
471486
472487
if ((this.calendar.dateRange.start === false || this.calendar.dateRange.end === false)
473488
&& (this.calendar.dateRange.start !== false || this.calendar.dateRange.end !== false)) {
489+
474490
for (let e = 0; e < this.listCalendars.length; e++) {
475491
let calendar = this.listCalendars[e];
476492
@@ -490,6 +506,9 @@
490506
let thisDate = helpCalendar.getDateFromFormat(date).getTime();
491507
let startDate = helpCalendar.getDateFromFormat(this.calendar.dateRange.start).getTime();
492508
509+
this.listCalendars[e].weeks[f].days[i].isMouseToLeft = itemDate === startDate && thisDate > startDate;
510+
this.listCalendars[e].weeks[f].days[i].isMouseToRight = itemDate === startDate && thisDate < startDate;
511+
493512
let dateDay = helpCalendar.getDateFromFormat(item.date).getDay() - 1;
494513
if (dateDay === -1) {
495514
dateDay = 6;
@@ -505,6 +524,7 @@
505524
}
506525
507526
}
527+
508528
}
509529
510530
}
@@ -623,7 +643,7 @@
623643
classes.push('vfc-marked');
624644
}
625645
626-
if(this.fConfigs.markedDates.includes(day.date)){
646+
if (this.fConfigs.markedDates.includes(day.date)) {
627647
classes.push('vfc-borderd');
628648
}
629649
@@ -634,9 +654,9 @@
634654
classes.push('vfc-marked');
635655
}
636656
637-
if(day.date === this.fConfigs.markedDateRange.start){
657+
if (day.date === this.fConfigs.markedDateRange.start) {
638658
classes.push('vfc-start-marked');
639-
}else if(day.date === this.fConfigs.markedDateRange.end){
659+
} else if (day.date === this.fConfigs.markedDateRange.end) {
640660
classes.push('vfc-end-marked');
641661
}
642662
} else {
@@ -669,28 +689,34 @@
669689
}
670690
}
671691
672-
if(day.date === this.calendar.dateRange.start){
692+
if (day.date === this.calendar.dateRange.start) {
673693
classes.push('vfc-start-marked');
674694
}
675695
676-
if(day.date === this.calendar.dateRange.end){
696+
if (day.date === this.calendar.dateRange.end) {
677697
classes.push('vfc-end-marked');
678698
}
679699
680-
if(day.date === this.calendar.selectedDate){
700+
if (day.date === this.calendar.selectedDate) {
681701
classes.push('vfc-borderd')
682702
}
683703
684704
return classes;
685705
},
706+
checkDateRangeStart(date) {
707+
return date === this.calendar.dateRange.start || date === this.fConfigs.markedDateRange.start;
708+
},
709+
checkDateRangeEnd(date) {
710+
return date === this.calendar.dateRange.end || date === this.fConfigs.markedDateRange.end;
711+
},
686712
getTransition_() {
687-
if(!this.fConfigs.transition)
713+
if (!this.fConfigs.transition)
688714
return '';
689715
690716
let name = '';
691-
if(this.transitionPrefix === 'left'){
717+
if (this.transitionPrefix === 'left') {
692718
name = 'vfc-calendar-slide-left';
693-
}else if(this.transitionPrefix === 'right') {
719+
} else if (this.transitionPrefix === 'right') {
694720
name = 'vfc-calendar-slide-right';
695721
}
696722
return name;

0 commit comments

Comments
 (0)