Questions on Kendo UI for Angular Forum

1 answer

12 views

Kendo Scheduler - Give background color to a weekday based on condition

Hi,

Is there a possibility to give background colour to a weekday in Kendo Scheduler based on some conditions like how we can do it for weekends as seen in the screenshot.. We want to mark holidays in a different colour in the scheduler.

Thanks

Varun

Scheduler

answered on 29 May 2024

1 answer

16 views

Error in Kendo Scheduler slot select on Day Light Saving Day change day

To reproduce this issue please select your time zone as any time zone of US (eastern, central or pacific) select the date of date light saving change either the start or end of day light saving i.e the 2nd Sunday of March or November click on 4 am (or to be precise add your time zone offset to 2 am and click on any for example for eastern standard time any time from 2am to 7 am) it returns the wrong time. This can be observed for any kendo scheduler version from 2.1.6 to 15..1.0.

The ideal behavior for any time after the change time i,e 2 am should return the value of the slot clicked but as of now it is incorrect for any value till 2+offest of the the time zone with day light saving.

To reproduce this select a US time zone as mentioned (eastern, central or pacific) select 10th march 2024 or 3rd November 2024 and select 3am, 4 am , 5am etc.

https://stackblitz.com/edit/angular-st2crm

Let me know if you need more details

Calendar

Scheduler

answered on 06 Mar 2024

1 answer

22 views

Sender in kendoSchedulerReactiveEditing

When the scheduler call createFormGroup In kendoSchedulerReactiveEditing property miss the sender SchedulerComponent.
How can i take the sender?

thank you

Scheduler

answered on 29 Feb 2024

1 answer

39 views

Scheduler not localizing

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

(this.intlService as CldrIntlService).localeId = this.localeConfig.settings.locale;

Other kendo components are working fine like the datepicker

Scheduler

answered on 27 Nov 2023

1 answer

73 views

Scheduler Scroll view returns to top after refresh

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

Scheduler

answered on 24 Nov 2023

2 answers

104 views

Does the Angular Scheduler have drag and drop functionality like the JQuery version

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

ListView

Scheduler

answered on 15 Nov 2023

1 answer

39 views

Angular Scheduler Event Padding/Margins

Hi,

I need to add some margins to the events, so that they look like this:

Is there a way to achieve that with Kendo Scheduler for Angular?

Thanks

Scheduler

answered on 30 Oct 2023

1 answer

33 views

Scheduler: How to remove event from DB after confirmation dialog pop up

Hi ,

I need to remove an event when the user removes it by clicking on the X link which appears when he hovers over it. Currently what happens is this:

- the removeEvent is triggered right away

- then the confirmation dialog appears

But I need to add my code only after the Yes button is clicked on that dialog. Is there an event for that?

I also tried to use my own dialog, so I prevent the default behavior of the remove event, but in this case the widget does not remove the event. So I would like to know how to do it programmatically. Thanks.

Regards,

Anton

Scheduler

answered on 20 Oct 2023

1 answer

97 views

In Scheduler for Month view . What is the max number of events that can be displayed on single day.

As of Now I am only able to 2 event's /Meeting per day in Month view.
Looks like I need to go day view when I have more than 2 events ?Meeting per day.
can we just view all the events/meeting around 5-6 in a month view on single day.
Please advise.

Scheduler

answered on 12 Oct 2023

1 answer

78 views

Scheduler isAllDay flag

Hello Kendo community!

I hope you're all doing well. I'm currently working with the Kendo Angular Scheduler, and I have a question regarding the "isAllDay" flag in the SchedulerEvent object.

I've been trying to set the "isAllDay" property to false for certain events to indicate that they are not all-day events. However, I've noticed that this property seems to be getting overwritten or not behaving as expected.

Despite explicitly setting "isAllDay" to false, I'm encountering issues where it appears to be overridden each time the event is longer than 24h.

I've reviewed the documentation, but I couldn't find a solution. Has anyone else experienced a similar issue, or is there something I might be missing in my configuration?

Any help or insights would be greatly appreciated. Thank you in advance for your assistance!

Best regards,

Damian

Scheduler