Making date headers in kendo scheduler selectable by clicking and dragging

Question

I have a user interested in being able to copy and paste the date header of a kendo scheduler.

In the scheduler setup, I construct the day view under the views options like this:

{
                        type: "day",
                        startTime: new Date(1901, 1, 1, 0, 0, 0),
                        endTime: new Date(1901, 1, 1, 23, 59, 59),
                        workDayStart: new Date(startWorkDayStr),
                        workDayEnd: new Date(endWorkDayStr),
                        dateHeaderTemplate: kendo.template('<strong>#=kendo.toString(date, "ddd, MMM dd")#</strong>'),
                        selected: selectDay
                    },

Then I get a date header like the one in the picture. However, you cannot click and drag to highlight it and copy it to paste elsewhere.

Here is a dojo

That also gives a very basic example of not being able to highlight the date header for the day view.

I was wondering if anyone knew of a way it might be possible to allow those date headers to be 'selectable' so that users can click and drag and highlight them to copy.

That an interesting question. I've tried it with [`user-select`](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) and removing `onselectstart` but none worked. — DontVoteMeDown, Sep 15 '17 at 18:38

score 0 · Answer 1 · answered Sep 15 '17 at 19:45

So, the closest I have gotten is to utilize this code:

$('.selectableText').on('click', function(e){
                                if($(this).hasClass('can-be-selected')){
                                    var endNode, startNode = endNode = $(this)[0].firstChild;

                                    startNode.nodeValue = startNode.nodeValue.trim();

                                    var range = document.createRange();
                                    range.setStart(startNode, 0);
                                    range.setEnd(endNode, $(this)[0].innerHTML.length);

                                    var sel = window.getSelection();
                                    sel.removeAllRanges();
                                    sel.addRange(range);
                                    $(this).removeClass('can-be-selected');
                                }
                                else{
                                    var sel = window.getSelection();
                                    sel.removeAllRanges(); 
                                    $(this).addClass('can-be-selected');
                                }

                            });

which was adapted from this answer I found: https://stackoverflow.com/a/34748190/7376331

This selects the entire date header text when clicked, and deselects when clicked again, or another date header is clicked. The only issue with using this with kendo scheduler, is that the date headers you initially bind the click event to are gone when you navigate to a new date range or change your views, and new ones take their place.

To fix that, I had to add that above code in my dataBinding event, after I gather my new events for the currently selected view/date-range and call scheduler.dataSource.read() to update my scheduler view. After calling read() is where I had luck with my above code in highlighting the date text when clicked no matter where I navigated or what view I changed to.

Also, an important note is that I added the selectableText and can-be-selected classes to all of my dateHeaderTemplates in my views, like this:

dateHeaderTemplate: kendo.template('<strong class="selectableText can-be-selected">#=kendo.toString(date, "ddd M/dd")#</strong>')

I am not sure if there is much of a better solution for this, as it is most likely a very rarely desired feature, and working with the kendo scheduler makes it more difficult (like having to find the right place in the event flow of the scheduler to rebind my click events for the date headers).

Making date headers in kendo scheduler selectable by clicking and dragging

1 Answers1