Nouvelles fonctionnalités de planification avec calendrier pour Xamarin.Forms

Le calendrier de notre suite d'interface utilisateur pour Xamarin est désormais doté de nouvelles fonctionnalités de planification vous permettant de créer une vue détaillée d'un programme pour un nombre de jours spécifique.

Pour organiser des réunions productives, il est essentiel de bien les planifier à l'avance. . Avoir le bon outil pour afficher et gérer rapidement les rendez-vous est une partie importante du processus de planification. Tenant compte de cela, nous avons récemment amélioré le composant Calendrier de notre suite Telerik UI pour Xamarin avec fonctions de planification, et je suis impatient de vous donner tous les détails concernant cette nouvelle fonctionnalité.

Avec la version R3 2018 de l'interface utilisateur Telerik pour Xamarin, RadCalendar est livré avec un nouveau mode d'affichage MultiDay qui vous permet de créer une vue détaillée du programme d'un jour spécifique ou de quelques jours. Encore plus

Configuration de RadCalendar avec MultiDay ViewMode

Actuellement, le ViewMode de RadCalendar est actuellement disponible. être modifié uniquement après le rendu du contrôle de calendrier natif, raison pour laquelle nous aurions besoin de nous connecter à l'événement NativeControlLoaded et de basculer le mode d'affichage dans son gestionnaire:

