Mode AgendaView pour le calendrier dans l'interface utilisateur Telerik pour Xamarin

 < telerikInput: RadCalendar   x: Name [19659012] =  "calendrier"  
    ViewMode  =  "Agenda" >   
   </  telerikInput: RadCalendar > 

 this  .calendar.AppointmentsSource =  new   ObservableCollection  ()  
   { 
    nouveau   Rendez-vous ()   
    {  
    StartDate = DateTime.Today.AddHours (11),   
    EndDate = DateTime.Today.AddHours (11) .AddMinutes (15),   
    Title =  "Daily SCRUM"   
    Color = Color.FromHex (  "55A6FF" ),   
   },   
    nouveau   Rendez-vous ()   [19659002]    {  
    StartDate = DateTime.Today.AddDays (-7) .AddHours (10),   
    EndDate = DateTime.Today.AddDays (-7) .AddHours (11),   
    Titre =  "Tokyo Deall call"   
    Color = Color.FromHex ( "FFA200" )   
   },   
   . . .   
  }; 

Et voici le t Le résultat:

Style des éléments de l'ordre du jour

Une autre fonctionnalité utile que nous avons ajoutée à la vue Agenda est la option pour styliser les différents points de l'ordre du jour. Nous avons décidé d'implémenter la fonctionnalité via une classe StyleSelector car cette approche vous offre la possibilité d'appliquer des styles pour des éléments uniques et non pour des types exacts. L'approche peut nécessiter un peu plus de temps de votre part pour l'ajouter, mais par rapport à la simple définition de styles pour des types d'éléments spécifiques – elle est certainement plus puissante et flexible. Vous trouverez ci-dessous un exemple sur la façon de modifier l'apparence des différents éléments.

Commençons par créer la classe StyleSelector personnalisée qui est utilisée pour identifier le style à appliquer pour quel élément. Vous devez hériter de la classe AgendaItemStyleSelector et remplacer l'une de ses méthodes SelectStyle en fonction des éléments que vous allez modifier.

Les méthodes disponibles pour remplacer sont:

• SelectMonthItemStyle
• SelectWeekItemStyle
• SelectDayItemStyle
• SelectAppointmentItemStyle

Pour cet article de blog, nous allons remplacer uniquement les méthodes qui prennent en charge les éléments de jour et de semaine. Voici l'implémentation réelle:

 public   classe   CustomAgendaViewItemStyleSelector: AgendaItemStyleSelector  
    {  
  ]  privé   DateTime maintenant = DateTime.Now;   



  


               




    public   AgendaTextItemStyle WeeksStyle { get ;  set ; }   
    public   AgendaTextItemStyle TodayStyle { get ;  set ; }   
  
    public   override   AgendaTextItemStyle SelectWeekItemStyle (Item AgendaWeekItem)  
 ]   {  
    retour   ceci  .WeeksStyle;   
   }   
  
    public   override   AgendaTextItemStyle SelectDayItemStyle (Item AgendaDayItem) [1945904] 

    {  
    si   ( ceci  .now.Date == item .Date.Date)   
    {  [19659002]    retourner   ceci  .TodayStyle;   
   }   
  
    retour   null ;   
   }   [19659002]   } 

Comme vous pouvez le voir dans le code ci-dessus – nous allons mettre à jour tous les éléments de la semaine dans l'ordre du jour et juste le style de l'élément du jour en cours.

Vous pouvez créer les styles personnalisés dans XAML, appliquer les personnalisations souhaitées et simplement affecter le CustomAgendaViewItemStyleSelector à AgendaItemStyleSelector propriété du contrôle RadCalendar:

 < telerikInput: RadCalendar   x: Name  =  "calendar"  
    ViewMode  =  "Agenda" >>   
    < telerikInput: RadCalendar.Resources >   
    <[19659010] ResourceDictionary >   
    < local: CustomAgendaViewItemStyleSelector   x: Key  =  "CustomAgendaViewItemStyle" ]>   
    < local: CustomAgendaViewItemStyleSelector.WeeksStyle >   
    < telerikInput: AgendaTextItemStyleCouleur [1965= "# 218CFF"   
    FontAttributes  =  "Italique"   
    FontSize  =  "16"   
    HorizontalTextAlignment  =  "Center"  />>   
    </  local: CustomAgendaViewItemStyleSelector.WeeksStyle >   
    < local: CustomAgendaViewItemStyleSelector [1965] 19901990 ]  

    < telerikInput: AgendaTextItemStyle   TextColor  =  "# 5EB1FF"   
    FontAttributes  =  "Bold"   
    FontSize  =  "15"   
    HorizontalTextAlignment  =  "Center"  />   
    </  local: CustomAgendaViewItemStyleSelector.TodayStyle  >   
    </  local: CustomAgendaViewItemStyleSelector >   
    <19659161] < /  ResourceDictionary >   
    </  telerikInput: RadCalendar.Resources >   
    < telerikInput: RadCalendar.AgendaViewSettings >   
    < telerikInput: AgendaViewSettings 1965] AgendaItemStyleSelector  =  "{StaticResource Cus tomAgendaViewItemStyleSelector} " />   
    </  telerikInput: RadCalendar.AgendaViewSettings >  
   </  telerikInput: RadCalendar > 

L'image ci-dessous illustre l'effet des styles appliqués:

Notez que ce n'est que l'élément du jour en cours auquel le style spécifique est appliqué, tandis que tous les éléments de la semaine seront modifiés en conséquence.

Faites-nous savoir ce que vous pensez

Nous espérons que le nouveau mode d'affichage trouvera une place dans votre application et sera utile à vos utilisateurs. Si vous rencontrez des problèmes avec les fonctionnalités ou si vous manquez une fonctionnalité, faites-le nous savoir afin que nous puissions vous aider. Vos commentaires sont très importants pour nous et nous en discutons toujours lorsque nous envisageons de futurs ajouts à la suite Telerik UI pour Xamarin. Vous pouvez laisser un commentaire ci-dessous ou nous contacter via le UI Telerik pour le portail de commentaires Xamarin .

Pour plus d'informations sur le composant Calendrier et les différentes fonctionnalités qu'il propose - reportez-vous à notre page de documentation: Interface utilisateur Telerik pour Xamarin - Calendrier et planification . Vous pouvez également vérifier les UI Telerik pour les échantillons Xamarin et les applications Telerik SDK Browser qui présentent les utilisations de base du contrôle ainsi que certains scénarios plus sophistiqués.