This is a migrated thread and some comments may be shown as answers.
Create a custom toolbar
11 Answers 77 Views
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 20 Jul 2017, 07:28 PM

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!

11 Answers, 1 is accepted

Sort by
0
Tyler
Top achievements
Rank 1
answered on 21 Jul 2017, 03:32 PM
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?
0
Christy
Top achievements
Rank 1
answered on 21 Jul 2017, 04:13 PM

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!

0
Tyler
Top achievements
Rank 1
answered on 21 Jul 2017, 06:41 PM

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.

0
Tyler
Top achievements
Rank 1
answered on 21 Jul 2017, 07:26 PM

This Dojo has an example of how to do this.

0
Veselin Tsvetanov
Telerik team
answered on 24 Jul 2017, 12:17 PM
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.
0
yash
Top achievements
Rank 1
answered on 22 Jul 2020, 07:43 AM

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

 

0
Veselin Tsvetanov
Telerik team
answered on 24 Jul 2020, 06:41 AM

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

0
yash
Top achievements
Rank 1
answered on 28 Jul 2020, 06:03 AM
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 ?
0
Veselin Tsvetanov
Telerik team
answered on 29 Jul 2020, 09:45 AM

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

0
yash
Top achievements
Rank 1
answered on 08 Jan 2021, 09:43 AM
Hi,
Can we customize the color of appointments in the Kendo jquery Scheduler?
0
Veselin Tsvetanov
Telerik team
answered on 11 Jan 2021, 02:09 PM

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/.

Asked by
Christy
Top achievements
Rank 1
Answers by
Tyler
Top achievements
Rank 1
Christy
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
yash
Top achievements
Rank 1
Share this question
or