Cannot Use Scheduler Custom View in Kendo UI for jQuery Scheduler

Nate

2 posts

Member since:
May 2018

Posted 06 Jun 2018 Link to this post

I am trying to follow the official doc to learn how to use a custom view on scheduler. But the catch is that I am using it in Angular 5 and importing the view from a JS script. So, I am getting the following error - https://pastebin.com/p4gLuKfv

The JS file is this - https://pastebin.com/Xy9tcY6J

The Angular Component File is this - https://pastebin.com/0p1xHPus

It would be helpful, if someone can point me to why the error is happening.

Nate

2 posts

Member since:
May 2018

Posted 06 Jun 2018 in reply to Nate Link to this post

The issue was that CustomMonthView could not be found. So, I added this inside function definition in kendo.customMonthView.js -
$.extend(true, ui, { CustomMonthView: CustomMonthView
});
Additionally, referenced the view type in angular component as 'kendo.ui.CustomMonthView'.

yash

11 posts

Member since:
Jul 2020

Posted 22 Jul 2020 Link to this post

I am using a custom day view in Jquery, while clicking on that getting an error of " Unable to get property '0' of undefined or null reference".
Here is the extended code for that:
var CustomAgenda5 = kendo.ui.MultiDayView.extend({ options: { majorTick: 5 } }); var CustomAgenda10 = kendo.ui.MultiDayView.extend({ options: { majorTick: 10 } }); var CustomAgenda15 = kendo.ui.MultiDayView.extend({ options: { majorTick: 15 } });

views:[ { type: "day", majorTick: 15 },
{ type: "CustomAgenda5", title: "5 min" },
{ type: "CustomAgenda10", title: "10 min" },

{ type: "CustomAgenda15", title: "15 min"} ] ],

Please refer the attached file

Capture.png

Martin

Admin

277 posts

Posted 23 Jul 2020 Link to this post

Hello Yash,

Thank you for the provided code snippet.

I tested it in this Dojo example, and there is no error in the console, and the code seems to be working as expected. Could you please modify it to reproduce the issue you are experiencing?

Regards,
Martin
Progress Telerik

yash

11 posts

Member since:
Jul 2020

Posted 23 Jul 2020 in reply to Martin Link to this post

Thanks Martin, I found the root cause for it. Yes it was working fine in Dojo, but in my code I have to write CustomAgenda5 instead of "CustomAgenda5" under the views Section. After changing , it was working fine.
Can you please help me with another issue, I want to place these buttons before the Manual Refresh button available on the Kendo scheduler. Manual refresh button is initially there but after placing the radio button it is not visible .( Please refer the attached screenshot for the same.)
Suggest me how can I achieve that. I am able to show the radio buttons,

manualrefresh button.png

yash

11 posts

Member since:
Jul 2020

Posted 27 Jul 2020 in reply to yash Link to this post

I have added custom views to the scheduler bar, but it is hiding the Manual refresh button placed at the topmost right hand side. Please refer the attached screen shot. Please find the code snipped at this DOJO example.

https://dojo.telerik.com/icIRoWUY

Please suggest how can I show the manual refresh button over there, before the implementation of this custom view, manual refresh button was there.

ManualRefresh Button2.png

Martin

Admin

277 posts

Posted 27 Jul 2020 Link to this post

Hello Yash,

From the latest Dojo example I was unable to see how the custom button is being added. You can do so using the below code snippet;

$(".k-scheduler-toolbar.k-toolbar").append("<a role='button' href='#'><span class='k-icon k-i-refresh'></span></a>")

Please refer to the modified Dojo for reference.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

yash

11 posts

Member since:
Jul 2020

Posted 28 Jul 2020 in reply to Martin Link to this post

Hey Martin,

I have created the custom view and also placed the refresh button with one label at the right hand side of Scheduler. Please refer the attached screen shot.
The following is the Dojo for it https://dojo.telerik.com/icIRoWUY.
Can you please let me know how can I make sure which time slot interval is choosen while displaying the schedule.
Please expand the preview section on DOJO so that you can see the custom view in button form instead of Dropdown( attached Screesnhot)

yash

11 posts

Member since:
Jul 2020

Posted 29 Jul 2020 in reply to yash Link to this post

Martin, any update on this...?

Martin

Admin

277 posts

Posted 29 Jul 2020 Link to this post

Hello Yash,

Could you please make sure that you are sending the right link for the Dojo example? The last link is the same link from the 27th of July, which does not show anything apart from the three custom views. From the explanation I am also not sure what is the current issue, so I would appreciate some additional explanation as well. I will then gladly assist you.

Regards,
Martin
Progress Telerik

yash

11 posts

Member since:
Jul 2020

Posted 29 Jul 2020 in reply to Martin Link to this post

Hi martin,

Issue is when I select any of the view i.e. 5min, 10 min, 15 min ; it is not showing that this view is selected. Orange highlighted is only for time being when I select that, I want that it should be kept as orange highlighted till the time I didn't move to another view.

yash

11 posts

Member since:
Jul 2020

Posted 31 Jul 2020 in reply to yash Link to this post

Martin, did you get chance to take a look at this?

Martin

Admin

277 posts

Posted 31 Jul 2020 Link to this post

Hello Yash,

The custom view buttons are not highlighted because the custom views should be passed to the views configurations as a string, and not as a variable:

Current:

views: [            
  {type: CustomAgenda5, title: "5 min" },
  { type: CustomAgenda10, title: "10 min" },
  { type: CustomAgenda15, title: "15 min"}
],

Correct:

views: [            
  {type: "CustomAgenda5", title: "5 min" },
  { type: "CustomAgenda10", title: "10 min" },
  { type: "CustomAgenda15", title: "15 min"}
],

Here is the modified example for reference.

Regards,
Martin
Progress Telerik

yash

11 posts

Member since:
Jul 2020

Posted 31 Jul 2020 in reply to Martin Link to this post

But when I am passing it as string in view configuration, then it gives me the error in console that there is no such view present.

Martin

Admin

277 posts

Posted 31 Jul 2020 Link to this post

Hello Yash,

Could you please modify the latest Dojo example to reproduce the error, as I am not receiving it on my side?

Regards,
Martin
Progress Telerik