Questions on Kendo UI for Angular Forum

I am using kendo Multiview calendar .I am expecting that when I click on any of the Weeknumber, complete week should be selected . Kindly help on this . Is there any click event available ?

DateRange

MultiViewCalendar

answered on 04 Oct 2023

1 answer

51 views

Kendo MultiView Calendar -I need to make the weekDay starts from Monday

I am using kendo Multiview calendar . Current implementation is the start day of the week is from Sunday.
I need to make start day of the week as Monday .Kindly help on this

My sample code :

<kendo-daterange>
<div class="row">
<div class="col-md-6">
<kendo-floatinglabel text="Start">
<kendo-dateinput kendoDateRangeStartInput [min]="minDate" [(value)]="range.start"></kendo-dateinput>
</kendo-floatinglabel>
</div>
<div class="col-md-6">
<kendo-floatinglabel text="End">
<kendo-dateinput #endDateInput kendoDateRangeEndInput [max]="maxDate" [(value)]="range.end"></kendo-dateinput>
</kendo-floatinglabel>
</div>
</div>

<kendo-daterange-popup>
<ng-template kendoDateRangePopupTemplate>
<kendo-multiviewcalendar kendoDateRangeSelection [selectionRange]="range" [weekNumber]="true"
(selectionRangeChange)="handleSelectionRange($event)">

<ng-template kendoCalendarWeekNumberColumnTemplate let-context="cellContext">
<span class="weeknumber-cell">{{context.formattedValue}}</span>
</ng-template>
</kendo-multiviewcalendar>
</ng-template>

</kendo-daterange-popup>
</kendo-daterange>

DateRange

MultiViewCalendar

answered on 04 Oct 2023

1 answer

55 views

I need to style the WeekNumber coumn on a kendo-daterange component.

I am using kendo-daterange component. I need to apply background color for the week number column since weeknumber column is greyed out more .

My pesudo code below:
--------------------
Styles :
-------
.weeknumber-cell{
color : red;
}
------
<kendo-daterange>
<kendo-daterange-popup>
<ng-template kendoDateRangePopupTemplate>
<kendo-multiviewcalendar kendoDateRangeSelection [selectionRange]="range" [weekNumber]="true"
(selectionRangeChange)="handleSelectionRange($event)">
<ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
<span class="weeknumber-cell">{{context.formattedValue}}</span>
</ng-template>
</kendo-multiviewcalendar>
</ng-template>
</kendo-daterange-popup>
</kendo-daterange>

Calendar

DateRange

MultiViewCalendar

updated answer on 20 Sep 2023

0 answers

36 views

Date range with calendar icon at suffix

Is it possible to have the date range with calendar icons?

Like the below image:

Thanks!

DateRange

asked on 16 Feb 2023

1 answer

115 views

Value issues when wrapping DateRange in custom component

Hey everyone!

I'm currently trying to wrap a DateRange component inside of a custom component in my application so that I can add boilerplate configuration in a single place. Everything was going well until I tried to set the value from a parent component. When I attempt to set the value writeValue inside the component is called properly and sets the value HOWEVER the value is then immediately overwritten and a "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'Thu Feb 02 2023 10:56:57 GMT-0600 (Central Standard Time)'. Current value: 'null'" error is written to the console. If I look at the stacktrace it is pointing to the start date input in the component template.

Is there something in the component lifecycle that could be causing this issue? I have verified that nothing else attempts to set the value of the component.

Thanks in advance for any help or insight.

component.html

<kendo-daterange>
  <kendo-floatinglabel text="{{label}}">
    <kendo-dateinput kendoDateRangeStartInput [min]="selectRange.startDate" [max]="selectRange.endDate" [(value)]="startDate" fillMode="outline"></kendo-dateinput>
  </kendo-floatinglabel>
  <kendo-floatinglabel text="">
    <kendo-dateinput kendoDateRangeEndInput [min]="selectRange.startDate" [max]="selectRange.endDate" [(value)]="endDate" fillMode="outline"></kendo-dateinput>
  </kendo-floatinglabel>
  <kendo-daterange-popup (close)="onClose()"></kendo-daterange-popup>
</kendo-daterange>

component.ts

import {Component, forwardRef, Input, OnInit, ViewEncapsulation} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TICKET_DATE_FORMAT, DATE_CONSTS } from 'core/constants';
import { DateRange } from 'core/models/date-range';

@Component({
    selector: 'lm-date-range',
    templateUrl: './lm-date-range.component.html',
    styleUrls: ['./lm-date-range.component.scss'],
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi:true,
          useExisting: LMDateRangeComponent
        }
      ]
  })
  
export class LMDateRangeComponent implements ControlValueAccessor, OnInit {

    protected selectRange: DateRange = {startDate: DATE_CONSTS.MIN_DATE, endDate: DATE_CONSTS.MAX_DATE};
    protected dateFormat = TICKET_DATE_FORMAT;

    onChange = (value: DateRange) => {};
    onTouched = () => {};
    touched = false;
    disabled = false;

    @Input() label: string;
    startDate: Date = null;
    endDate: Date = null;
    value: DateRange = null;

    constructor() {
        var x = 5;
    }

