[example/css] CSS to align styling to Preline UI's calendar.

[Dániel Gulyás]

Hey there,

Thanks for your work on the lib @nathanreyes, it works perfect for our use-case, and spared me plenty of work. I did some hacking about to align the styling to that of Preline UI's. See below.

Note: this is quick and dirty, but works for majority of use-cases. There could be weird edge cases w/ the prev/next-month highlight in a 2-column layout (selecting backwards for example).

The css looks like this (PostCSS+Tailwind):

.vc-pane-layout {
  @apply p-3 gap-8
}

.vc-weeks {
  @apply p-0
}

.vc-header {
  @apply mt-0 mb-3
}

.vc-pane-header-wrapper {
  @apply pt-3 px-2
}

.vc-title {
  @apply font-sans text-base !font-medium text-gray-800 hover:text-gray-600 hover:!opacity-100
}

.vc-arrow {
  @apply bg-white hover:!bg-white;
}

.vc-arrow:hover > .vc-base-icon {
  @apply bg-gray-100;
}

/* This is a hack because .vc-arrow is in a grid, and it's size can't be changed. */

.vc-arrow > .vc-base-icon {
  @apply size-7 p-[6px] rounded-full text-gray-800 hover:bg-gray-100
}

.vc-weekday {
  @apply w-10 block text-center text-sm text-gray-500 font-normal
}

.vc-week {
  @apply my-[2px]
}

/* Normal day. */

.vc-day {
  @apply size-10 block p-px
}

.vc-day .vc-day-content {
  @apply h-full w-full text-sm font-normal text-gray-800 border border-transparent hover:border-blue-600 hover:text-blue-600 hover:bg-white;
}

.vc-day.is-not-in-month .vc-day-content {
  @apply text-gray-300 opacity-100
}

.vc-day.in-month .vc-day-content.vc-highlight-content-solid {
  @apply font-medium text-white bg-blue-600
}

.vc-day.in-month .vc-day-content.vc-highlight-content-outline {
  @apply font-medium text-white bg-blue-600
}

/* Highlighting. */

.vc-day.in-month:has(.vc-highlights) {
  @apply bg-gray-100
}

.vc-day:has(.vc-highlight.vc-highlight-bg-solid) {
  @apply rounded-full
}

.vc-day.on-left:has(.vc-highlights) {
  @apply !rounded-l-full
}

.vc-day.on-right:has(.vc-highlights) {
  @apply rounded-r-full
}

.vc-day:has(.vc-highlight-bg-outline) {
  @apply rounded-full
}

.vc-day:has(.vc-highlight-base-start):not(.on-right) {
  @apply !rounded-none !rounded-l-full
}

.vc-day:has(.vc-highlight-base-end):not(.on-left) {
  @apply !rounded-none !rounded-r-full
}

.vc-day.in-next-month.day-1:has(.vc-highlights) {
  @apply bg-gradient-to-r from-gray-100
}

/* Highlight an intermittent day, where it has a highlight after. (otherwise, on a 2 column calendar, the last day of month will be highlighted on the right side too)  */
.vc-day.in-prev-month.day-from-end-1:has(.vc-highlights):has(+ .vc-day.in-month .vc-highlights)  {
  @apply bg-gradient-to-l from-gray-100 w-full h-full !opacity-100
}

/* Reset styles. */

.vc-focus:focus-within {
  box-shadow: none;
}

.vc-day > .vc-highlights {
  @apply invisible;
}

Cheers,
– Dani

[Dániel Gulyás]

The approach was inspired by shadcn-vue: src, demo.