visit-library-calendar

0.1.420 • Public • Published

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

Affected libs/widgets : Drop down component , booking widget sprint -2 & sprint - 3
Date/Time | Modification | Author | Version

2018-12-19 11.35 | Made it possible to close the calendar by clicking outside | Thushan |0.1.13

2018-12-19 1.28 | Reformatted README | Thushan |0.1.14

2018-12-19 2.19 | Changed the event listener entity from document to window | Thushan |0.1.15

2018-12-19 2.19 | Added console logs | Thushan |0.1.16

2018-12-19 2.19 | Changed the show property to type Boolean | Thushan |0.1.18
2018-12-19 11.13 | Changed the show property check to === "true" | Thushan |0.1.18

2018-12-19 12.12 | Changed the show property check to === true | Thushan |0.1.19

2018-12-19 12.39 | Fixed toggle show issue | Thushan |0.1.20

2018-12-19 12.39 | Fixed integration issue | Thushan |0.1.21

2018-12-20 9.31 | Calendar closing event added | Thushan |0.1.22

Readme

Keywords

none

Package Sidebar

Install

npm i visit-library-calendar

Weekly Downloads

141

Version

0.1.420

License

none

Unpacked Size

6.42 MB

Total Files

32

Last publish

Collaborators

  • chanaki
  • creative_x
  • thushan83
  • lahiruc2010
  • priyanindika