Skip to content

Commit c15bf2a

Browse files
ManukMinasyanManukMinasyan
authored
Merge pull request #70 from ManukMinasyan/develop
Develop
2 parents f2c81c1 + 25289cd commit c15bf2a

File tree

5 files changed

+955
-841
lines changed

5 files changed

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

‎src/Demo.vue

Lines changed: 140 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
<template>
22
<div>
33

4-
<FunctionalCalendar class="demo-calendar dateRangeInputs" :is-modal="true" :is-date-range="true"
4+
<FunctionalCalendar class="demo-calendar dateRangeInputs"
5+
ref="demoCalendar1"
6+
v-model="demoCalendar1"
7+
:is-modal="true"
8+
:is-date-range="true"
59
:is-multiple="true"
6-
:clanedars-count="2">
10+
:isLayoutExpandable="true"
11+
:calendars-count="2"
12+
:isSeparately="false"
13+
arrowsPosition="space-between">
714
<template v-slot:dateRangeInputs="props">
815
<label for="check-in">
916
<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -34,98 +41,110 @@
3441
:readonly="!props.isTypeable">
3542
</label>
3643
</template>
37-
</FunctionalCalendar>
38-
39-
40-
<FunctionalCalendar class="demo-calendar 2"
41-
ref="Calendar"
42-
v-model="calendarData"
43-
:sundayStart="true"
44-
:hiddenElements="['']"
45-
:showWeekNumbers="false"
46-
:withTimePicker="false"
47-
:is-date-picker="false"
48-
:is-multiple-date-picker="true"
49-
:is-date-range="false"
50-
:min-sel-days="3"
51-
:is-dark="false"
52-
:date-format="'yyyy-mm-dd'"
53-
:is-multiple="true"
54-
:calendars-count="2"
55-
:isSeparately="true"
56-
:with-time-picker="false"
57-
:change-month-function="true"
58-
:change-year-function="true"
59-
:marked-dates="markedDates"
60-
:is-auto-closeable="false"
61-
:is-modal="false"
62-
:change-year-step="5"
63-
:is-typeable="true"
64-
@choseDay="choseDay"
65-
title-position="left"
66-
arrows-position="right"
67-
>
68-
</FunctionalCalendar>
69-
70-
<FunctionalCalendar class="demo-calendar 2"
71-
ref="Calendar"
72-
:sundayStart="true"
73-
:hiddenElements="['']"
74-
:showWeekNumbers="true"
75-
:is-date-picker="false"
76-
:is-multiple-date-picker="true"
77-
:is-date-range="false"
78-
:min-sel-days="3"
79-
:is-dark="false"
80-
:date-format="'yyyy-mm-dd'"
81-
:is-multiple="true"
82-
:calendars-count="2"
83-
:isSeparately="true"
84-
:with-time-picker="false"
85-
:change-month-function="true"
86-
:change-year-function="true"
87-
:marked-dates="markedDates"
88-
:is-auto-closeable="false"
89-
:is-modal="false"
90-
:change-year-step="5"
91-
:is-typeable="true"
92-
@choseDay="choseDay"
93-
title-position="left"
94-
arrows-position="right"
95-
>
96-
</FunctionalCalendar>
97-
98-
<pre>
99-
{{ calendarData }}
100-
</pre>
101-
102-
<functional-calendar class="demo-custom-calendar 1"
103-
:change-month-function="true"
104-
:change-year-function="true"
105-
:sundayStart="false"
106-
:showWeekNumbers="false"
107-
title-position="left"
108-
arrows-position="right"
109-
>
110-
<template v-slot:default="props">
111-
<div class="custom-day-container">
112-
<div class="custom-day">
113-
{{ props.day.day }}
114-
<div class="events">
115-
<div class="event-item" :class="event.class"
116-
v-for="event in getEventsByDate(props.day.date)" :key="event.id">
117-
{{ event.title }}
118-
</div>
119-
</div>
120-
</div>
44+
<template v-slot:navigationArrowLeft>
45+
<div>←</div>
46+
</template>
47+
<template v-slot:navigationArrowRight>
48+
<div>→</div>
49+
</template>
50+
<template v-slot:footer>
51+
<div class="footer">
52+
<a class="button" @click.prevent="$refs.demoCalendar1.showCalendar = false">Apply</a>
53+
<a class="button is-blue" @click.prevent="demoCalendar1.dateRange = {}">Clear</a>
12154
</div>
12255
</template>
123-
</functional-calendar>
124-
125-
<!-- <button @click="markedDates2.push('22/3/2020')">Add date</button>-->
56+
</FunctionalCalendar>
12657

12758

