2017-06-20 5 views
0

J'ai ajouté 4 étiquettes personnalisées (onglets) à un programmateur comme ceci:DHTMLX Sceduler personnalisé Année voir avec filtre

<div class="dhx_cal_tab a-tab" name="A_tab" style="right:50px;"></div> 
<div class="dhx_cal_tab b-tab" name="B_tab" style="right:50px;"></div> 
<div class="dhx_cal_tab c-tab" name="C_tab" style="right:50px;"></div> 
<div class="dhx_cal_tab d-tab" name="D_tab" style="right:50px;"></div> 

et les ont accroché dans comme ceci:

scheduler.locale.labels.A_tab = "A" 
scheduler.locale.labels.B_tab = "B" 
scheduler.locale.labels.C_tab = "C" 
scheduler.locale.labels.D_tab = "D" 

Ils apparaissent comme ceci dans l'en-tête:

schedule layou

ce que je veux faire est d'être en mesure de c lécher chacun de ces boutons et ceci montrera une vue d'année avec seulement des événements avec une propriété, disons type de A, B, C ou D - en fonction de quelle vue est sélectionnée dans la vue annuelle.

Ce qui suit est ma première tentative:

scheduler.attachEvent("onTemplatesReady",function(){ 
      scheduler.date.A_start = scheduler.date.B_start = scheduler.date.C_start = scheduler.date.D_start = function(e){return e.setMonth(0),this.month_start(e)}; 
     scheduler.date.get_A_end = scheduler.date.add_B = scheduler.date.add_C = scheduler.date.add_D = function(date,inc){ 
     return scheduler.date.add(date,inc*1,"year"); 
     } 
      scheduler.date.add_A = scheduler.date.add_B = scheduler.date.add_C = scheduler.date.add_D = function(start_date){ 
      return scheduler.date.add(start_date,1,"year"); 
     } 
     scheduler.templates.A_date = scheduler.templates.B_date = scheduler.templates.C_date = scheduler.templates.D_date = scheduler.templates.year_date; 
     scheduler.templates.A_scale_date = scheduler.templates.B_scale_date = scheduler.templates.C_scale_date = scheduler.templates.D_scale_date = scheduler.templates.year_scale_date; 

      scheduler.filter_year = function(id, event) { 
       // display event only if its type is set to the mode of the 
       if (event.type=== scheduler.getState().mode) { 
        return true; 
       } 
       // default, do not display event 
       return false; 
      }; 
     }); 

Cependant, quand je lance cliquer sur l'un des onglets que je reçois les éléments suivants: custom view

Il y a 3 problèmes ici:

  1. La vue semble être un clone de la vue mensuelle, pas l'affichage de l'année.
  2. Le filtre ne fonctionne manifestement pas comme tous les événements. re être montré (je ne veux que les événements de type B (même couleur que Tab)
  3. L'un onglet montre une vue différente du reste:

A tab showing different view

est-il simple, j'oublie? Toute aide pour obtenir cette vue en cours d'exécution est appréciée!

Aussi je sais que je pourrais déplacer le contrôle pour un filtre en dehors du planificateur Je voudrais vraiment garder les onglets dans le planificateur comme l'apparence globale est meilleure au lieu d'un select séparé.

Répondre

2

La vue annuelle n'a pas de méthode de constructeur, il ne peut donc y avoir qu'une seule vue par planificateur. Il a également ne peut pas être mis en œuvre par les fonctions de date, ils définissent seulement par jour des vues sur https://docs.dhtmlx.com/scheduler/custom_views.html#stepbystepexample

Ce que vous pouvez faire est

  • ajouter des onglets à l'en-tête, comme vous l'avez déjà fait
  • onglet changement comportement - au lieu de passer à la vue personnalisée, vous pouvez définir filter_year et passer le planificateur en mode «année», ce qui devrait répondre à vos besoins - vous aurez filtré les tâches dans la vue annuelle.

Voici une démonstration de travail: http://snippet.dhtmlx.com/aa08a8249

+0

parfait - je vous remercie beaucoup! –