2017-10-17 8 views
2

dans le projet, je veux utiliser un calendrier qui sera seulement informatif. Il affichera les jours codés en couleur dans lesquels une réservation peut être faite et où une réservation a déjà été faite.calendrier Kendo seulement pour la lecture

Mais j'ai besoin de faire des calices en lecture seule, sans possibilité de sélection de date - de sorte qu'il ne soit pas cliquable.

@{ 
 
       var orderDateInfos = Model.CarOrders; 
 
       List<DateTime> list = new List<DateTime>(); 
 
       foreach(var orderInfo in orderDateInfos) 
 
       { 
 
        foreach(var ordersDate in orderInfo.OrderDays) 
 
        { 
 
         list.Add(ordersDate); 
 
        } 
 
       } 
 
      } 
 
      @(Html.Kendo().Calendar() 
 
      .Name("availableCalendar") 
 
      .Selectable("multiple") 
 
      .SelectDates(list) 
 
      .Value(Model.CarOrders.First().RentStartDate) 
 
      )

AvailableCalendar

Répondre

2

D'après ce que je peux voir dans la documentation kendo, il ne permet de désactiver jours pas faire lecture seule ou désactiver le calendrier entier. A partir du site http://demos.telerik.com/aspnet-mvc/calendar/disable-dates J'essayerais probablement de renvoyer true (sans aucune logique supplémentaire) à la fonction disableDates. De cette façon, tous les jours seront probablement désactivés. Cependant, les dates sélectionnées de cette manière ne s'afficheront pas comme sélectionnées, donc vous pouvez ajouter une règle css en fonction de l'aria-selected = "true" qui semble être l'indicateur pour les dates sélectionnées.

étape par étape dans une solution possible pourrait être:

Ajouter une fonction à l'disableDates attribut

.DisableDates("disableAllDates") 

Définir vos fonctions pour retourner vrai dans tous les cas

function disableAllDates(){ 
    return true; 
} 

Et ajouter quelques css pour le td [aria-selected = "true"]. Par exemple

td[aria-selected="true"] { 
    background: red; 
}