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é.

. 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:

  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: 
     
   
   <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.

  .

  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!

  ---