This is a migrated thread and some comments may be shown as answers.

Same days are displaying in month view

7 Answers 19 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
obaid
Top achievements
Rank 1
obaid asked on 03 Mar 2021, 07:31 AM

We are integrating Kendo Scheduler month view but having issue.

Issue: Same week days are displaying line ['Thursday, Thursday, Thursday, Thursday, Thursday, Thursday, Thursday] instead of ['Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday'].

Need your response on urgent basis.

7 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 04 Mar 2021, 02:12 PM

Hello Obaid,

Thank you for the provided screenshot.

I noticed the issue, but based on the provided details I am not sure what causes it. I tried to reproduce it with the following example, but the days seem to be displayed as expected:

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

Please may I ask you for a runnable demo or isolated project that demonstrates the reported issue. Check and compare the above example with your local implementation and update the example with the missing parts. Thank you for your cooperation.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
obaid
Top achievements
Rank 1
answered on 08 Mar 2021, 07:39 AM

Hello Martin,

Thanks for your reply.

Here I am sending files from my angular project as .ts and .html for your understanding.  

Please let me know ASAP where I am going wrong that causes the issue.

0
Martin
Telerik team
answered on 09 Mar 2021, 10:56 AM

Hi Obaid,

Thank you for the additional details provided on this case.

I inspected the provided markup but didn't notice anything suspicious. The HTML markup looks valid, and there is no additional customization for the Month view. The only code related to that view is correct:

 <ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
        <strong>{{ date | date : 'dd/MM' }}</strong>
   </ng-template>
 <kendo-scheduler-month-view>
 </kendo-scheduler-month-view>

I also updated the demo, trying to replicate the same markup as close as possible, but cannot reproduce the issue.

https://stackblitz.com/edit/angular-jbaujt-yx6dj1

What I could suggest at this point is to strip the Scheduler from any custom code, leaving only the Month view definition, and check if there is any difference. 

Also, ensure that the used Scheduler package is up to date:

https://www.telerik.com/kendo-angular-ui/components/scheduler/changelog/

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

In case the issue persists, please try to replicate the issue in an isolated app or StackBlitz. Thank you in advance.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Richy
Top achievements
Rank 1
answered on 17 Mar 2021, 10:38 AM

Hi Martin,

The issue is not only with month view header template but also with day and week. Attaching the files for your reference.

if the html is like this

<kendo-scheduler editable
                        [kendoSchedulerBinding]="events"
                        [kendoSchedulerReactiveEditing]="createFormGroup"
                        [selectedDate]="vm.data.selectedDate"
                        style="height: 600px;">

                                <kendo-scheduler-day-view>
                                </kendo-scheduler-day-view>

                                <kendo-scheduler-week-view>
                                </kendo-scheduler-week-view>

                                <kendo-scheduler-month-view [eventHeight]="50">
                                </kendo-scheduler-month-view>

                                    <ng-template kendoSchedulerEditDialogTemplate
                                        autoFocusedElement=".title-input"
                                        let-formGroup="formGroup" let-isNew="isNew" let-editMode="editMode">
                                        <div class="k-form-inline">
                                            <div class="k-form-field">
                                                <span>{{'Title' | localize}}</span>
                                                <input class="k-textbox title-input" placeholder="Title" [formControl]="formGroup.get('title')" />
                                            </div>
                                            <div class="k-form-field k-datetime-picker-wrapper">
                                                <span>{{'Start' | localize}}</span>
                                                <kendo-datepicker [formControl]="formGroup.get('start')">
                                                </kendo-datepicker>
                                                <kendo-timepicker [formControl]="formGroup.get('start')" *ngIf='!formGroup.controls.isAllDay.value'>
                                                </kendo-timepicker>
                                            </div>
                                            <div class="k-form-field k-datetime-picker-wrapper">
                                                <span>{{'End' | localize}}</span>
                                                <kendo-datepicker [formControl]="formGroup.get('end')">
                                                </kendo-datepicker>
                                                <kendo-timepicker [formControl]="formGroup.get('end')" *ngIf='!formGroup.controls.isAllDay.value'>
                                                </kendo-timepicker>
                                            </div>
                                            <div class="k-form-field">
                                                <input type='checkbox' id='k-is-allday-chkbox' class='k-checkbox' [formControl]="formGroup.get('isAllDay')" />
                                                <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{'AllDayEvent' | localize}}</label>
                                            </div>
                                            <div class="k-form-field" *ngIf="isEditingSeries(editMode)">
                                                <kendo-recurrence-editor [formControl]="formGroup.get('recurrenceRule')">
                                                </kendo-recurrence-editor>
                                            </div>
                                        </div>
                                    </ng-template>
                        </kendo-scheduler>

 

 

