Intégration du planificateur dans vos applications .net Maui

A exploré les capacités puissantes du composant .NET Maui Scheduler de Progress Telerik et certaines des nombreuses façons de le personnaliser dans votre application.

Nous vivons dans un monde qui se déplace à un rythme rapide et, avec elle, nos objectifs d’apprentissage, nos objectifs personnels et la nécessité de rester organisé évoluer tout aussi rapidement. Cependant, avec autant de tâches, d’engagements et de responsabilités, il peut parfois être difficile de garder une trace de tout.

C’est là que se présentent de grandes opportunités: en tant que développeurs, nous pouvons créer des applications éducatives qui s’adaptent à la vie quotidienne des gens et aider à faciliter les choses.

Imaginez une application éducative où vous venez de saisir vos objectifs, et l’application s’occupe de planifier, de les rappeler et de les catégoriser pour vous. Ce serait incroyable!

Et c’est exactement pourquoi vous êtes ici aujourd’hui: pour tirer le meilleur parti des composants disponibles et explorer leur potentiel qui change la vie lorsqu’il est mis en œuvre dans les applications .net Maui. Dans cet article, nous commencerons par nous concentrer sur la façon d’utiliser le Planificateur de Progress Telerik UI pour .net Maui.

Qu’est-ce que le planificateur?

Il s’agit d’un composant Telerik qui offre des vues de calendrier personnalisables et prédéfinies. L’une de ses principales forces est de la rapidité avec laquelle il peut être mis en œuvre, ce qui facilite la construction d’un planificateur à partir de zéro.

Il vous permet de gérer les dates sans effort, ainsi que des rendez-vous, des règles temporelles, des créneaux horaires spéciaux, du support de mondialisation et de la localisation, une API de style flexible et bien plus encore!

Ce que j’aime le plus, c’est que, pour vous donner plus de flexibilité dans les applications que vous créez, le composant est livré avec quatre vues intégrées avec lesquelles vous pouvez facilement interagir:

• Vue d’une journée – parfait pour se concentrer sur ce qui se passe à une date spécifique
• Vue de la semaine – Idéal pour avoir un aperçu complet de votre semaine
• Vue de plusieurs jours – Idéal lorsque vous devez suivre les événements sur quelques jours
• Voir le mois – qui affiche les 42 derniers jours jusqu’à la date actuelle, avec une limite claire pour ne pas vous perdre dans le calendrier

Réfléchissons à quelques scénarios où cela pourrait être super utile:

• Applications éducatives sont parmi les meilleurs scénarios où ce composant brille vraiment. Non seulement cela vous fait économiser le temps de développement et les coûts précieux en éliminant la nécessité de le construire à partir de zéro, mais cela vous permet également de vous concentrer sur ce qui compte le plus: vos fonctionnalités uniques de votre application.

  Par exemple, vous pouvez facilement créer une application engageante qui aide les enfants à étudier en définissant des rappels quotidiens pour renforcer leur apprentissage à des moments précis. Tout en maintenant un design poli et cohérent sur toute l’expérience.

• Applications basées sur le service sont un autre excellent exemple. Pensez à quelque chose comme une application de réservation de rendez-vous médical. En utilisant un planificateur comme celui-ci, vos utilisateurs peuvent facilement suivre leurs rendez-vous passés et à venir, tous au même endroit. Super pratique, non?

Comment implémenter le planificateur .net Maui 🤔

Vous pouvez implémenter cela en quelques étapes simples en utilisant l’essai gratuit de 30 jours de Telerik UI pour .net Maui. Tout d’abord, assurez-vous que les conditions préalables sont prêtes:

Une fois que vous avez tout en place, nous sommes prêts à partir!

Étape 1: Ajouter l’espace de noms Telerik

Accédez à votre fichier XAML et ajoutez l’espace de noms suivant:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Étape 2: Ajoutez le Radscheduler à votre xaml

Voici un exemple de la façon de définir plusieurs options de vue dans votre planificateur:

<telerik:RadScheduler AutomationId="scheduler" CurrentDate="10/18/2023">
    <telerik:RadScheduler.ViewDefinitions>
	    <telerik:WeekViewDefinition />
			    <telerik:WeekViewDefinition IsWeekendVisible="False" Title="Work Week" />
			    <telerik:MultidayViewDefinition VisibleDays="3" Title="3 Day" />
		    <telerik:DayViewDefinition />
	    <telerik:MonthViewDefinition />
    </telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>

Étape 3: Enregistrez Telerik dans Mauiprogram.cs

