Skip to content

Commit

Permalink
Merge pull request #70 from ManukMinasyan/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@ManukMinasyan
ManukMinasyan authored May 2, 2020
2 parents f2c81c1 + 25289cd commit c15bf2a
Show file tree
Hide file tree
Showing 5 changed files with 955 additions and 841 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
},
"name": "vue-functional-calendar",
"description": "Lightweight, high-performance calendar component based on Vue.js",
"version": "2.8.71",
"version": "2.8.79",
"license": "MIT",
"repository": {
"type": "git",
Expand Down
231 changes: 140 additions & 91 deletions src/Demo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
<template>
<div>

<FunctionalCalendar class="demo-calendar dateRangeInputs" :is-modal="true" :is-date-range="true"
<FunctionalCalendar class="demo-calendar dateRangeInputs"
ref="demoCalendar1"
v-model="demoCalendar1"
:is-modal="true"
:is-date-range="true"
:is-multiple="true"
:clanedars-count="2">
:isLayoutExpandable="true"
:calendars-count="2"
:isSeparately="false"
arrowsPosition="space-between">
<template v-slot:dateRangeInputs="props">
<label for="check-in">
<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -34,98 +41,110 @@
:readonly="!props.isTypeable">
</label>
</template>
</FunctionalCalendar>


<FunctionalCalendar class="demo-calendar 2"
ref="Calendar"
v-model="calendarData"
:sundayStart="true"
:hiddenElements="['']"
:showWeekNumbers="false"
:withTimePicker="false"
:is-date-picker="false"
:is-multiple-date-picker="true"
:is-date-range="false"
:min-sel-days="3"
:is-dark="false"
:date-format="'yyyy-mm-dd'"
:is-multiple="true"
:calendars-count="2"
:isSeparately="true"
:with-time-picker="false"
:change-month-function="true"
:change-year-function="true"
:marked-dates="markedDates"
:is-auto-closeable="false"
:is-modal="false"
:change-year-step="5"
:is-typeable="true"
@choseDay="choseDay"
title-position="left"
arrows-position="right"
>
</FunctionalCalendar>

<FunctionalCalendar class="demo-calendar 2"
ref="Calendar"
:sundayStart="true"
:hiddenElements="['']"
:showWeekNumbers="true"
:is-date-picker="false"
:is-multiple-date-picker="true"
:is-date-range="false"
:min-sel-days="3"
:is-dark="false"
:date-format="'yyyy-mm-dd'"
:is-multiple="true"
:calendars-count="2"
:isSeparately="true"
:with-time-picker="false"
:change-month-function="true"
:change-year-function="true"
:marked-dates="markedDates"
:is-auto-closeable="false"
:is-modal="false"
:change-year-step="5"
:is-typeable="true"
@choseDay="choseDay"
title-position="left"
arrows-position="right"
>
</FunctionalCalendar>

<pre>
{{ calendarData }}
</pre>

<functional-calendar class="demo-custom-calendar 1"
:change-month-function="true"
:change-year-function="true"
:sundayStart="false"
:showWeekNumbers="false"
title-position="left"
arrows-position="right"
>
<template v-slot:default="props">
<div class="custom-day-container">
<div class="custom-day">
{{ props.day.day }}
<div class="events">
<div class="event-item" :class="event.class"
v-for="event in getEventsByDate(props.day.date)" :key="event.id">
{{ event.title }}
</div>
</div>
</div>
<template v-slot:navigationArrowLeft>
<div>←</div>
</template>
<template v-slot:navigationArrowRight>
<div>→</div>
</template>
<template v-slot:footer>
<div class="footer">
<a class="button" @click.prevent="$refs.demoCalendar1.showCalendar = false">Apply</a>
<a class="button is-blue" @click.prevent="demoCalendar1.dateRange = {}">Clear</a>
</div>
</template>
</functional-calendar>

<!-- <button @click="markedDates2.push('22/3/2020')">Add date</button>-->
</FunctionalCalendar>


<button @click="$refs.Calendar.ChooseDate('2020-10-15')">Choose Date 2020-10-15</button>
<!-- <FunctionalCalendar class="demo-calendar 2"-->
<!-- ref="Calendar"-->
<!-- v-model="calendarData"-->
<!-- :sundayStart="true"-->
<!-- :hiddenElements="['']"-->
<!-- :showWeekNumbers="false"-->
<!-- :withTimePicker="false"-->
<!-- :is-date-picker="false"-->
<!-- :is-multiple-date-picker="true"-->
<!-- :is-date-range="false"-->
<!-- :min-sel-days="3"-->
<!-- :is-dark="false"-->
<!-- :date-format="'yyyy-mm-dd'"-->
<!-- :is-multiple="true"-->
<!-- :calendars-count="2"-->
<!-- :isSeparately="true"-->
<!-- :with-time-picker="false"-->
<!-- :change-month-function="true"-->
<!-- :change-year-function="true"-->
<!-- :marked-dates="markedDates"-->
<!-- :is-auto-closeable="false"-->
<!-- :is-modal="false"-->
<!-- :change-year-step="5"-->
<!-- :is-typeable="true"-->
<!-- @choseDay="choseDay"-->
<!-- title-position="left"-->
<!-- arrows-position="right"-->
<!-- >-->
<!-- </FunctionalCalendar>-->

<!-- <FunctionalCalendar class="demo-calendar 2"-->
<!-- ref="Calendar"-->
<!-- :sundayStart="true"-->
<!-- :hiddenElements="['']"-->
<!-- :showWeekNumbers="true"-->
<!-- :is-date-picker="false"-->
<!-- :is-multiple-date-picker="true"-->
<!-- :is-date-range="false"-->
<!-- :min-sel-days="3"-->
<!-- :is-dark="false"-->
<!-- :date-format="'yyyy-mm-dd'"-->
<!-- :is-multiple="true"-->
<!-- :calendars-count="2"-->
<!-- :isSeparately="true"-->
<!-- :with-time-picker="false"-->
<!-- :change-month-function="true"-->
<!-- :change-year-function="true"-->
<!-- :marked-dates="markedDates"-->
<!-- :is-auto-closeable="false"-->
<!-- :is-modal="false"-->
<!-- :change-year-step="5"-->
<!-- :is-typeable="true"-->
<!-- @choseDay="choseDay"-->
<!-- title-position="left"-->
<!-- arrows-position="right"-->
<!-- >-->
<!-- </FunctionalCalendar>-->

<!-- <pre>-->
<!-- {{ calendarData }}-->
<!-- </pre>-->

<!-- <functional-calendar class="demo-custom-calendar 1"-->
<!-- :change-month-function="true"-->
<!-- :change-year-function="true"-->
<!-- :sundayStart="false"-->
<!-- :showWeekNumbers="false"-->
<!-- title-position="left"-->
<!-- arrows-position="right"-->
<!-- >-->
<!-- <template v-slot:default="props">-->
<!-- <div class="custom-day-container">-->
<!-- <div class="custom-day">-->
<!-- {{ props.day.day }}-->
<!-- <div class="events">-->
<!-- <div class="event-item" :class="event.class"-->
<!-- v-for="event in getEventsByDate(props.day.date)" :key="event.id">-->
<!-- {{ event.title }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
<!-- </functional-calendar>-->

<!-- &lt;!&ndash; <button @click="markedDates2.push('22/3/2020')">Add date</button>&ndash;&gt;-->


<!-- <button @click="$refs.Calendar.ChooseDate('2020-10-15')">Choose Date 2020-10-15</button>-->

<!--<FunctionalCalendar class="demo-calendar 3"-->
<!--ref="Calendar2"-->
Expand Down Expand Up @@ -194,6 +213,8 @@
components: {FunctionalCalendar},
data() {
return {
demoCalendar1: {
},
events: [
{
id: 1,
Expand Down Expand Up @@ -286,7 +307,7 @@
}
.demo-calendar {
width: 400px;
width: 600px;
margin: 100px;
&.dateRangeInputs {
Expand All @@ -306,6 +327,34 @@
}
}
}
.footer {
display: flex;
justify-content: flex-end;
margin: 0 5px 5px 0;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 27px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
&:hover {
cursor: pointer;
-moz-box-shadow: inset 0 0 10px #436562;
-webkit-box-shadow: inset 0 0 10px #436562;
box-shadow: inset 0 0 10px #436562;
}
&.is-blue {
background-color: #008CBA;
}
}
}
}
.demo-custom-calendar {
Expand Down
Loading

0 comments on commit c15bf2a

Please sign in to comment.