Comme je l'ai mentionné dans un article précédent, le Telerik Blazor Scheduler vous permet d'ajouter facilement l'agenda à votre application en utilisant une ou plusieurs des vues fournies par Scheduler . Vous pouvez également potentiellement personnaliser ces vues simplement en définissant des attributs sur les vues. Mais – et c'est le but de l'article d'aujourd'hui – si vous n'êtes pas satisfait de l'apparence par défaut des rendez-vous du planificateur, vous pouvez les personnaliser.
Voici un aperçu rapide de la configuration d'un «compatible avec le planificateur ”Project .
Par défaut, toutes les vues du planificateur recherchent une propriété appelée Title sur l'objet passé à l'attribut Data du planificateur et affichent cette propriété Title dans l'interface utilisateur du planificateur (elle affiche également automatiquement le début et la fin dates dans l'info-bulle du rendez-vous). Pour les composants très simples, vous pourrez peut-être regrouper toutes les informations dont l'utilisateur a besoin dans cette propriété Title.
Cependant, pour répondre efficacement aux besoins de l'utilisateur dans tous les composants sauf les plus simples, vous devrez utiliser le ItemTemplate de Scheduler pour présenter les informations dont l'utilisateur a besoin (vous pouvez également déclarer un AllDayItemTemplate qui est utilisé avec des événements qui durent toute la journée). D'un autre côté, si vous avez besoin de styliser les rendez-vous pour signaler à l'utilisateur ce qui est essentiel au rendez-vous, l'événement ItemRender vous permettra de le faire.
Définition d'une interface utilisateur sophistiquée
Dans sa forme la plus simple, un ItemTemplate est juste une collection de texte et, potentiellement, HTML qui sera affiché dans l'interface utilisateur du planificateur partout où il y a un événement / rendez-vous. Un ItemTemplate déclaré immédiatement à l'intérieur de l'élément TelerickScheduler est utilisé par toutes les vues.
Cet ItemTemplate, par exemple, entraînera l'affichage de l'expression «Time Booked» dans l'interface utilisateur pour tous les objets transmis dans la collection au Attribut de données de TelerikScheduler:
Temps réservé
Cependant, les ItemTemplates peuvent également être déclarés à l'intérieur de chaque vue et remplaceront le ItemTemplate déclaré au niveau du planificateur. En fait, le ItemTemplate déclaré au niveau du planificateur fonctionne comme le modèle «par défaut» qui peut être remplacé par des modèles dans des vues individuelles.
En général, je souhaite fournir une nouvelle interface utilisateur pour la vue mensuelle qui, contrairement aux autres vues , n'affiche ni l'heure de début ni la durée d'un rendez-vous. Cela rend la vue mensuelle moins utile pour répondre à la question «À quel point suis-je occupé?»
Dans la vue mensuelle, alors que le jour en question peut avoir deux rendez-vous, cela fait une grande différence si les deux rendez-vous sont regroupés, étalé sur une journée ou trois heures. Plutôt que d'afficher simplement le titre du rendez-vous, je préférerais que la vue mensuelle affiche le titre, une courte heure de début (par exemple, «9 h», «14 h» et une durée en minutes).
Pour obtenir ces informations supplémentaires, il faut moi, dans mon ItemTemplate, pour accéder à des propriétés supplémentaires sur l'objet qui dirige le rendez-vous. Pour ce faire, j'ajoute un bloc de code dans mon ItemTemplate et extrait les données de la pseudo-variable de contexte fournie par le planificateur qui contient les données pour le rendez-vous actuel.
Un squelette ItemTemplate typique ressemble donc à ceci pour un planificateur qui affiche des objets de la classe TempChange:
@ {
Rendez-vous ap = contexte en tant que rendez-vous;
… Des ajouts à l'interface utilisateur…
}
Dans ce squelette, je peux définir l'interface utilisateur de mon rendez-vous avec un balisage contenant du texte, du code Razor ou d'autres balises. Cet exemple, pour la vue mensuelle, affiche l'heure de début (arrondie à l'heure) et le titre de chaque rendez-vous (si vous avez plus que du texte brut, vous devez inclure votre balisage dans un élément englobant – j'ai choisi un élément):
@ {
Rendez-vous ap = contexte en tant que rendez-vous;
si (ap! = null)
{
@ ap.Start.ToString ("h: mt") @ ap.TItle
}
}
Voici l'interface utilisateur résultante:
Extension de l'interface utilisateur
Cependant, vous n'êtes pas limité au simple HTML ancien ou simplement les propriétés de l'objet. Compte tenu des contraintes d'espace pour un élément dans la vue mensuelle, ajouter de la durée au texte affiché n'est pas une option raisonnable … mais je pourrais mettre la durée dans une info-bulle qui apparaît lorsque l'utilisateur passe la souris sur un rendez-vous. Je peux récupérer la durée en appelant la méthode GetDuration de l’objet.
Cet exemple appelle ensuite la méthode GetDuration pour récupérer l’heure de l’élément en minutes et l’affiche à l’aide du composant ToolTip for Blazor de Telerik. Ce code tire également parti d'une autre fonctionnalité de ItemTemplate en utilisant l'attribut Context de ItemTemplate pour renommer l'objet de contexte dans mon code en quelque chose de plus significatif (dans ce cas, j'ai renommé l'objet de contexte en «Rendez-vous»):
@ {
Rendez-vous ap = contexte en tant que rendez-vous;
si (ap! = null)
{
…
….
Style dynamique
En plus de créer une interface utilisateur, vous souhaitez diriger l’utilisateur vers ce qui compte. Dans un calendrier, cela signifie signaler à l'utilisateur les différents types de rendez-vous ou d'événements que le planificateur affiche afin que l'utilisateur repère les éléments qui l'intéressent. Pour prendre en charge cela, l'événement ItemRender du planificateur vous permet de définir facilement le CSS classe pour l'élément englobant l'interface utilisateur de chaque élément.
Vous devez d'abord avoir des règles CSS que vous pouvez utiliser pour styliser l'interface utilisateur de votre élément. J'ai ajouté ces deux règles juste avant ma section de code, à titre d'exemple:
{
background-color : lightpink ;
}
. shortmeeting {
background-color : lightblue ;
}
La prochaine étape de ce processus consiste à relier l'événement ItemRender de ItemTemplate à une méthode de votre code . Ce code démarre ce processus en associant une méthode appelée AppointmentRender à l'événement ItemRender dans l'élément TelerikScheduler:
Vous terminez ce processus en ajoutant une méthode avec un nom correspondant à la section de code de votre composant. Cette méthode doit accepter un paramètre de type SchedulerItemRenderEventArgs (le paramètre est conventionnellement nommé «e»). Dans cette méthode, vous pouvez utiliser la propriété Item du paramètre e pour accéder à l'objet de rendez-vous en cours de traitement par le planificateur. Pour mon objet Rendez-vous, ce code pourrait ressembler à ceci:
@code
{
void AppointmentRender ( SchedulerItemRenderEventArgs e )
{
Rendez-vous ev = e . Item as Rendez-vous ;
… Code pour définir le style de l'article …
}
La dernière étape consiste à définir la propriété Class sur le paramètre e passé à votre méthode à l'une de vos règles de classe CSS. Cet exemple examine la durée du rendez-vous et utilise une règle CSS appropriée pour permettre à l'utilisateur de repérer facilement les réunions longues et courtes:
void AppointmentRender ( SchedulerItemRenderEventArgs e )
{
Rendez-vous ev = e . Item as Rendez-vous ;
if ( ev . GetDuration () > 30 )
{
e . Classe = "longmeeting" ;
}
else
{
e . Classe = "shortmeeting" ;
}
}
Bien sûr, pour mes informations sur les changements de température, la durée n'est pas aussi importante intensité. Voici donc une vue mensuelle qui permet à l'utilisateur de savoir à la fois quand la température a changé et celles qui affichent des températures chaudes ou froides:
Cette technique fonctionne même si, comme je l'ai fait dans mon exemple ItemTemplate au début de l'article, vous n'emballez pas votre modèle d'article dans un élément englobant.
L'interface utilisateur est motivée par les besoins de l'utilisateur. ItemTemplate (et l'événement ItemRender) vous donnera tous les outils dont vous avez besoin pour donner à l'utilisateur les informations (et les signaux) dont il a besoin.
Essayez-le vous-même
Si vous souhaitez essayer le planificateur outil vous-même, il y a un essai gratuit disponible. Pour en savoir plus, consultez Telerik UI pour les démos de Blazor ou cliquez sur le bouton ci-dessous pour l'essayer maintenant.
Source link