Merge pull request #345 from uvarov-frontend/fix/340_day_of_week_buttons

Fix day of week buttons
uvarov-frontend · Dec 16, 2024 · 5ffaeac · 5ffaeac
2 parents 371f345 + 877cef2
commit 5ffaeac
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/package/src/scripts/creators/createWeek.ts b/package/src/scripts/creators/createWeek.ts
@@ -22,8 +22,8 @@ const createWeek = (self: Calendar) => {
   const weekdays = [...weekdaysData.slice(self.firstWeekday), ...weekdaysData.slice(0, self.firstWeekday)];
 
   self.context.mainElement.querySelectorAll<HTMLElement>('[data-vc="week"]').forEach((weekEl) => {
-    const templateWeekDayEl = document.createElement('button');
-    templateWeekDayEl.type = 'button';
+    const templateWeekDayEl = !!self.onClickWeekDay ? document.createElement('button') : document.createElement('b');
+    if (!!self.onClickWeekDay) (templateWeekDayEl as HTMLButtonElement).type = 'button';
     weekdays.forEach((weekday) => {
       const weekDayEl = templateWeekDayEl.cloneNode(true) as HTMLElement;
       weekDayEl.innerText = weekday.titleShort;

diff --git a/package/src/styles/layout.css b/package/src/styles/layout.css
@@ -117,7 +117,11 @@
 }
 
 [data-vc-week-day] {
-  @apply text-xs font-bold w-full min-w-[1.875rem] flex items-center justify-center cursor-pointer bg-transparent border-none p-0 m-0;
+  @apply text-xs font-bold w-full min-w-[1.875rem] flex items-center justify-center bg-transparent border-none p-0 m-0;
+}
+
+button[data-vc-week-day] {
+  @apply cursor-pointer;
 }
 
 [data-vc='dates'] {

diff --git a/package/src/styles/themes/dark.css b/package/src/styles/themes/dark.css
@@ -44,11 +44,19 @@
 }
 
 [data-vc-theme='dark'] .vc-week__day {
-  @apply text-white surehover:hover:text-slate-300;
+  @apply text-white;
+}
+
+[data-vc-theme='dark'] button.vc-week__day {
+  @apply  surehover:hover:text-slate-300;
 }
 
 [data-vc-theme='dark'] .vc-week__day[data-vc-week-day-off] {
-  @apply text-rose-500 surehover:hover:text-rose-600;
+  @apply text-rose-500;
+}
+
+[data-vc-theme='dark'] button.vc-week__day[data-vc-week-day-off] {
+  @apply surehover:hover:text-rose-600;
 }
 
 [data-vc-theme='dark'] .vc-date[data-vc-date-selected='middle'][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,

diff --git a/package/src/styles/themes/light.css b/package/src/styles/themes/light.css
@@ -44,11 +44,19 @@
 }
 
 [data-vc-theme='light'] .vc-week__day {
-  @apply text-slate-500 surehover:hover:text-slate-600;
+  @apply text-slate-500;
+}
+
+[data-vc-theme='light'] button.vc-week__day {
+  @apply surehover:hover:text-slate-600;
 }
 
 [data-vc-theme='light'] .vc-week__day[data-vc-week-day-off] {
-  @apply text-rose-500 surehover:hover:text-rose-600;
+  @apply text-rose-500;
+}
+
+[data-vc-theme='light'] button.vc-week__day[data-vc-week-day-off] {
+  @apply surehover:hover:text-rose-600;
 }
 
 [data-vc-theme='light'] .vc-date[data-vc-date-selected='middle'][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,

diff --git a/package/src/styles/themes/slate-light.css b/package/src/styles/themes/slate-light.css
@@ -44,11 +44,19 @@
 }
 
 [data-vc-theme='slate-light'] .vc-week__day {
-  @apply text-gray-600 surehover:hover:text-gray-800;
+  @apply text-gray-600;
+}
+
+[data-vc-theme='slate-light'] button.vc-week__day {
+  @apply surehover:hover:text-gray-800;
 }
 
 [data-vc-theme='slate-light'] .vc-week__day[data-vc-week-day-off] {
-  @apply text-red-500 surehover:hover:text-red-600;
+  @apply text-red-500;
+}
+
+[data-vc-theme='slate-light'] button.vc-week__day[data-vc-week-day-off] {
+  @apply surehover:hover:text-red-600;
 }
 
 [data-vc-theme='slate-light'] .vc-date[data-vc-date-selected='middle'][data-vc-date-weekend][data-vc-date-selected] .vc-date__btn,