Create a custom toolbar

[Christy]

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!

[Tyler]

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?

[Christy]

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!

[Tyler]

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.

[Tyler]

This Dojo has an example of how to do this.

[Veselin Tsvetanov]

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

[yash]

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

 

[Veselin Tsvetanov]

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

[yash]

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 ?

[Veselin Tsvetanov]

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

[yash]

Hi,
Can we customize the color of appointments in the Kendo jquery Scheduler?

[Veselin Tsvetanov]

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