Kendo UI React Scheduler

13 posts, 0 answers
  1. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 17 Jan 2019 Link to this post

    We are looking for a way to display a line graph (numbers for that day plotted against the time during that day) for the "Day" view of the scheduler.

    Is there any way to achieve this and if so how would we go about implementing this?

    Your help is appreciated!

  2. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 18 Jan 2019 Link to this post

    Hello, Mihai,

    The Scheduler has a "slotTemplate" property that allows customizing the content of the slot:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.slottemplate

    If this property does not prove helpful for the scenario, please provide a visual representation of the desired result, so we can provide a suggestion best suited for it.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 18 Jan 2019 Link to this post

    Hello Stefan,

    I see this is a jQuery example. Is there a React example of the "slotTemplate" usage with the scheduler?

    Regards,

    Mihai

  4. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 22 Jan 2019 Link to this post

    Hello, Mihai,

    The same syntax can be used in the React wrappers as well. The React wrappers are based on the jQuery components and the syntax is the same.

    I used one of the React wrappers demos and added the slotTemplate to one of the views:

    https://stackblitz.com/edit/react-zytqzk?file=app/main.js

    this.views = [
      {
        type: "day"
         
      },
      { type: "workWeek", selected: true, slotTemplate: kendo.template("<strong>#=kendo.toString(date)#</strong>") },
      "week",
      "month",
      "agenda",
      { type: "timeline", eventHeight: 50 }
    ]

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 14 Feb 2019 Link to this post

    Hello Stefan,

    I tried passing the Kendo UI Line chart component to the slot template like so, but it does not work:

    { type: "workWeek", selected: true, slotTemplate: kendo.template(<LineChart />) }

    All we are trying to achieve is to show an hourly line chart on the "Day" view which would have the time on the x-axis and numbers plotted on the y-axis similar to the picture attached. Any insight into doing this would be highly appreciated.

    Kind regards,

    Mihai

     

  6. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 15 Feb 2019 Link to this post

    Hello, Mihai,

    This is expected as the Scheduler wrapper is a jQuery based widget and the templates can accept only strings and kendo-templates. Passing and React component is not supported, this is why we are making native components to be compatible with all React features.

    This can be achieved with the wrapper, but the approach is different. The template will add an element with a specific class and then on the dataBound event all this element will be transformed to Charts:

    https://stackblitz.com/edit/react-zytqzk?file=app/main.js

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 17 Feb 2019 Link to this post

    Hello Stefan,

    I really appreciate your help! I have modified your code with the following:

    { type: "day", selected: true, slotTemplate: kendo.template("<div class='chart'></div>") },

    and

    handleDataBound = (e) => {
        $('.chart').kendoChart({
             series: [
                  { type: "line", data: [1, 2, 3] }
             ]
       })
    }

    However, the chart on the "Day" view is showing multiple times. All we need is one line chart for the day to show the hours of the day on the x-axis with a number plotted on the y-axis. So for example we could have some data points like at 7 AM the number is 100, at 8 AM the number is 150, at 9 AM the number is 200 and so on.

    Thanks & Regards,
    Mihai

  8. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 18 Feb 2019 Link to this post

    Hello, Mihai,

    Is it possible to show us an image of how the Chart is expected to look inside the Scheduler?

    This will help us to make a suggestion best suited for it.

    https://stackblitz.com/edit/react-zytqzk-s32fzj?file=app/main.js

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 18 Feb 2019 Link to this post

    Hello Stefan,

    I have taken a screenshot of what the scheduler Day view looks like now. All we would need is for the hours on the left to show up at the bottom (which would be the x-axis of the chart). This would just be the day view.

    So at 8 AM there would be a point plotted, at 9 AM another point etc, similar to the chart in the picture I attached.

    Regards,
    Mihai

  10. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 19 Feb 2019 Link to this post

    Hello, Mihai,

    I modified the example to replicate the image.

    Is this similar looking to the desired result:

    https://stackblitz.com/edit/react-zytqzk-s32fzj?file=app/main.js

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 19 Feb 2019 Link to this post

    Hello Stefan!

    Almost perfect. The only thing is that when I click on the week view or the month view, then go back to Day view, the chart disappears.

    Also, is there a way to hide the hours on the left since they are not needed in this case?

    Thanks,

    Mihai

  12. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 20 Feb 2019 Link to this post

    Hello, Mihai,

    It is not shown after changing the view because I was not resetting the this.date value in the example after a view is changed. This results in not adding the view in the template.

    This can be reset in the navigate event:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/events/navigate

    As for the hours on the left, they can be removed with CSS:

    I have updated the example:

    https://stackblitz.com/edit/react-zytqzk-mspeuj?file=app/main.js


    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Mihai
    Mihai avatar
    17 posts
    Member since:
    Sep 2018

    Posted 26 Feb 2019 Link to this post

    This is perfect! Exactly what we are looking for.

    Thank you Stefan for your help and dedication.

    Regards,

    Mihai

Back to Top