Telerik Forums
Kendo UI for Vue Forum
22 questions
Sort by
1 answer
78 views

Hi, 

I am trying to change the days of the week that appears at the top of the calendar in the Month view like "Monday, Tuesday" etc... . What I want is that when the screen becomes to small it will change to Mon, Tues, and so on.

As for the Week and WorkWeek Views I want to wrap the text at the top so show Mon on top and the date below when the screen gets smaller.

If there is a way to manipulate this area I would appreciate the help.

 

Thank you.

Filip
Telerik team
 answered on 06 Oct 2023
0 answers
67 views

I am using kendo native calender for my project. I want to show months in calendar.


<template>
  <div id="vueapp" class="vue-app">
    <div class="example-config">
      Number of rendered views: &nbsp;
      <numerictextbox
        :style="{ width: '230px' }"
        :min="1"
        :max="10"
        @change="handleInputChange"
        :value="views"
      >
      </numerictextbox>
    </div>
    <calendar :views="views" />
  </div>
</template>

lakmi
Top achievements
Rank 1
 asked on 16 Feb 2023
1 answer
49 views
Is there any way to localize components in vue? I found that localization does not translate all text。Can you provide a case study or refer to the corresponding documentation?
Vessy
Telerik team
 answered on 14 Nov 2023
4 answers
100 views

HI,

I used "kendo-multiviewcalendar" component & i want to select whole week days related week number by clicking on the weeknumber.

is any options to enable this? or what is the way to implement it 

Like,

    selection

:week-number="true"

:selectable="'multiple'"

 

Chathura
Top achievements
Rank 1
 answered on 06 Aug 2019
4 answers
72 views
When clicking on the month up at the top of the popup, the list of available months shows up for a second and then the calendar panel slides back in, preventing new month selection. What can be done to address this behavior and let user pick the new month from the list?
Petar
Telerik team
 answered on 14 Dec 2020
0 answers
38 views

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>
Cassie
Top achievements
Rank 1
 asked on 20 May 2024
1 answer
60 views
I need to call the addEvent method in the Scheduler without clicking into a specific time box in the UI. I basically want to do this, but in the Vue version: https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/methods/addevent

Specifically, I want to create a button on top of the calendar that will cause the event popup to appear and allow a new event to be entered into the calendar.
Can this be done with the Vue wrapper? I can't seem to access any of the methods in the underlying Scheduler widget (https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods).
Ivan Danchev
Telerik team
 answered on 13 Aug 2020
5 answers
79 views

Hello,
We use kendo for Vue and tried implementing a DateInput element in our Vue app.


When we try to use this element on a smartphone, we hoped it will use the OS date input, just like it works with any <input> element of type “date”. But we found it is rendered as type “text”.


This means the UX is not as good as we hoped it will be.
Is there a way to render it as <input> of type “date” so it will behave accordingly?

https://www.telerik.com/kendo-vue-ui/components/dateinputs-wrapper/dateinput/

 

Thanks,

Ron.

Petar
Telerik team
 answered on 12 Nov 2020
0 answers
48 views

Hello,

I am using scheduler (kendo-vue-scheduler) and calendar (kendo-vue-dateinputs)

in my project.  I am using month view and we have a requirement where I have to set Monday like first day in week. How can I do that?

Thanks & Regards

Daniela

 

Daniela
Top achievements
Rank 1
 asked on 29 Jun 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
DateTimePicker
Gantt wrapper
Chart
Chart wrappers (package)
ComboBox
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Popup
Window
Error
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?