Questions on Kendo UI for Vue Forum

0 answers

4 views

Kendo Date Picker Overriding Custom Styles

Hello,

We are currently implementing the Kendo DatePicker within our Vue application. We have used other Kendo components such as the grid before and added our own custom styles to it with no issue, however, with the DatePicker, we are getting some weird overlap. It appears that the default Kendo styles are still being displayed despite specifying classes and adding our own styles. The correct styles work within our own dev environment (Vue and webpack), however when implemented within and application that uses Vite, the Kendo styles come through again.

I've attached screenshots to show what we're getting (KendoOverlap.png) vs what we want (CustomStyles.png) and have also attached our code for the styles.

Please let us know what we can do to resolve this, thank you!

Environment with correct styles: Vue + Webpack

Environment with incorrect styles: Vue + Vite

<styles lang="scss">
@import '@progress/kendo-theme-default/dist/all.css';
@import '@fontsource-variable/material-symbols-rounded/full.css';
@import '../scss/global.scss';

/** Prevents native date picker from showing in browsers */
input[type='date']::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
@-moz-document url-prefix() {
  input[type='date']::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}

.date-picker {
  &--active {
    .text-field {
      @extend %form-field-focus;
    }
  }
  &--activeText {
    background-color: $ds-core-color-neutral-white;
    border-color: $ds-core-color-neutral-black;
    border-radius: $ds-shape-border-radius-s;
    .k-input-inner {
      color: $ds-color-input-text-color;
    }
  }
  &__calendar {
    background-color: $ds-core-color-neutral-white;
    border-radius: $ds-shape-border-radius-m;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.14);
    padding: 6px 12px 8px 12px;
    .icon-block-button {
      .material-design-symbol {
        color: $ds-core-color-neutral-midnight;
        --symbol-wght: 400;
      }
    }
  }
  &__prev.icon-block-button {
    margin-left: auto;
  }
  &__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 19px;
  }
  /** Calendar icon weight */
  .material-design-symbol {
    --symbol-wght: 200;
  }
  /** Input styles */
  .text-field {
    //min-width: 160px;
    width: 100%;
    &__icon {
      z-index: 10;
    }
    &__input {
      color: $ds-core-color-neutral-cathedral;
      padding-right: 8px;
      &--activeText {
        color: $ds-color-input-text-color;
      }
    }
    &--active {
      @extend %form-field-focus;
    }
  }
  .dsbutton.dsbutton--ghost {
    background-color: transparent;
    &:hover {
      background-color: transparent;
    }
    .material-design-symbol {
      --symbol-wght: 400;
    }
  }
}

.dsbutton__text {
  align-items: center;
  display: flex;
  gap: 12px;
}

.k-calendar-tr.k-calendar-weekdays {
  font-size: 16px;
}
/** Adds gap between columns */
.k-calendar-table {
  border-spacing: 6px;
  width: 100%;
}
.k-calendar-range .k-calendar-view {
  width: 324px;
}
.dsbutton.dsbutton--text {
  display: flex;
  margin: auto;
}
.k-calendar-td {
  .k-link {
    font-weight: 400;
    font-size: 18px;
    padding: 6px 12px;
    border: 2px solid transparent;
    line-height: 24px;
  }
}
/** Weekday styles */
.k-calendar .k-calendar-th,
.k-calendar .k-calendar-caption,
.k-calendar .k-meta-header,
.k-calendar .k-month-header {
  color: $ds-core-color-neutral-asphalt;
  padding-inline: 10px;
}

.k-input-solid:hover {
  border-color: #bcbec0;
}
/** Date picker input text styles */
.k-input-inner {
  font-size: 18px;
  font-weight: 400;
  color: lightgray;
}

.k-calendar-view {
  min-height: 0;
}

/** Hides kendo toggle button */
.k-button.k-icon-button.k-button-solid.k-button-solid-base.k-input-button {
  display: none;
}
/** Prevents kendo nav from showing */
.k-calendar-header {
  justify-content: flex-end;
  .k-calendar-nav {
    display: none;
  }
  .k-spacer {
    display: none;
  }
  &.k-hstack {
    display: flex;
  }
}

/** Removes border and box-shadow from kendo date picker */
.k-input,
.k-input-solid {
  border-style: none;
}
.k-input-solid:focus,
.k-input-solid.k-focus {
  border-color: transparent;
  box-shadow: none;
}

/** Border radiuses added to prevent weird corner flecks */
.k-popup {
  border: 0;
  border-radius: $ds-shape-border-radius-m;
  margin-top: 4px;
}
.k-calendar-container .k-calendar,
.k-datetime-container .k-calendar {
  border-radius: $ds-shape-border-radius-m;
}
/** Current month and date styles */
.k-calendar-td.k-today {
  .k-link {
    background-color: $ds-core-color-neutral-white;
    color: black;
    border-bottom: 1.5px solid #7c7571;
  }
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
  border-radius: 2px;
}