. Voici le gestionnaire d'événement r:

  Privé vide CalendarLoaded (expéditeur d'objet, EventArgs e) 
 {
 (émetteur en tant que RadCalendar) .TrySetViewMode (CalendarViewMode.MultiDay); 
}  

Nous prévoyons d'améliorer le chemin cela fonctionne et vous permet de définir / lier directement la propriété ViewMode du contrôle. Attendez-vous donc à plus d'informations à ce sujet dans la prochaine version R1 2019.

Réglage de la chronologie selon vos préférences

La fonction principale de la vue MultiDay étant d'aider les utilisateurs à gérer leurs rendez-vous de manière rapide et intuitive, nous ' Nous nous sommes assurés de fournir quelques paramètres de configuration utiles, tels que:

• Heures de début et de fin de journée
• Possibilité d’afficher uniquement la semaine de travail
• Indicateur de temps indiquant l’heure actuelle
• Intervalles de temps personnalisés dans la chronologie [19659016] Tous ces éléments peuvent être facilement appliqués via la propriété MultiDayViewSettings de RadCalendar.

  De plus, vous pouvez jouer avec une variété d’options pour personnaliser l’aspect de la vue Multiday, afin qu’il corresponde au reste de votre application. Vous pouvez appliquer différentes couleurs d'arrière-plan et de texte à la zone Tous les jours, aux rendez-vous de toute la journée, aux rendez-vous réguliers, à la chronologie, etc. Pour obtenir une liste complète des paramètres disponibles, je vous recommande de consulter la rubrique MultiDayView dans la documentation Calendrier et planification.

  L'extrait suivant montre comment vous pouvez utiliser certaines des options de configuration fournies. Notez que les paramètres de style sont appliqués via la propriété MultiDayViewStyle du contrôle:

    <telerikInput: RadCalendar x: Name = "calendar" 
   NativeControlLoaded = "CalendarLoaded"> 
   
   <telerikInput: MultiDayViewSettings VisibleDays = "5" 
   DayStartTime = "9:00:00" 
   DayEndTime = "18:00:00" 
   TimelineInterval = "1:00" 
   IsWeekendVisible = "false La fonction "
   IsCurrentTimeIndicatorVisible =" true "/ ] CurrentTimeIndicatorColor = "Bleu" [1 9459018] AppointmentFontSize = "11" 
   AllDayAppointmentFontSize = "11" /> 
    
     

  La capture d'écran ci-dessous montre RadCalendar avec les paramètres ci-dessus appliqués à un simulateur iOS:

  

  Affichage des réunions

  Après avoir configuré la chronologie du mode d'affichage MultiDay, nous sommes prêts à ajouter nos rendez-vous au calendrier.

  RadCalendar fonctionne avec les objets IAppointment . Il sera donc nécessaire de créer une classe de rendez-vous qui implémente l'interface IAppointment:

    public class Rendez-vous: IAppointment 
   {
   public DateTime StartDate {get; ensemble; } 
   public Color Color {get; ensemble; } 
   public DateTime EndDate {get; ensemble; } 
   chaîne publique Title {get; ensemble; } 
   public bool IsAllDay {get; ensemble; } 
   chaîne publique Detail {get; ensemble; } 
  } 

  Ensuite, nous allons créer et ajouter des rendez-vous à une collection d'objets Rendez-vous qui doivent être affectés à la Rendez-vousSource du calendrier. Voici quelques exemples de rendez-vous:

    var date = DateTime.Aujourd'hui; 
   calendar.AppointmentsSource = new ObservableItemCollection  {
   nouveau rendez-vous {
   Title = "Meeting with Tom", [MeetingwithTom"
   StartDate = date.AddHours (11), 
   EndDate = date.AddHours (12), 
   Color = Color.Tomato 
  }, 
   nouveau rendez-vous {
   Title = "Lunch with Sara" , 
   Detail = "Eddy's", 
   StartDate = date.AddHours (12) .AddMinutes (30), 
   EndDate = date.AddHours (13) .AddMinutes (30), 
   Couleur = Couleur .DarkTurquoise 
  }, 
   nouveau rendez-vous {
   Title = "Birthday", 
   StartDate = date.AddDays (2) .AddHours (2) .AddMinutes (30), 
   EndDate = date .AddDays (2) .AddHours (3), 
   IsAllDay = true 
  } 
  }; [1 9659009] Vous pouvez maintenant voir tous les rendez-vous visualisés dans la chronologie: 
  
   
   Planification de réunions 
   Il est fort probable que vous n'allez pas seulement afficher des réunions, mais permet également aux utilisateurs de planifier des réunions. Cela peut être accompli en accrochant l'événement  TimeSlotTapped  du calendrier et en poussant une nouvelle page pour ajouter un nouveau rendez-vous. 
  
  L'exemple de code XAML suivant montre un formulaire de base avec quelques contrôles d'entrée pour la planification d'une réunion: 
     
   
   <Label Text = "Nouvel événement" FontSize = "18" 
   HorizontalOptions = " Center "
   VerticalOptions =" ​​Center "/> 
   <Label Text =" Save "FontSize =" 16 "
   HorizontalOptions =" ​​End "
   VerticalOptions =" ​​Center "> 
   
   
   
   
   
   
   <telerikInput: RadEntry Text = "{Titre de rendez-vous contraignant}" 
   WatermarkText = "Entrez un titre" 
   Marge = "0, 0, 0, 15" /> 
   
   
   
   
   
   
   
   
   
   
   <TimePicker Time = "{Binding StartTime}" 
   HorizontalOptions = "Fin" VerticalOptions = "Centre" /> 
   [19659042] 
   
   
   
   
   <TimePicker Time = "{Binding EndTime}" 
   HorizontalOptions = "End" 
   VerticalOptions = "Centre" /> 
   
   ] 
    
    
    
   Nous devrons créer une classe ViewModel contenant toutes les valeurs liées et définir ce ViewModel en tant que BindingContext de la page avec le formulaire ci-dessus. Voici un exemple de classe AddAppointmentViewModel:
    Classe publique AddAppointmentViewModel 
   {
   private ICollection  rendez-vous; 
   public AddAppointmentViewModel (ICollection  rendez-vous, DateTime endDate, Date]
   this.AddCommand = nouvelle commande (this.Add); 
   
   this.appointments = rendez-vous; 
   this.StartTime = startDate.TimeOfDay; 
   this.EndTime = endDate.TimeOfDay; 
   ] This.StartDate = startDate; 
   this.EndDate = endDate; 
  } 
   public ICommand AddCommand {get; } 
   chaîne publique AppointmentTitle {get; ensemble; } 
   public bool IsAllDay {get; ensemble; } 
   public DateTime StartDate {get; ensemble; } 
   public DateTime EndDate {get; ensemble; } 
   public TimeSpan StartTime {get; ensemble; } 
   public TimeSpan EndTime {get; ensemble; } 
   
   private void Ajouter () 
   {
   var newAppointment = nouveau rendez-vous 
   {
   Title = this.AppointmentTitle, 
   StartDate = this.StartDate.Date.AddTicks ( this.StartTime.Ticks), 
   EndDate = this.EndDate.Date.AddTicks (this.EndTime.Ticks), 
   IsAllDay = this.IsAllDay, 
   Couleur = Color.Green 
  }; 
   this.appointments.Add (newAppointment); 
   App.Current.MainPage.Navigation.PopAsync (); 
  } 
  }  
   Il ne reste plus qu'à appeler la page contenant le formulaire AddAppointment dans Calendar TimeSlot actionné: calendrier
   . TimeSlotTapped + = CalendarTimeSlotTapped; 
   
   private void CalendarTimeSlotTapped (expéditeur de l'objet, TimeSlotTapEventArgs e) 
   {
   var rendez-vous = (expéditeur en tant que RadCalendar) .AppointmentsSource en tant qu'objet de la veille [20h15] new AddAppointmentViewModel (rendez-vous, e.StartTime, e.EndTime); 
   this.Navigation.PushAsync (new AddAppointmentPage (addAppointmentViewModel)); 
  ]  
   Une fois votre code terminé, vous pouvez exécuter l'application et planifier. nouvelles réunions.
   
   Vous pouvez également trouver diverses démonstrations montrant les fonctions de planification de RadCalendar dans l'interface utilisateur Telerik pour Xamarin [194590]. 46] Exemples d'application . 
   Prochaines étapes
   Pour la prochaine version R1 2019 de l'interface utilisateur Telerik pour Xamarin, nous prévoyons d'ajouter davantage de fonctionnalités à la fonctionnalité de planification de RadCalendar, telles que:
   Prise en charge d'événements récurrents
   Interface utilisateur intégrée pour la création et la modification de rendez-vous
   Comme toujours, nous aimerions connaître votre avis. Si vous trouvez quelque chose qui manque que vous aimeriez voir dans une future version de la composante Calendrier et planification, n'hésitez pas à envoyer vos commentaires à notre portail de commentaires public  .
   Si c'est la première fois vous avez entendu parler de l'interface utilisateur Telerik pour Xamarin, vous pouvez trouver  plus d'informations à ce sujet sur notre site Web  ou plonger directement dans un  essai gratuit de 30 jours aujourd'hui .
   Merci et heureux coding!