Javascript 通过单击并拖动使剑道计划程序中的日期标题可选择

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

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

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

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

{
键入：“日”，
开始时间：新的日期（1901,1,1,0,0,0），
结束时间：新日期（1901,1,1,23,59,59），
workDayStart：新日期（startWorkDayStr），
工作日结束：新日期（endWorkDayStr），
dateHeaderTemplate:kendo.template（“#=kendo.toString（日期，“ddd，MMM dd”）#”，
已选：选择日期
},

然后我会得到一个像图中一样的日期标题。但是，不能单击并拖动以高亮显示它并将其复制到其他位置粘贴

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

我想知道是否有人知道一种方法，可以允许这些日期标题是“可选择的”，这样用户就可以点击、拖动并突出显示它们进行复制

---

因此，我得到的最接近的方法是使用此代码：

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

                            });

这是根据我发现的答案改编的：

单击时选择整个日期标题文本，再次单击或单击另一个日期标题时取消选择。在kendo scheduler中使用此选项的唯一问题是，当您导航到新的日期范围或更改视图时，最初绑定单击事件的日期标题将消失，而新标题将取代它们

为了解决这个问题，我必须在收集当前所选视图/日期范围的新事件并调用scheduler.dataSource.read（）来更新我的scheduler视图后，将上述代码添加到我的数据绑定事件中。调用read（）后，无论我导航到何处或更改到什么视图，我都很幸运地在上面的代码中突出显示了单击时的日期文本

另外，一个重要的注意事项是，我在视图中的所有dateHeaderTemplates中添加了selectableText和Canable-selected类，如下所示：

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

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

dateHeaderTemplate:kendo.template（'#=kendo.toString（日期，“ddd M/dd”）#）

---

我不确定是否有更好的解决方案，因为这很可能是一个很少需要的功能，而使用剑道调度程序会使它更加困难（比如必须在调度程序的事件流中找到正确的位置，以重新绑定日期标题的单击事件）.

您的dojo链接应该是图像链接。哦，对不起，应该解决这个有趣的问题。我尝试过在SelectStart上删除

，但没有一个成功。