.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
  background-color: var(--ds-date-atom-bg-color-active);
}
/** Removes box shadow focus on unselected days */
.k-calendar .k-calendar-td:focus .k-calendar-cell-inner,
.k-calendar .k-calendar-td:focus .k-link,
.k-calendar .k-calendar-td.k-focus .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-focus .k-link {
  box-shadow: none;
}
/** Hover styles */
.k-calendar .k-calendar-td:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td:hover .k-link,
.k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-hover .k-link {
  background-color: $ds-core-color-neutral-white;
  border: 1.5px solid $ds-core-color-neutral-midnight;
  border-radius: $ds-shape-border-radius-s;
  color: $ds-core-color-neutral-midnight;
}

/** Selected Date Styles */
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link {
  background-color: var(--ds-date-atom-bg-color-active);
  color: $ds-core-color-neutral-white;
  border-radius: $ds-shape-border-radius-s;
  &:hover {
    background-color: var(--ds-date-atom-bg-color-active);
    border: 2px solid var(--ds-date-atom-bg-color-active);
    border-color: var(--ds-date-atom-bg-color-active);
    color: $ds-core-color-neutral-white;
  }
}
</styles>

DatePicker

asked on 20 May 2024

1 answer

16 views

Copy-paste datepicker

Hello everyone,

I've been trying to find a simple method to copy a date from one datepicker and paste it into others since the usual Ctrl+C and Ctrl+V shortcuts don't seem to work. So far, I haven't discovered an easy solution other than utilizing events directly on the datepicker itself. However, this approach doesn't work when trying to copy a date from another source. If anyone has any alternative suggestions or solutions, I'd greatly appreciate it.

DatePicker

answered on 03 Apr 2024

1 answer

23 views

Distinguish Saturday from Sunday.

Hi!

I have a question.

I would like to mark Saturday in blue and Sunday in red.
The only information I have is the 'k-weekend' class that doesn't seem to distinguish Saturday from Sunday.

Is there a simple way to distinguish it?

I don't want to mess with props if possible.

Thanks for reply

Calendar

DatePicker

answered on 07 Mar 2024

1 answer

35 views

Set firstday on calendar

Hello,

I am using all of Date Inputs, Native Components, Knedo UI for Vue.

In My project, I want to set Sunday, Monday , Saturday like first day in week according to the variable. How can I do that?

Thanks for reply.

Calendar

DateInput

DatePicker

answered on 01 Mar 2024

0 answers

64 views

Why is my date getting parsed differently when starting out with no default value for DatePicker?

Hello,

I'm trying to have a datepicker start with no value and when the user fills it I would like the UTC date to match the datepicker's date. When I have line 17 enabled this works as I would like. However when commenting line 17 and enabling line 18, the dateModel suddenly gives a date that's one day before the datepicker's.

How can I circumvent this?

Da7opd (forked) - StackBlitz

DatePicker

asked on 27 Jun 2023

0 answers

57 views

Kendo datepicker bounces slightly when opening to the top

When the Native DatePicker opens to the top, the panel stutters/bounces slightly when opening.

Is this something that's planned to be fixed or will it maybe be fixed when the Vue DatePicker switches to the new design as seen on React and Angular counterparts?

Vue (slight bounce when opening datepicker):
Gddw4q (forked) - StackBlitz

React (no bounce when opening datepicker):
Kutbzz (forked) - StackBlitz

Thanks in advance

DatePicker

asked on 15 May 2023

0 answers

123 views

datepicker native component not rendered correctly

Hi i want to ask about datepicker in this Demo. first of all i already implement datepicker and successfully show the UI but not same like in demo. my guess is that css of datepicker is not loaded and datepicker UI looks big when i open it
i attach file of datepicker UI right now in my grid table. is there something wrong with my setup?

<datepicker 
                                              :style="{ width: '145px' }" 
                                              :default-value="new Date()"
                                              :format="'MMM DD, YYYY'"
                                              v-model="interviewDate"
                                            >
                                            </datepicker>

import { DatePicker, TimePicker } from '@progress/kendo-vue-dateinputs';

components: {
    'datepicker': DatePicker
  },

appreciate your help. thanks
you can ask if my english is confusing

DateInput

DatePicker

asked on 06 Jan 2023

1 answer

84 views

Use Kendo native component with CDN jquery culture

Currently I have a website that runs Kendo for jQuery which uses multiple cultures in the old Wrapper Components way. I want to re-use these files to change the culture of the new Kendo Native Components. Is that possible? If not, how can I do this with the new culture implementation.

Below I have added a Stackblitz with jQuery culture and Native Components which isn't working atm.

https://stackblitz.com/edit/nlfavc?file=src/main.vue

DatePicker

Localization

NumericTextBox