Question

我有一个用户有兴趣能够复制和粘贴剑道调度程序的日期标题。

在调度程序设置中，我在视图选项下构建日视图，如下所示：

{
                        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
                    },

然后我得到一个类似图片中的日期标题。但是，您无法单击并拖动以突出显示它并将其复制到其他位置。

Here is a dojo

这也给出了一个非常基本的例子，即无法突出显示日视图的日期标题。

我想知道是否有人知道如何允许这些日期标题可以选择＆＃39;这样用户可以单击并拖动并突出显示它们进行复制。

Answer 1

所以，我最接近的是利用这段代码：

$('.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');
                                }

                            });

根据我的答案改编而来：https://stackoverflow.com/a/34748190/7376331

单击时选择整个日期标题文本，再次单击时取消选择，或单击其他日期标题。与剑道调度程序一起使用的唯一问题是，当您导航到新的日期范围或更改您的视图时，您最初绑定点击事件的日期标题将会消失，而新的日期标题取代它们。

为了解决这个问题，在收集当前所选视图/日期范围的新事件并调用scheduler.dataSource.read（）来更新我的调度程序视图之后，我必须在我的dataBinding事件中添加上面的代码。在调用read（）之后，无论我在哪里导航或者我改变了什么视图，我都可以在上面的代码中突出显示日期文本。

另外，一个重要的注意事项是我在我的视图中将selectableText和可以选择的类添加到我的所有dateHeaderTemplates中，如下所示：

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

我不确定是否有更好的解决方案，因为它很可能是很少需要的功能，并且使用kendo调度程序会使其变得更加困难（比如必须在事件中找到合适的位置）调度程序的流程，以重新绑定日期标题的点击事件。

通过单击和拖动，可以在kendo调度程序中选择日期标题

1 个答案: