Hi! We added a Scheduler in our project but it seems the calendar parts are not localizing

We already set localId to the proper culture/language code

Other kendo components are working fine like the datepicker

Hello,

I have a kendo UI Scheduler which is used to load events.

I have an issue that when I close an item and it reloads the data, the calendar scrolls up to the top, losing the focus.

Here's a snippet of code:

 doubleClickInSingleClick(event: any, popupInstance: any) {
    if (this.eventClickTime == 0) {
      // set first click
      this.eventClickTime = new Date().getTime();
    } else {
      // compare first click to this click and see if they occurred within double click threshold
      if (new Date().getTime() - this.eventClickTime < 250) {
        // double click occurred
        this.productInstanceId = event.id;
        this.popupInstanceRef = this.modalService.open(popupInstance, {
          size: "xl",
        });
        this.popupInstanceRef.result.then(noop, () => {
          this.calendarBehavior.loadCalendarData();
        });
        this.eventClickTime = 0;
      } else {
        // not a double click so set as a new first click
        this.eventClickTime = new Date().getTime();
      }
    }
  }

And here's the HTML

<div id="scheduler" style="overflow-x: auto; white-space: nowrap">
      <kendo-scheduler
        #schedulerComponent
        [kendoSchedulerBinding]="(this.calendarBehavior.events | async)!"
        style="overflow: none; min-width: 750px"
        [loading]="(this.calendarBehavior.loading| async)!"
        [selectedDate]="this.calendarBehavior.selectedDate"
        [selectedViewIndex]="3"
        (dateChange)="this.calendarBehavior.onDateChange($event)"
      >
        <kendo-scheduler-day-view>
          <ng-template kendoSchedulerEventTemplate let-event="event">
            <div (click)="doubleClickInSingleClick(event, instanceModal)">
              <!-- Added this hidden label as calendar sorting bu the text inside the event, where can sort by alerts and can have un expected sortion -->
              <label style="width: 1px; height: 1px; color: transparent"
                >{{ event.dataItem.dataItem.instance.productSku }}
                {{ event.dataItem.dataItem.instance.groupNumber }}
              </label>
              <span
                *ngIf="
                  event.dataItem.instance.ticketCount <
                  event.dataItem.instance.bookedCount
                "
                class="ticket-alert-icon"
                style="font-size: 10px"
              >
                <i class="fas fa-ticket-alt"></i>
                <i class="fas fa-exclamation-circle text-warning bg-light"></i>
              </span>
              <span
                *ngIf="event.dataItem.instance.tourOperatedByPartner"
                class="partner-icon"
              >
                <i class="fas fa-handshake"></i>
              </span>
              <span *ngFor="let iconPath of event.description.split(';')"
                ><img
                  *ngIf="event.description.length > 0"
                  class="alert-icon"
                  src="{{ this.calendarBehavior.getImageUrl(iconPath) }}"
                  width="10"
                />&nbsp;</span
              >
              <span
                [style.color]="event.dataItem.dataItem.titleColor"
                [style.font-size.px]="'10'"
              >
                {{ event.title }} </span
              >
            </div>
          </ng-template>
        </kendo-scheduler-day-view>
 
        <kendo-scheduler-week-view> </kendo-scheduler-week-view>
 
        <kendo-scheduler-month-view>
          <ng-template kendoSchedulerEventTemplate let-event="event">
            <div (click)="doubleClickInSingleClick(event, instanceModal)">
              <span
                [style.color]="event.dataItem.dataItem.titleColor"
                [style.font-size.px]="'10'"
              >
                {{ event.title }}</span
              >
            </div>
          </ng-template>
        </kendo-scheduler-month-view>
 
        <kendo-scheduler-agenda-view>
          <ng-template kendoSchedulerEventTemplate let-event="event">
            <div (click)="doubleClickInSingleClick(event, instanceModal)">
              <!-- Added this hidden label as calendar sorting bu the text inside the event, where can sort by alerts and can have un expected sortion -->
              <label style="width: 1px; height: 1px; color: transparent"
                >{{ event.dataItem.dataItem.instance.productSku }}
                {{ event.dataItem.dataItem.instance.groupNumber }}</label
              >
              <span
                *ngIf="
                  event.dataItem.instance.ticketsRequired &&
                  event.dataItem.instance.ticketCount <
                    event.dataItem.instance.bookedCount
                "
                class="ticket-alert-icon"
              >
                <i class="fas fa-ticket-alt"></i>
                <i class="fas fa-exclamation-circle text-warning bg-light"></i>
              </span>
              <span *ngIf="event.dataItem.instance.tourOperatedByPartner" class="partner-icon">
                <i class="fas fa-handshake"></i>
              </span>
              <span *ngFor="let iconPath of event.description.split(';')"
                ><img
                  *ngIf="event.description.length > 0"
                  class="alert-icon"
                  src="{{ this.calendarBehavior.getImageUrl(iconPath) }}"
                  width="24"
                />&nbsp;</span
              >
              <span [style.color]="event.dataItem.dataItem.titleColor">
               {{event.dataItem.instance.tourOperatedByPartner ? event.dataItem.instance.companyName + " - " : ""}}{{ event.title }} </span
              >
            </div>
          </ng-template>
        </kendo-scheduler-agenda-view>
      </kendo-scheduler>

If I comment the this. calendar behavior.loadCalendarData(); the scroll position is maintained. is there a simple way I can tell the Scheduler to maintain the position?

On a really old version of Kendo UI components, it was not pushing to the top.

Any suggestion?

Thanks

I'm using the Kendo Angular editor in my application and am wondering if there is a way to customize the Insert Link directive that is used by default? The dialog is working fine but I need to enforce that users prefix the URL with (http:// or https://).

