Sélection d'en-têtes de date dans le planificateur de kendo en cliquant et en faisant glisser

Question

Je souhaite que l'utilisateur puisse copier et coller l'en-tête de date d'un planificateur de kendo.

Dans la configuration du planificateur, je construis la vue du jour sous les vues des options comme celle-ci:

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

Puis-je obtenir un en-tête date comme celle de l'image. Cependant, vous ne pouvez pas cliquer et faire glisser pour le mettre en surbrillance et le copier pour le coller ailleurs.

Here is a dojo

Cela donne aussi un exemple très simple de ne pas être en mesure de mettre en évidence l'en-tête de date pour l'affichage de la journée. Je me demandais si quelqu'un savait qu'il était possible de permettre à ces en-têtes de date d'être 'sélectionnables' afin que les utilisateurs puissent les cliquer et les faire glisser pour les mettre en surbrillance.

Answer 1

Alors, le plus proche, je l'ai obtenu est d'utiliser ce 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'); 
           } 

          }); 

qui a été adapté de cette réponse que je trouve: https://stackoverflow.com/a/34748190/7376331

Ce sélectionne tout le texte d'en-tête date lorsque vous cliquez dessus, et désélectionne lorsque vous cliquez à nouveau, ou un autre en-tête de date est cliqué. Le seul problème avec l'utilisation de kendo scheduler, c'est que les en-têtes de date auxquels vous liez initialement l'événement click sont partis lorsque vous naviguez vers une nouvelle plage de dates ou modifiez vos vues, et que de nouvelles prennent leur place. Pour corriger cela, j'ai dû ajouter ce code ci-dessus dans mon événement dataBinding, après avoir rassemblé mes nouveaux événements pour la vue/plage de dates sélectionnée et appeler scheduler.dataSource.read() pour mettre à jour ma vue du planificateur. Après avoir appelé read(), j'ai eu de la chance avec le code ci-dessus en mettant en surbrillance le texte de la date lorsque je cliquais, peu importe l'endroit où je naviguais ou la vue sur laquelle je me suis tourné.

En outre, une note importante est que j'ai ajouté le selectableText et peut-être choisis des cours à tous mes dateHeaderTemplates dans mon point de vue, comme ceci:

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

Je ne sais pas s'il y a beaucoup de une meilleure solution pour cela, car c'est très probablement une fonctionnalité très rarement désirée, et travailler avec le planificateur de kendo le rend plus difficile (comme avoir à trouver le bon endroit dans le flux d'événements du planificateur pour relier mes événements de clic pour la date en-têtes).