Hi.
To show what I want to achieve I have created an example on StackBlitz based on this example from your docs:
https://stackblitz.com/edit/react-esujqr?file=app%2Fmain.tsx,app%2Fproportional-view-item-week.tsx
In the WeekView of the Scheduler, the display of the items that are no all day items can get a little messy when there are overlapping events, especially if there are 10 items or more. I tried to achieve, that first of all the text in the event is not visible anymore. I did this by removing the title from the SchedulerViewItem. But then of course I didn't have a proper tooltip anymore.
So I created a SchedulerItem, placed a div inside of it and added a title from the dataItem to the div. Here are the issues I faced then:
1) I wanted to stretch the div to 100% width and height of the SchedulerItem but if I do this, at least the width does not work. I set it now to 10px width and height and gave it an orange background so I can at least test the standard tooltip but that is not really what I want to have. I would like to achieve that the tooltip is shown whereever I hover over the event item.
2) Generating the tooltip information with the times and the title coming from the dataItem is of course an expensive task if you have a lot of events in your Scheduler for a week (I'm talking about between 80 to 120 recurring events!), so I'd rather use the existing information of the title which I had to remove in order to achieve that there is no text showing in the event item.
3) The most awesome thing would be if I could use the Kendo-Tooltip instead of the standard tooltip. Any help in that direction would be great.
4) I noticed that if an event is for example only 5 minutes long, the item in the calendar is showing as if it was about 30 minutes or so. Any idea why that is the case?
5) A more general question: I added a file to my example (myData.tsx) where you can see example data from my application. In my local Scheduler version the data is working fine (I have 4.13.0) but somehow I can't get anything to display in the app on StackBlitz. Have there been any breaking changes in the data format?
Thanks as always for you help!
Greetings,
Bernd
1 Answer, 1 is accepted
Hello Bernd,
Regarding your first question, there is a padding-right applied to the event from the themes, so if you want to fill the entire space with the DIV element you will have to remove that padding:
<SchedulerItem
{...props}
style={{
...props.style,
height: '100%',
width: '100%',
paddingRight: "0"
}}For the second question, you can use CSS only for removing the event text and expanding the inner div to 100%. I have prepared a simple example using our new proportional view item and the following CSS:
<style>
.myScheduler .k-event-template{
opacity: 0;
height: 100%;
}
.myScheduler .k-event{
padding-right: 0;
}
.myScheduler .k-event > div{
height: 100%;
}As for the KendoReact Tooltip, since the events have their "title" property set, you can wrap the Scheduler in Tooltip and allow it to display KendoReact Tooltip for the elements with a "title" property:
For question 4) I will have to further investigate this.
As for the final question, the myData does not work, because the fields that must be JavaScript Data objects are strings.
Best Regards,
Konstantin Dikov
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.
Rank 5
Bronze
Bronze
Bronze
Hi Konstantin.
Thanks for all your answers and your patience with me. It's actually a bit embarrassing that I didn't find out about some of them myself... :-)
About question 4, in the meantime I found that there is a min-height of 25 px set in the CSS so I can get around that pretty easily and I should have checked this maybe before even writing you a question about it...
I think I can handle the ToolTip, I used it before so I'll check and if I have any issues I'll let you know.
Maybe one question about the new proportional view item. I know that it is available since the latest version or so and I'm still on version 4.13.0 with all my Kendo React components. I already tried updating all of them in a test project but there were quite a few changes in the CSS and not everything worked as before. If I wanted to update only the Scheduler I guess I would have to update all the modules listed on this page under "Installing the component", correct?
Thanks again for all your help!
Greetings,
Bernd
Hi Bernd,
I am glad to see that the answers were helpful.
As for the remaining question, I have to say that updating only the Scheduler package and the dependencies packages will not be enough. Mixing major versions, especially 4* with 5* is not possible due to major changes in the themes and the rendering of the components introduced in version 5. Upgrading to version 5+ must happen for all components and the theme.
I understand that this might be time consuming if there are many custom styles, but at least in regards of the themes, I assume that there will be no more major breaking changes anytime soon.