@@ -46,8 +46,65 @@ circle | Boolean / This is selected are circle or area
4646and customize style with css variables
4747
4848<img src =" ./resources/customize.png " >
49- DEMO (https://edisdev.github.io/vue-datepicker-ui )
5049
50+ ``` css
51+ element {
52+ --v-calendar-picker-color : #fff ;
53+ --v-calendar-input-bg-color : #fff ;
54+ --v-calendar-input-bg-disable-color :rgb (245 , 245 , 245 );
55+ --v-calendar-input-text-disable-color :#b8b8b9 ;
56+ --v-calendar-select-bg-color : #fff ;
57+ --v-calendar-border-color : #eaeaeb ;
58+ --v-calendar-triangle-color : #eaeaeb ;
59+ --v-calendar-shadow : 0 20px 30px 0 rgba (0 , 0 , 0 , 0.2 );
60+ --v-calendar-top-shadow : 3px -14px 30px 0px rgba (0 , 0 , 0 , 0.2 );
61+ --v-calendar-text-color : #7b8187 ;
62+ --v-calendar-action-color : #7b8187 ;
63+ --v-calendar-text-disabled-color : #b8b8b9 ;
64+ --v-calendar-view-button-color : #7b8187 ;
65+ --v-calendar-view-button-font-weight : 400 ;
66+ --v-calendar-view-button-font-size : 1rem ;
67+ --v-calendar-datepicker-icon-color : #1bba67 ;
68+ --v-calendar-datepicker-icon-size : 1.1rem ;
69+ --v-calendar-active-bg-color : #1bba67 ;
70+ --v-calendar-active-text-color : #fff ;
71+ --v-calendar-range-bg-color : #edfff9 ;
72+ --v-calendar-range-text-color : #7b8187 ;
73+ --v-calendar-range-radius : 100% ;
74+ --v-calendar-day-hover-bg-color : #eaeaeb ;
75+ --v-calendar-day-width : 40px ;
76+ --v-calendar-day-height : 40px ;
77+ --v-calendar-day-font-size : 0.9rem ;
78+ --v-calendar-day-font-weight : 400 ;
79+ --v-calendar-day-name-font-size : 0.9rem ;
80+ --v-calendar-day-name-font-weight : 500 ;
81+ --v-calendar-day-name-color : #7b8187 ;
82+ --v-calendar-input-border : 1px solid #eaeaeb ;
83+ --v-calendar-input-text-color : #7b8187 ;
84+ --v-calendar-input-font-size : 0.9rem ;
85+ --v-calendar-input-font-weight : 400 ;
86+ --v-calendar-content-radius : 0px ;
87+ --v-calendar-year-font-size : 1.1rem ;
88+ --v-calendar-year-color : #7b8187 ;
89+ --v-calendar-year-font-weight : 400 ;
90+ --v-calendar-year-disabled-color : #b8b8b9 ;
91+ --v-calendar-year-disabled-bg-color : transparent ;
92+ --v-calendar-year-padding : 10px ;
93+ --v-calendar-year-border : none ;
94+ --v-calendar-year-border-radius : none ;
95+ --v-calendar-month-font-size : 1.1rem ;
96+ --v-calendar-month-color : #7b8187 ;
97+ --v-calendar-month-font-weight : 400 ;
98+ --v-calendar-month-disabled-color : #b8b8b9 ;
99+ --v-calendar-month-disabled-bg-color : transparent ;
100+ --v-calendar-month-padding : 8px ;
101+ --v-calendar-month-border : none ;
102+ --v-calendar-month-border-radius : none ;
103+ }
104+ ```
105+
106+
107+ DEMO (https://edisdev.github.io/vue-datepicker-ui )
51108
52109#### note:
53110 ** date-format** object values is consists to toLocaleString in js. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString ).
0 commit comments