    ngOnInit(): void {
        var x = 5;
    }

    writeValue(selected: DateRange) {
        this.onChange(selected);
        if (selected) {
            this.value = {
                startDate: typeof selected.startDate === 'string' ? new Date(selected.startDate) : selected.startDate,
                endDate: typeof selected.endDate === 'string' ? new Date(selected.endDate) : selected.endDate,
            };    
            this.startDate = this.value.startDate;
            this.endDate = this.value.endDate;
        }
        else {
            this.value = null;
            this.startDate = null;
            this.endDate = null;
        }
    }

    registerOnChange(onChange: any) {
        this.onChange = onChange;
    }

    registerOnTouched(onTouched: any) {
        this.onTouched = onTouched;
    }

    markAsTouched() {
        if (!this.touched) {
            this.onTouched();
            this.touched = true;
        }
    }

    setDisabledState(disabled: boolean) {
        this.disabled = disabled;
    }

    onClose() {
        this.markAsTouched();
        this.value = { startDate: this.startDate, endDate: this.endDate };
        this.onChange(this.value);
    }
}

parentcomponent.html (just the component definition)

<lm-date-range formControlName="issueDateRange" label="Issue Date/Timeframe" class="range-input"></lm-date-range>

parentcomponent.ts

(the ticket variable is passed as an input to this component)

ngOnInit() {
    if (this.ticket) {
      this.f.issueDateRange.setValue({startDate: this.ticket.startDate, endDate: this.ticket.endDate});
    }
    else {
      this.f.issueDateRange.setValue({startDate: newDate(), endDate: newDate()})
    }
}

DateInput

DateRange

answered on 06 Feb 2023

1 answer

111 views

Is it possible to have a kendo-multiview calendar drop from a DatePicker

I am attempting to functionally create a week picker, but I would like it to dropdown like the standard kendo DatePicker does. Is there a way to do this exclusively with Kendo UI components, or will I need to create my own dropdown button with the selected data as a label for it? Essentially I am attempting to create something like this below. That will collapse to just the selected range bar when not clicked on

DatePicker

DateRange

answered on 17 Jun 2022

0 answers

32 views

Export as PDF w/ Angular Date Range - Can't set background of controls to transparent/none

Hi, I'm working on generating a PDF of a form I've created and I'm trying to style the PDF so that inputs have no background and just show their entered text. I've been able to do this with all of the form elements aside from my Kendo date range. For some reason, I cannot set the background of these inputs for the PDF.

When I set the background to transparent in the regular CSS, it works, and the PDF is generated without the background... but when I set the background to transparent just for the PDF CSS, it does not.

I've tried using both background, background-color, background: transparent, background: none, etc. with no luck.

Stackblitz: https://stackblitz.com/edit/kendo-angular-date-range-gxnuby (try downloading the PDF - background of date inputs will be white)

.k-pdf-export .k-dateinput-wrap, .k-pdf-export .k-dateinput-wrap {
  background: transparent !important;
  border: 3px solid red;
}

DateRange

PDF Export

updated question on 24 Mar 2022

1 answer

67 views

Is there a way to define different default operator for primary and secondary criteria for DateRange filter?

When using Menu filters I can define date range filter in the following way

<kendo-grid-date-filter-menu
    [filter]="filter"
    [operator]="filterOperator"
    [column]="column"
    [filterService]="filterService"
    [extra]="true"
  >
    <kendo-filter-gte-operator text="{{'Is greater or equal'|i18n}}"></kendo-filter-gte-operator>
    <kendo-filter-gt-operator text="{{'Is greater than'|i18n}}"></kendo-filter-gt-operator>
    <kendo-filter-lte-operator text="{{'Is less or equal'|i18n}}"></kendo-filter-lte-operator>
    <kendo-filter-lt-operator text="{{'Is less than'|i18n}}"></kendo-filter-lt-operator>
    <kendo-filter-eq-operator text="{{'Is equal to'|i18n}}"></kendo-filter-eq-operator>
    <kendo-filter-neq-operator text="{{'Is not equal to'|i18n}}"></kendo-filter-neq-operator>
    <kendo-filter-isempty-operator text="{{ 'Is empty' | i18n }}"></kendo-filter-isempty-operator>
    <kendo-filter-isnotempty-operator text="{{ 'Is not empty' | i18n }}"></kendo-filter-isnotempty-operator>
  </kendo-grid-date-filter-menu>

Both the primary and secondary search criteria now get the same list of operators and in the same order. As the end used most likely wants to filter some date range this means that every time the user needs to also change the operator in addition to selecting dates. So is there a built-in way to have a different default operator for only the secondary criteria?

Even more cool would be some kind of interactive selection component where user can define start and end date. Similar to DateRange picker of materia UI.

DateRange

Grid

answered on 23 Mar 2022

0 answers

42 views

Angular Application when deployed through CICD pipeline does not apply styles on kendo dropdownlist

Hi,

When an angular application with kendo dropdown list and date range control is being deployed through CICD pipeline, it does not apply the style and hence the UI for kendo controls is not shown as shown on local machine.

Pl. help.

DateRange

DropDownList

General Discussions