but when we add the following templates API inside the <kendo-scheduler>, which overrides the default templates

the issues with day and week are gone. Even the repetition data in month also changed.

But there is not such template API for changing the Month header, so issue with that remains.

 

<ng-template kendoSchedulerMajorTimeHeaderTemplate let-date="date">
            <strong>{{ date | date : 'h:mm a'}}</strong>
</ng-template>

<ng-template kendoSchedulerDateHeaderTemplate let-date="date">
          <strong>{{ date | date : 'E, d' }}</strong>
</ng-template>

<ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
         <strong>{{ date | date }}</strong>
</ng-template>

0
Martin
Telerik team
answered on 19 Mar 2021, 08:05 AM

Hi Richy,

Thank you for the additional details provided on this case.

I understand what the issue is, but I cannot determine what causes it without a runnable demo or an isolated project. Using the provided HTML rendered the correct days in the following StackBlitz:

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

If you have the time please compare it with your local implementation and update the parts that differ. Thank you for your cooperation. 

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Vaibhav
Top achievements
Rank 1
Veteran
answered on 26 Mar 2021, 02:20 PM

Hello,

We are integrating kendo scheduler angular which is having issue for data rendering.

We are calling an api and pushing the data to array for first time when page load it is not showing any data. I debug the code data is going into binded events just need to render when it loads for first time.

When we are clicking to week or month at that time it shows data. (anything for refreshing the scheduler).

We are using kendo scheduler, Facing an issue that data items (events) are being binded in the kendoSchedulerBinding. But its not rendering in UI, when we swap between MonthView or Week View or Day View it's automatically rendering in UI.

Providing image after click on week view.

 

<kendo-scheduler [kendoSchedulerBinding]="schedulerEvent"
                                         [modelFields]="editService.fields"
                                         [slotDuration]="60"
                                         [editable]="true"
                                         [selectedDate]="selectedDate"
                                         (slotDblClick)="slotDblClickHandler($event)"
                                         (eventDblClick)="eventDblClickHandler($event)"
                                         (remove)="removeHandler($event)"
                                         (drop)="onDrop($event)"
                                         style="height: 800px;">
                            <kendo-scheduler-day-view>
                            </kendo-scheduler-day-view>
                            <kendo-scheduler-week-view>
                            </kendo-scheduler-week-view>
                            <kendo-scheduler-month-view>
                            </kendo-scheduler-month-view>
                        </kendo-scheduler>
                        <scheduler-edit-form [event]="editedEvent" #remindermodal
                                             [editMode]="editMode"
                                             [isNew]="isNew"
                                             (save)="saveHandler($event)"
                                             (cancel)="cancelHandler()"
                                             style="display: block; margin-top: 20px;">
                        </scheduler-edit-form>

0
Martin
Telerik team
answered on 30 Mar 2021, 07:27 AM

Hello Vaibhav,

I noticed that a similar public forum thread was opened. Please find the answer there as the reported issue is not directly related to the current title of the thread:

https://www.telerik.com/forums/kendo-scheduler-event-rendering-issue-at-start

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
obaid
Top achievements
Rank 1
Answers by
Martin
Telerik team
obaid
Top achievements
Rank 1
Richy
Top achievements
Rank 1
Vaibhav
Top achievements
Rank 1
Veteran
Share this question
or