I have looked through all the documentation I can find and am unable to find a way to alter it for Angular.

Alternatively is there an event that can be hooked into once the dialog is closed to do the validation there?

Thanks in advance.

Hi there, 

I have read through existing posts before asking this question and searching the forum didn't yield a clear answer, so I'll ask the question and forgive me if asked previously.

I'd like to know if this component can be used for the scenario of gym management. In that scenario, let's say there are 10 classes per day and each class has 16 slots that any member can book into. A booking decrements available spots (which we would handle on our backend) but the calendar could display the available spots if there are any returned (e.g. 5 spots available) and change color if completely full (which would also disable a booking option). Again, happy to code the logic ourselves but wonder if anyone has used the scheduler in a similar way and/or could share an example of a live/working site.

Similarly if this is just the wrong product and anyone has an idea of what would be the right one, happy to hear that too..

The extensibility of this calendar (languages, timezones etc) make it very attractive for our needs.

thanks,

Patrick

Hi All

I have old licence expired on Jul 24, 2021 . I will start new project with Angular 16 but my old licence is not matching with Angular CLI version. When i added my new project my licence its always showing invalid licence ... 

On my old project and version i can compatible with these version but not appropriate with Angular cli 16.1.8 

 "@progress/kendo-angular-barcodes": "^1.0.0",
    "@progress/kendo-angular-buttons": "^6.0.0",
    "@progress/kendo-angular-charts": "^5.4.0",
    "@progress/kendo-angular-common": "^2.0.0",
    "@progress/kendo-angular-conversational-ui": "^4.0.0",
    "@progress/kendo-angular-dateinputs": "^6.0.3",
    "@progress/kendo-angular-dialog": "^5.2.3",
    "@progress/kendo-angular-dropdowns": "^6.0.2",
    "@progress/kendo-angular-excel-export": "^4.0.4",
    "@progress/kendo-angular-filter": "^0.1.6",
    "@progress/kendo-angular-gauges": "^4.1.3",
    "@progress/kendo-angular-grid": "^6.1.3",
    "@progress/kendo-angular-icons": "^11.2.0",
    "@progress/kendo-angular-indicators": "^1.1.3",
    "@progress/kendo-angular-inputs": "^8.0.9",
    "@progress/kendo-angular-intl": "^3.1.3",
    "@progress/kendo-angular-l10n": "^3.0.4",
    "@progress/kendo-angular-label": "^3.1.3",
    "@progress/kendo-angular-layout": "^6.6.0",
    "@progress/kendo-angular-listview": "^2.0.3",
    "@progress/kendo-angular-messages": "^1.49.0",
    "@progress/kendo-angular-notification": "^3.0.5",
    "@progress/kendo-angular-pdf-export": "^3.0.4",
    "@progress/kendo-angular-popup": "^4.0.6",
    "@progress/kendo-angular-progressbar": "^2.0.4",
    "@progress/kendo-angular-treeview": "^6.0.2",
    "@progress/kendo-angular-upload": "^8.0.2",
    "@progress/kendo-data-query": "^1.5.6",
    "@progress/kendo-drawing": "^1.1.2",
    "@progress/kendo-file-saver": "^1.1.1",
    "@progress/kendo-licensing": "^1.0.0",
    "@progress/kendo-svg-icons": "^1.4.0",
    "@progress/kendo-theme-default": "^4.44.0",
    "@progress/kendo-theme-material": "^5.3.1",

Can you please suggest which version is compatible with my licence and angular cli 16.1.8

Thanks

I’m using Kendo PDFViewer ver 13.1.0, and this is what my codes look like:

As you can see I didn’t set any toolbar on it and by default it should show all the toolbar options that is included by the package, 

But the issue here is that if the user start to search using the ‘search’ from toolbar option, it is somehow broken as you can see in the picture. The detected key is not highlighted properly.

Can someone assist me with this concern?

Thanks!

We are trying to make certain field (title) read-only in the Gantt task editor. Below is the sample code

  private createFormGroup(dataItem: GanttTask): FormGroup {
    return new FormGroup({
      id: new FormControl(dataItem.id),
      start: new FormControl(dataItem.start),
      end: new FormControl(dataItem.end),
      completionRatio: new FormControl(dataItem.completionRatio),

      title: new FormControl({value:dataItem.title, disabled:true}),
     //title: new FormControl(dataItem.title),    });

  }

Basically this change makes the field not display at all. 

Hi 

I've used your jQuery version of the Scheduler in an MVC app where I utilised a feature where you can drag and drop from a list view to the scheduler to create events.

Is this functionality available in the Angular version of the component? If there is could you supply a link to a sample implementation.

Also is the a way to create bespoke views again similar to the feature in jQuery version of the scheduler component. e.g. I would like to create a rolling week view (where the view starts at today -1 and ends after a specified number of days) and a rolling work week which is similar but skips weekends)

Many Thanks

In the kendo grid there is a "size" property that can be set at runtime. We want to expose this option to the user. This means the value can change at runtime. This works as expected and changing the value at runtime to "small" makes the rows in the grid more compact.

The problem now arises when we enable virtual scrolling. When using this feature the property "rowHeight" has to be set in order for the virtual scrolling to work properly. Changing the "size" property obviously changes the row height. Therefore we tried to also update it at runtime. However this change does not seem to affect the grid. The virtual scrolling is still broken.

Is there a way to change the "rowHeight" property at runtime and get the changes applied to virtual scrolling?

I created a minimal StackBlitz based on your local virtual scrolling example. It changes the size and rowHeight in the ngAfterViewInit-method:
Kendo Grid dynamic row height - StackBlitz