Aller à votre Mauprogram.cs fichier, et à l’intérieur du Createmauiapp Méthode, assurez-vous d’enregistrer Telerik en ajoutant le .UseTelerik() Méthode d’extension. Il est recommandé de le placer au-dessus de le .UseMauiApp<App>() ligne, comme ceci:

.UseTelerik()
    
.UseMauiApp<App>()

Et avec ces étapes simples, vous l’avez intégrée dans votre application .net Maui! 💪

Anatomie du contrôle du planificateur

Pour tirer le meilleur parti de ce contrôle, il est essentiel de comprendre sa structure et de se familiariser avec chaque élément interactif. Cela vous aidera à utiliser pleinement ses capacités et à l’adapter à vos besoins spécifiques.

• En-tête: Affiche le mois en cours et sert de contrôle de navigation pour modifier les vues et accéder à d’autres dates
• Règle du temps: Sert de représentation visuelle des intervalles de temps dans la vue du planificateur
• Indicateur d’heure actuel: Indique le temps réel
• Rendez-vous: Visualise un événement ou une tâche spécifique dans le calendrier du planificateur
• Slots: Définit les segments de temps individuels comme structurés par le souverain
• Machine à sous spéciale: Indique un segment de temps marqué ou mis en évidence dans le planificateur

Visuellement, c’est à quoi ressembleraient ces propriétés:

Image obtenue à partir de la documentation officielle

Explorons un peu plus loin ses fonctionnalités!

✍️ Vous pouvez personnaliser vos formats de date!

En tant que développeur, vous savez probablement déjà que travailler avec des dates peut parfois être un vrai mal de tête, haha. 😆 La plupart du temps, les problèmes proviennent de quelque chose d’aussi simple que le mauvais format utilisé ou mal interprété.

La bonne nouvelle est qu’avec le planificateur, vous pouvez personnaliser le format de date en fonction du type de vue que vous utilisez (comme le jour, la semaine ou le mois, comme nous l’avons vu plus tôt). Chaque vue vous donne différents paramètres avec lesquels vous pouvez travailler pour ajuster le format en conséquence.

Jetons un coup d’œil à la façon dont vous pouvez le configurer pour chaque type de vue:

Vues de jour, de semaine et de plusieurs jours

Vous avez trois propriétés clés que vous pouvez personnaliser:

• HeaderTextFormat: Vous permet de définir comment le texte de l’en-tête est affiché
• Format de piqûre de jour: Spécifie le format dans lequel les jours sont indiqués dans l’en-tête
• TIMERULANTSTICKSTRINGATAT: Contrôle le format des intervalles majeurs de la règle temporelle

Visuellement, ces propriétés correspondent aux éléments suivants:

Image obtenue à partir de la documentation officielle

Voir le mois

Vous avez également trois propriétés clés que vous pouvez personnaliser:

• HeaderTextFormat: Vous permet de définir comment le texte de l’en-tête est affiché
• Format de piqûre de jour: Spécifie le format dans lequel les jours sont indiqués dans l’en-tête
• WeekdayStringFormat: Spécifie la chaîne de format utilisée pour afficher les dates en semaine.

Visuellement, ces propriétés correspondent aux éléments suivants:

Image obtenue à partir de la documentation officielle

Mise en œuvre

Maintenant que vous connaissez ces propriétés, les implémenter est simple.

<telerik:RadScheduler x:Name="scheduler"> 
    <telerik:RadScheduler.ViewDefinitions> 
	    <telerik:MultidayViewDefinition HeaderTextFormat="{}{0:ddd, MMM dd}" 
	    DayStringFormat="{OnIdiom '{0:ddd}', Desktop='{0:ddd d}'}" 
	    TimeRulerMajorTickStringFormat="{}{0:h:mm tt}" 
	    TimeRulerWidth="80" /> 
	    <telerik:MonthViewDefinition HeaderTextFormat="{}{0:ddd, MMM dd}" 
	    DayStringFormat="{}{0:dd}" 
	    WeekDayStringFormat="{OnIdiom '{0:ddd}', Desktop='{0:MMM - dddd}'}"/> 
    </telerik:RadScheduler.ViewDefinitions> 
</telerik:RadScheduler>

Conclusion

Et c’est une enveloppe! En quelques minutes, vous avez exploré les capacités puissantes du .NET Maui Contrôle du planificateur par Progress Telerik Et tout ce que vous pouvez réaliser avec. Je vous encourage à continuer à explorer et à déverrouiller son plein potentiel dans vos projets.

N’oubliez pas que Telerik UI pour .net Maui est livré avec un essai gratuit de 30 jours:

Essayer maintenant

Si vous avez des questions, n’hésitez pas à les laisser dans les commentaires, je serai heureux de vous aider!

Rendez-vous la prochaine fois! 🙋‍♀️

Références