Initated Calendar

src/AppMenu.vue

@@ -9,6 +9,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
                 <div>
                     <router-link to="/autocomplete">&#9679; AutoComplete</router-link>
+                    <router-link to="/calendar">&#9679; Calendar</router-link>
                     <router-link to="/checkbox">&#9679; Checkbox</router-link>
                     <router-link to="/chips">&#9679; Chips</router-link>
                     <router-link to="/dropdown">&#9679; Dropdown</router-link>

src/components/calendar/Calendar.vue

@@ -0,0 +1,425 @@
+<template>
+    <span :class="containerClass">
+        <CalendarInputText v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue"  />
+        <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" />
+        <div :class="panelStyleClass">
+            <div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
+                <div class="p-datepicker-header">
+                    <button class="p-datepicker-prev p-link" v-if="i === 0">
+                        <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
+                    </button>
+                    <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (i === numberOfMonths -1)">
+                        <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
+                    </button>
+                    <div class="p-datepicker-title">
+                        <span class="p-datepicker-month" v-if="monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
+                        <span class="p-datepicker-year" v-if="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
+                    </div>
+                </div>
+                <div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
+                    <table class="p-datepicker-calendar">
+                        <thead>
+                            <tr>
+                                <th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
+                                    <span>{{weekDay}}</span>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="week of month.dates" :key="week[0].day + week[0].month">
+                                <td v-for="date of week" :key="date.day" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
+                                    
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </span>
+</template>
+
+<script>
+import InputText from '../inputtext/InputText';
+import Button from '../button/Button';
+
+export default {
+    inheritAttrs: false,
+    props: {
+        value: null,
+        timeOnly: {
+            type: Boolean,
+            default: false
+        },
+        showIcon: {
+            type: Boolean,
+            default: false
+        },
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        icon: {
+            type: String,
+            default: 'pi pi-calendar'
+        },
+        numberOfMonths: {
+            type: Number,
+            default: 1
+        },
+        view: {
+            type: String,
+            default: 'date'
+        },
+        touchUI: {
+            type: Boolean,
+            default: false
+        },
+        monthNavigator: {
+            type: Boolean,
+            default: false
+        },
+        yearNavigator: {
+            type: Boolean,
+            default: false
+        },
+        panelClass: String,
+        panelStyle: null,
+        locale: {
+            type: Object,
+            default: {
+                firstDayOfWeek: 0,
+                dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+                dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+                dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
+                monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
+                monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
+                today: 'Today',
+                clear: 'Clear',
+                dateFormat: 'mm/dd/yy'
+            }
+        }
+    },
+    computed: {
+        listeners() {
+            return {
+                ...this.$listeners,
+                input: event => {
+                    this.$emit('input', event)
+                }
+            };
+        },
+        containerClass() {
+            return [
+                'p-calendar',
+                {
+                    'p-calendar-w-btn': this.showIcon, 
+                    'p-calendar-timeonly': this.timeOnly,
+                    'p-inputwrapper-filled': this.value
+                }
+            ];
+        },
+        panelStyleClass() {
+            return [
+                'p-datepicker p-component',
+                {
+                    'p-datepicker-inline': this.inline,
+                    'p-input-overlay': !this.inline,
+                    'p-shadow': !this.inline,
+                    'p-disabled': this.$attrs.disabled,
+                    'p-datepicker-timeonly': this.timeOnly,
+                    'p-datepicker-multiple-month': this.numberOfMonths > 1, 
+                    'p-datepicker-monthpicker': (this.view === 'month'), 
+                    'p-datepicker-touch-ui': this.touchUI
+                }
+            ];
+        },
+        inputFieldValue() {
+            return '';
+        }
+    },
+    components: {
+        'CalendarInputText': InputText,
+        'CalendarButton': Button
+    }
+}
+</script>
+
+<style>
+.p-calendar {
+    position: relative;
+    display: inline-block;
+}
+
+.p-calendar .p-calendar-button {
+    position: absolute;
+    height: 100%;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    width: 2em;
+    border-left: 0 none;
+}
+
+.p-calendar .p-calendar-button:enabled:hover,
+.p-calendar .p-calendar-button:focus {
+    border-left: 0 none;
+}
+
+.p-calendar .p-datepicker {
+    min-width: 100%;
+}
+
+/* Fluid */
+.p-fluid .p-calendar {
+    width: 100%;
+}
+
+.p-fluid .p-calendar-button {
+    width: 2em;
+}
+
+.p-fluid .p-datepicker-buttonbar button {
+    width: auto;
+}
+
+.p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
+    width: calc(100% - 2em);
+}
+
+/* Datepicker */
+.p-datepicker {
+	width: auto;
+	padding: .2em;
+	display: none;
+    position: absolute;
+}
+
+.p-datepicker.p-datepicker-inline {
+    display: inline-block;
+    position: static;
+}
+
+.p-datepicker .p-datepicker-group {
+    border-left-width: 0;
+    border-right-width: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+}
+
+/* Header */
+.p-datepicker .p-datepicker-header {
+	position: relative;
+	padding: .5em 0;
+}
+.p-datepicker .p-datepicker-prev,
+.p-datepicker .p-datepicker-next {
+	position: absolute;
+	top: .5em;
+	width: 1.8em;
+    height: 1.8em;
+    cursor: pointer;
+}
+
+.p-datepicker .p-datepicker-prev {
+	left: .125em;
+}
+.p-datepicker .p-datepicker-next {
+	right: .125em;
+}
+
+.p-datepicker .p-datepicker-prev span,
+.p-datepicker .p-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+    margin-top: -.5em;
+    margin-left: -.5em;
+}
+
+.p-datepicker .p-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.p-datepicker .p-datepicker-title select {
+	font-size: 1em;
+	margin: .125em 0;
+    vertical-align: middle;
+}
+.p-datepicker select.p-datepicker-month {
+    margin-right: .25em;
+}
+.p-datepicker span.p-datepicker-year {
+	margin-left: .25em;
+}
+
+/* Multiple Month DatePicker */
+.p-datepicker-multiple-month .p-datepicker-group {
+    display: table-cell;
+    border-left-width: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-right-width: 1px;
+}
+
+/* DatePicker Table */
+.p-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.p-datepicker th {
+	padding: .5em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.p-datepicker td {
+	border: 0;
+	padding: 0;
+}
+.p-datepicker td > span,
+.p-datepicker td > a {
+	display: block;
+	padding: .5em;
+	text-align: right;
+	text-decoration: none;
+}
+
+.p-datepicker td a {
+    cursor: pointer;
+}
+
+.p-datepicker .p-datepicker-buttonbar,
+.p-datepicker .p-datepicker-footer {
+	padding: .5em;
+}
+
+.p-datepicker .p-datepicker-buttonbar:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.p-datepicker .p-datepicker-buttonbar > button:last-child {
+    float: right;
+}
+
+.p-calendar.p-calendar-w-btn input {
+    -moz-border-radius-topright: 0px;
+    -webkit-border-top-right-radius: 0px;
+    -khtml-border-top-right-radius: 0px;
+    border-top-right-radius: 0px;
+    -moz-border-radius-bottomright: 0px;
+    -webkit-border-bottom-right-radius: 0px;
+    -khtml-border-bottom-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+/* Month Picker */
+.p-monthpicker .p-monthpicker-month {
+    width: 33.3%;
+    display: inline-block;
+    text-align: center;
+    padding: .5em;
+    cursor: pointer;
+}
+
+.p-datepicker-monthpicker select.p-datepicker-year {
+    width: auto;
+}
+
+/* Time Picker */
+.p-timepicker {
+    text-align: center;
+    padding: .5em 0;
+}
+
+.p-timepicker > div {
+    display: inline-block;
+    margin-left: .5em;
+    min-width: 1.5em;
+}
+
+.p-timepicker > .p-minute-picker,
+.p-timepicker > .p-second-picker {
+    margin-left: 0;
+}
+
+.p-timepicker > .p-separator {
+    margin-left: 0px;
+    min-width: .75em;
+}
+
+.p-timepicker > .p-separator .p-separator-spacer {
+    visibility: hidden;
+    display: block;
+}
+
+.p-timepicker > div button {
+    display: block;
+    cursor: pointer;
+}
+
+.p-timepicker > div button:last-child {
+    margin-top: .3em;
+}
+
+input[type=text]::-ms-clear {
+    display: none;
+}
+
+/* Touch UI */
+.p-datepicker-touch-ui,
+.p-calendar .p-datepicker-touch-ui {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    min-width: 80vw;
+    transform: translate(-50%, -50%);
+}
+
+.p-datepicker-touch-ui.p-datepicker th {
+	padding: 2em 0;
+}
+.p-datepicker-touch-ui.p-datepicker td {
+	padding: 0;
+}
+.p-datepicker-touch-ui.p-datepicker td span,
+.p-datepicker-touch-ui.p-datepicker td a {
+	padding: 2em 0;
+}
+
+.p-datepicker-touch-ui .p-timepicker {
+    padding: 1em 0;
+}
+
+.p-datepicker-touch-ui .p-timepicker > div a {
+    font-size: 2em;
+}
+
+.p-datepicker-mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+@media screen and (max-width: 40em) {
+    .p-datepicker-multiple-month {
+        width: 17em;
+        overflow: auto;
+    }
+
+    .p-datepicker-touch-ui.p-datepicker th {
+        padding: 1em 0;
+    }
+
+    .p-datepicker-touch-ui.p-datepicker td span,
+    .p-datepicker-touch-ui.p-datepicker td a {
+        padding: 1em 0;
+    }
+}
+
+</style>

src/main.js

@@ -5,6 +5,7 @@ import AutoComplete from './components/autocomplete/AutoComplete';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
+import Calendar from './components/calendar/Calendar';
 import Card from './components/card/Card';
 import Chart from './components/chart/Chart';
 import Checkbox from './components/checkbox/Checkbox';
@@ -57,6 +58,7 @@ Vue.component('Accordion', Accordion);
 Vue.component('AccordionTab', AccordionTab);
 Vue.component('AutoComplete', AutoComplete);
 Vue.component('Button', Button);
+Vue.component('Calendar', Calendar);
 Vue.component('Card', Card);
 Vue.component('Chart', Chart);
 Vue.component('Checkbox', Checkbox);

src/router.js

@@ -26,6 +26,11 @@ export default new Router({
         name: 'button',
         component: () => import('./views/button/ButtonDemo.vue')
     },
+    {
+        path: '/calendar',
+        name: 'calendar',
+        component: () => import('./views/calendar/CalendarDemo.vue')
+    },
     {
         path: '/card',
         name: 'card',

src/views/calendar/CalendarDemo.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Calendar</h1>
+                <p>Calendar is an input component to select a date.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="p-grid p-fluid">
+                <div class="p-col-12 p-md-4">
+                    <h3>Basic</h3>
+                    <Calendar v-model="date1" />
+                </div>
+            </div>
+        </div>
+
+        <CalendarDoc />
+    </div>
+</template>
+
+<script>
+import CalendarDoc from './CalendarDoc'
+
+export default {
+    data() {
+        return {
+            date1: null
+        }
+    },
+	components: {
+		'CalendarDoc': CalendarDoc
+    }
+}
+</script>

src/views/calendar/CalendarDoc.vue

@@ -0,0 +1,185 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Button from 'primevue/button';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>Button is created using the Button element.</p>
+<CodeHighlight>
+&lt;Button /&gt;
+</CodeHighlight>
+
+				<h3>Label</h3>
+				<p>Text of the button is defined using the <i>label</i> property.</p>
+<CodeHighlight>
+&lt;Button label=&quot;Click&quot; /&gt;
+</CodeHighlight>
+				<h3>Icons</h3>
+				<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
+					icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
+<CodeHighlight>
+&lt;Button label=&quot;Click&quot; icon=&quot;pi pi-check&quot; iconPos=&quot;right&quot; /&gt;
+</CodeHighlight>
+
+				<h3>Events</h3>
+				<p>Events are defined with the standard notation.</p>
+<CodeHighlight>
+&lt;Button label=&quot;Click&quot; @click=&quot;handleClick($event)&quot;/&gt;
+</CodeHighlight>
+
+				<h3>Severity</h3>
+				<p>Different color options are available as severity levels.</p>
+
+				<ul>
+					<li>.p-button-secondary</li>
+					<li>.p-button-success</li>
+					<li>.p-button-info</li>
+					<li>.p-button-warning</li>
+					<li>.p-button-danger</li>
+				</ul>
+
+<CodeHighlight>
+&lt;Button label=&quot;Primary&quot; /&gt;
+&lt;Button label=&quot;Secondary&quot; class=&quot;p-button-secondary&quot; /&gt;
+&lt;Button label=&quot;Success&quot; class=&quot;p-button-success&quot; /&gt;
+&lt;Button label=&quot;Info&quot; class=&quot;p-button-info&quot; /&gt;
+&lt;Button label=&quot;Warning&quot; class=&quot;p-button-warning&quot; /&gt;
+&lt;Button label=&quot;Danger&quot; class=&quot;p-button-danger&quot; /&gt;
+</CodeHighlight>
+
+				<h3>Raised and Rounded Buttons</h3>
+				<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
+<CodeHighlight>
+&lt;Button label=&quot;Primary&quot; class=&quot;p-button-raised p-button-rounded&quot; /&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Type</th>
+							<th>Default</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>label</td>
+							<td>string</td>
+							<td>null</td>
+							<td>Text of the button.</td>
+						</tr>
+						<tr>
+							<td>icon</td>
+							<td>string</td>
+							<td>null</td>
+							<td>Name of the icon.</td>
+						</tr>
+						<tr>
+							<td>iconPos</td>
+							<td>string</td>
+							<td>left</td>
+							<td>Position of the icon, valid values are "left" and "right".</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>p-button</td>
+							<td>Button element</td>
+						</tr>
+						<tr>
+							<td>p-button-icon</td>
+							<td>Icon element</td>
+						</tr>
+						<tr>
+							<td>p-button-text</td>
+							<td>Label element of the button</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/button" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;template&gt;
+	&lt;div&gt;
+		&lt;div class=&quot;content-section introduction&quot;&gt;
+			&lt;div class=&quot;feature-intro&quot;&gt;
+				&lt;h1&gt;Button&lt;/h1&gt;
+				&lt;p&gt;Button is an extension to standard button element with icons and theming.&lt;/p&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+
+		&lt;div class=&quot;content-section implementation&quot;&gt;
+			&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
+			&lt;Button label=&quot;Click&quot; /&gt;
+			&lt;Button label=&quot;Click&quot; icon=&quot;pi pi-check&quot; /&gt;
+			&lt;Button label=&quot;Click&quot; icon=&quot;pi pi-check&quot; iconPos=&quot;right&quot; /&gt;
+			&lt;Button icon=&quot;pi pi-check&quot; /&gt;
+			&lt;Button label=&quot;Click&quot; disabled=&quot;disabled&quot; /&gt;
+
+			&lt;h3&gt;Severities&lt;/h3&gt;
+			&lt;Button label=&quot;Primary&quot; /&gt;
+			&lt;Button label=&quot;Secondary&quot; class=&quot;p-button-secondary&quot; /&gt;
+			&lt;Button label=&quot;Success&quot; class=&quot;p-button-success&quot; /&gt;
+			&lt;Button label=&quot;Info&quot; class=&quot;p-button-info&quot; /&gt;
+			&lt;Button label=&quot;Warning&quot; class=&quot;p-button-warning&quot; /&gt;
+			&lt;Button label=&quot;Danger&quot; class=&quot;p-button-danger&quot; /&gt;
+
+			&lt;h3&gt;Raised Buttons&lt;/h3&gt;
+			&lt;Button label=&quot;Primary&quot; class=&quot;p-button-raised&quot; /&gt;
+			&lt;Button label=&quot;Secondary&quot; class=&quot;p-button-raised p-button-secondary&quot; /&gt;
+			&lt;Button label=&quot;Success&quot; class=&quot;p-button-raised p-button-success&quot; /&gt;
+			&lt;Button label=&quot;Info&quot; class=&quot;p-button-raised p-button-info&quot; /&gt;
+			&lt;Button label=&quot;Warning&quot; class=&quot;p-button-raised p-button-warning&quot; /&gt;
+			&lt;Button label=&quot;Danger&quot; class=&quot;p-button-raised p-button-danger&quot; /&gt;
+
+			&lt;h3&gt;Rounded Buttons&lt;/h3&gt;
+			&lt;Button label=&quot;Primary&quot; class=&quot;p-button-rounded&quot; /&gt;
+			&lt;Button label=&quot;Secondary&quot; class=&quot;p-button-rounded p-button-secondary&quot; /&gt;
+			&lt;Button label=&quot;Success&quot; class=&quot;p-button-rounded p-button-success&quot; /&gt;
+			&lt;Button label=&quot;Info&quot; class=&quot;p-button-rounded p-button-info&quot; /&gt;
+			&lt;Button label=&quot;Warning&quot; class=&quot;p-button-rounded p-button-warning&quot; /&gt;
+			&lt;Button label=&quot;Danger&quot; class=&quot;p-button-rounded p-button-danger&quot; /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/template&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+button {
+	margin-right: .5em;
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>