Same days are displaying in month view

[obaid]

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.

[mai]

I have the same issue , I ask if there is a template for header 

[Martin]

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

[obaid]

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.

[Martin]

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

[Richy]

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>

[Martin]

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

[mai]

I have the same issue , please any help

[Yanmario]

Hi Mai,

As we can't reproduce or determine the root cause of the issue from the screenshot, could you provide us with a runnable example that demonstrates the issue from the provided screenshot?  That will help us troubleshoot and determine the root cause of the issue.
Thank you in advance for your cooperation.

Regards,
Yanmario
Progress Telerik

[Vaibhav]

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>

[Martin]

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