128-
<button @click="$refs.Calendar.ChooseDate('2020-10-15')">Choose Date 2020-10-15</button>
59+
<!-- <FunctionalCalendar class="demo-calendar 2"-->
60+
<!-- ref="Calendar"-->
61+
<!-- v-model="calendarData"-->
62+
<!-- :sundayStart="true"-->
63+
<!-- :hiddenElements="['']"-->
64+
<!-- :showWeekNumbers="false"-->
65+
<!-- :withTimePicker="false"-->
66+
<!-- :is-date-picker="false"-->
67+
<!-- :is-multiple-date-picker="true"-->
68+
<!-- :is-date-range="false"-->
69+
<!-- :min-sel-days="3"-->
70+
<!-- :is-dark="false"-->
71+
<!-- :date-format="'yyyy-mm-dd'"-->
72+
<!-- :is-multiple="true"-->
73+
<!-- :calendars-count="2"-->
74+
<!-- :isSeparately="true"-->
75+
<!-- :with-time-picker="false"-->
76+
<!-- :change-month-function="true"-->
77+
<!-- :change-year-function="true"-->
78+
<!-- :marked-dates="markedDates"-->
79+
<!-- :is-auto-closeable="false"-->
80+
<!-- :is-modal="false"-->
81+
<!-- :change-year-step="5"-->
82+
<!-- :is-typeable="true"-->
83+
<!-- @choseDay="choseDay"-->
84+
<!-- title-position="left"-->
85+
<!-- arrows-position="right"-->
86+
<!-- >-->
87+
<!-- </FunctionalCalendar>-->
88+
89+
<!-- <FunctionalCalendar class="demo-calendar 2"-->
90+
<!-- ref="Calendar"-->
91+
<!-- :sundayStart="true"-->
92+
<!-- :hiddenElements="['']"-->
93+
<!-- :showWeekNumbers="true"-->
94+
<!-- :is-date-picker="false"-->
95+
<!-- :is-multiple-date-picker="true"-->
96+
<!-- :is-date-range="false"-->
97+
<!-- :min-sel-days="3"-->
98+
<!-- :is-dark="false"-->
99+
<!-- :date-format="'yyyy-mm-dd'"-->
100+
<!-- :is-multiple="true"-->
101+
<!-- :calendars-count="2"-->
102+
<!-- :isSeparately="true"-->
103+
<!-- :with-time-picker="false"-->
104+
<!-- :change-month-function="true"-->
105+
<!-- :change-year-function="true"-->
106+
<!-- :marked-dates="markedDates"-->
107+
<!-- :is-auto-closeable="false"-->
108+
<!-- :is-modal="false"-->
109+
<!-- :change-year-step="5"-->
110+
<!-- :is-typeable="true"-->
111+
<!-- @choseDay="choseDay"-->
112+
<!-- title-position="left"-->
113+
<!-- arrows-position="right"-->
114+
<!-- >-->
115+
<!-- </FunctionalCalendar>-->
116+
117+
<!-- <pre>-->
118+
<!-- {{ calendarData }}-->
119+
<!-- </pre>-->
120+
121+
<!-- <functional-calendar class="demo-custom-calendar 1"-->
122+
<!-- :change-month-function="true"-->
123+
<!-- :change-year-function="true"-->
124+
<!-- :sundayStart="false"-->
125+
<!-- :showWeekNumbers="false"-->
126+
<!-- title-position="left"-->
127+
<!-- arrows-position="right"-->
128+
<!-- >-->
129+
<!-- <template v-slot:default="props">-->
130+
<!-- <div class="custom-day-container">-->
131+
<!-- <div class="custom-day">-->
132+
<!-- {{ props.day.day }}-->
133+
<!-- <div class="events">-->
134+
<!-- <div class="event-item" :class="event.class"-->
135+
<!-- v-for="event in getEventsByDate(props.day.date)" :key="event.id">-->
136+
<!-- {{ event.title }}-->
137+
<!-- </div>-->
138+
<!-- </div>-->
139+
<!-- </div>-->
140+
<!-- </div>-->
141+
<!-- </template>-->
142+
<!-- </functional-calendar>-->
143+
144+
<!-- &lt;!&ndash; <button @click="markedDates2.push('22/3/2020')">Add date</button>&ndash;&gt;-->
145+
146+
147+
<!-- <button @click="$refs.Calendar.ChooseDate('2020-10-15')">Choose Date 2020-10-15</button>-->
129148

130149
<!--<FunctionalCalendar class="demo-calendar 3"-->
131150
<!--ref="Calendar2"-->
@@ -194,6 +213,8 @@
194213
components: {FunctionalCalendar},
195214
data() {
196215
return {
216+
demoCalendar1: {
217+
},
197218
events: [
198219
{
199220
id: 1,
@@ -286,7 +307,7 @@
286307
}
287308
288309
.demo-calendar {
289-
width: 400px;
310+
width: 600px;
290311
margin: 100px;
291312
292313
&.dateRangeInputs {
@@ -306,6 +327,34 @@
306327
}
307328
}
308329
}
330+
331+
.footer {
332+
display: flex;
333+
justify-content: flex-end;
334+
margin: 0 5px 5px 0;
335+
336+
.button {
337+
background-color: #4CAF50; /* Green */
338+
border: none;
339+
color: white;
340+
padding: 5px 27px;
341+
text-align: center;
342+
text-decoration: none;
343+
display: inline-block;
344+
font-size: 16px;
345+
346+
&:hover {
347+
cursor: pointer;
348+
-moz-box-shadow: inset 0 0 10px #436562;
349+
-webkit-box-shadow: inset 0 0 10px #436562;
350+
box-shadow: inset 0 0 10px #436562;
351+
}
352+
353+
&.is-blue {
354+
background-color: #008CBA;
355+
}
356+
}
357+
}
309358
}
310359
311360
.demo-custom-calendar {

0 commit comments

Comments
 (0)