Create a custom toolbar

12 posts, 0 answers
  1. Christy
    Christy avatar
    54 posts
    Member since:
    May 2016

    Posted 20 Jul 2017 Link to this post

    We have a screen that includes 3 scheduler controls (previous, current, and next) with month-only views. Because these are all related, we need to have a change in the data for one be reflected in all three. I am sharing the dataSource between all of them because that way I don't need to query the database 3 times. Everything looks fine, except for the toolbar on top. Because each control has its own calendar, previous, and next buttons, the controls can be changed and get out of sync with the way we want them displayed. Also, we would prefer to show a title on them with the month and year rather than have a calendar control.

    Is there any way to customize the toolbar? If so, how will the toolbar know which month is displayed? Is there a way to grab this piece of data? I am using AngularJS. 

    Thanks!

  2. Tyler
    Tyler avatar
    19 posts
    Member since:
    Jul 2017

    Posted 21 Jul 2017 in reply to Christy Link to this post

    It isn't entirely clear what the issue is without screenshots or a dojo example... The scheduler comes with a Today button, next and previous arrow buttons, and a clickable text representation of the current view that opens to a calendar to navigate dates. Do you have three separate schedulers on one page? How are they getting out of sync? How are you wanting them displayed and how are they currently being displayed that is wrong?
  3. Christy
    Christy avatar
    54 posts
    Member since:
    May 2016

    Posted 21 Jul 2017 Link to this post

    We have 3 separate schedulers on the same page. Is there a way to show 3 months otherwise? I didn't see anything with 3 calendars showing at once, so I assumed they would be 3 widgets. They share the same dataSource, but use different options since each one has a different date. 

    All I'm asking is how to swap out the toolbar for something much simpler - no calendar, but a label with the month instead. I just assumed I could swap something out, but apparently not. 

    I can hide the buttons and calendar on the current toolbar with css, but I'd like a way to have a label that reads "July 2017" or whatever month the date in the options has. It is currently writing correct calendar for the month on each of my schedulers, so I KNOW there is something the current toolbar can read. How do I get that, and how do I add a label to the current toolbar?

    Thanks!

  4. Tyler
    Tyler avatar
    19 posts
    Member since:
    Jul 2017

    Posted 21 Jul 2017 in reply to Christy Link to this post

    My month view out of the box reads July, 2017 or whatever year and month it is. 

    But to change this, when you create the scheduler(s), and every time you navigate:

    $('.k-scheduler .k-scheduler-toolbar li.k-nav-current span.k-sm-date-format') will grab that date text that you click on to drop down the calendar. With that, you can do .text() or .innerHTML() depending on your needs and what you are wanting displayed in it.

     

    Then to prevent that text from acting as a drop down calendar for navigation (which I am gathering from you posts):

    $('.k-scheduler .k-scheduler-toolbar li.k-nav-current span.k-sm-date-format').click(function(clk){
        clk.preventDefault();
          clk.stopPropagation();
        });

    that will prevent the drop down calendar from showing up when someone clicks on it.

    The cursor will still change to a hand though. To remedy this, outside of your click event function, do this: (Or in css)

    var anchorEle = $('.k-scheduler .k-scheduler-toolbar li.k-nav-current span.k-sm-date-format')[0].parentElement;
      $(anchorEle).css({'cursor': 'default'});
      });

    and the mouse will remain a pointer.

  5. Tyler
    Tyler avatar
    19 posts
    Member since:
    Jul 2017

    Posted 21 Jul 2017 in reply to Tyler Link to this post

    This Dojo has an example of how to do this.

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1241 posts

    Posted 24 Jul 2017 Link to this post

    Hi Christy,

    In order to replace the Scheduler navigation buttons with simple text displaying the current month and year, I would suggest you to implement the following handler for the dataBound event of the Scheduler:
    dataBound: function(e) {
      var navigationWrapper = $('.k-scheduler-navigation');
      var dateContainer = navigationWrapper.find('.k-lg-date-format');
      var dateText = dateContainer.text();
     
      var newText = $('<span>');
      newText.text(dateText);
      navigationWrapper.replaceWith(newText);
    },

    With the above the Scheduler navigation will be replaced by the date formatted text.

    Here you could find a simple Dojo implementing the above.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. yash
    yash avatar
    12 posts
    Member since:
    Jul 2020

    Posted 22 Jul 2020 Link to this post

    In Reference to Same, I want to add three radio button on the top of toolbar mentioning 5min, 10 min and 15 min. On click of these radio buttons time slot of the scheduler should change to 5 , 10 and 15 respectively. any suggestion how can I do that.

    thanks in advance

     

  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1241 posts

    Posted 24 Jul 2020 Link to this post

    Hi Yash,

    Following the same approach you could inject radio buttons in the Scheduler header:

    dataBound: function(e) {
      var scheduler = e.sender;
      var radio1 = '<label><input type="radio" value="5" name="interval"/>5 min</label>';
      var radio2 = '<label><input type="radio" value="10" name="interval"/>10 min</label>';
      var radio3 = '<label><input type="radio" value="15" name="interval"/>15 min</label>';
      var schedulerRefresh = $('.k-scheduler-refresh');
      schedulerRefresh.before(radio1 + radio2 + radio3);
    
      $("input[value='" + slotDuration + "']").prop("checked", true);
    
      $("input[name='interval']").on('click', function(e) {
        slotDuration = $(e.target).val();
    
        var options = scheduler.options;
        var element = scheduler.element;
        options.majorTick = slotDuration;
        scheduler.destroy();
        element.empty();
    
        element.kendoScheduler(options);
      });
    },

    Here is a Dojo sample implementing the above:

    http://dojo.telerik.com/ItOPIHEl/4

    Regards,
    Veselin Tsvetanov
    Progress Telerik

  9. yash
    yash avatar
    12 posts
    Member since:
    Jul 2020

    Posted 28 Jul 2020 in reply to Veselin Tsvetanov Link to this post

    I have placed the radio button and it is visible on the UI, but on changing the radio button, scheduler table is getting vanished. How can i resolve this ?
  10. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1241 posts

    Posted 29 Jul 2020 Link to this post

    Hello Yash,

    Please, modify the Dojo sample previously sent, so that it replicates the issue observed at your end? This way I will be able to review the case locally.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

  11. yash
    yash avatar
    12 posts
    Member since:
    Jul 2020

    Posted 08 Jan in reply to Veselin Tsvetanov Link to this post

    Hi,
    Can we customize the color of appointments in the Kendo jquery Scheduler?
  12. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1241 posts

    Posted 11 Jan Link to this post

    Hi Yash,

    There are three possible ways to alter the Event background color:

    - Use resources, that would have a color member field, which will automatically be applied to the appropriate events:

    https://demos.telerik.com/kendo-ui/scheduler/basic-usage

    - Use an event template:

    https://demos.telerik.com/kendo-ui/scheduler/templates

    - Use CSS to alter the background of all events:

    .k-event {
        background-color: red !important;
    }

    Regards,
    Veselin Tsvetanov
    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/.

Back to Top