visit-library-calendar
v0.1.420
Published
## Project setup ``` npm install visit-library-calendar
Downloads
135
Keywords
Readme
SharedComponents
Project setup
npm install visit-library-calendar
Including the Calendar in your project
<Calendar></Calendar>
Using properties of the widget to customize
<Calendar id="booking-calendar" :selectedDate="2020-11-01" booking="false" @onDateSelected="showData" :bookedDays="[24,26,27]" :avialableDays="[25,28,29,30]" :dateStyle="rounded-no-border"></Calendar>
Import stylesheet as below in EntryComponent of the widget
<style src="visit-library-calendar/dist/Calendar.css" ></style>
Properties supported
booking : A boolean property accepting "true" / "false"
selectedDate : Set the date here the calendar will show that date e.g "2019-11-01"
avialableDays : An array of days that will be marked on the calendar that are available with respect to a product
bookedDays : An array of days that will be marked on the calendar that are booked with respect to a product
dateStyle : rounded_no_border , rounded_with_border, square_with_border
@onDateSelected : Should provide a reference to an existing vue method, which will get triggered with a date object containing the selected date
show : Indicates whether calendar is visible or not. So this should be set inorder to make the calendar visible
Theming
:root{
--calendar-header-bg-color:#f1f0f0;
--calendar-footer-bg-color:#f1f0f0;
--calendar-body-bg-color:#f1f0f0;
--calendar-month-text-color:#000000;
--calendar-header-arrow-color:#000000;
--calendar-day-text-color:rgb(105, 101, 101);
--calendar-date-text-color:#ffffff;
}
#Revision history