Créez des plannings soignés et efficaces avec le planificateur .NET MAUI

Donnez vie à vos scénarios de planification les plus courageux en un rien de temps. Apprenez à connaître le planificateur .NET MAUI et découvrez ses vues intégrées hautement personnalisables et la possibilité de les ajuster dans les moindres détails : heure actuelle, heures et dates visibles, règle temporelle, plages horaires spéciales et bien plus encore.

Salut toi! Mon emploi du temps est serré, mais je ne peux pas vous garder dans l’ignorance à propos de l’un des derniers (et meilleurs) ajouts au Progress. Interface utilisateur Telerik pour .NET MAUI suite : le composant RadScheduler. L’étoile la plus brillante du Sortie de DevTools R3 2023 est tellement prêt à commencer à briller dans vos applications, et je suis ici pour vous montrer à quel point il est rapide et facile de démarrer avec.

Donnez vie à vos scénarios de planification les plus courageux en un rien de temps avec moi. Préparez-vous à découvrir les vues intégrées hautement personnalisables du planificateur et la possibilité de les ajuster aux moindres détails : heure actuelle, heures et dates visibles, règle temporelle, plages horaires spéciales et bien plus encore.

Attachez vos ceintures, nous sommes sur le point de décoller !

Tabula Rasa (Une table rase)

Amener le Planificateur composant dans une nouvelle application .NET MAUI est aussi bref qu’une seule ligne de code (étant donné que vous disposez déjà du
Telerik.UI.pour.Maui NuGet, aussi). XAML ou code-behind ? C’est à vous ou à moi de décider, et je choisis XAML.

<telerik:RadScheduler x:Name="scheduler" />

Avec cela, cependant, la seule chose que vous obtiendrez est un emploi du temps vide – une chose inexistante dans la vraie vie (ou du moins dans la mienne).

Mieux vaut faire ce qu’on nous dit et déclarer quelques définitions de vues, d’accord ? Une petite précision ne ferait pas de mal, alors la voici : RadScheduler propose quatre types de vues prédéfinies, représentant la manière dont vos données seront affichées.

<telerik:RadScheduler x:Name="scheduler">
    <telerik:RadScheduler.ViewDefinitions>
        <telerik:DayViewDefinition />
        <telerik:MultidayViewDefinition VisibleDays="3" Title="3 Day" />
        <telerik:WeekViewDefinition Title="Work Week" IsWeekendVisible="False" />
        <telerik:WeekViewDefinition />
        <telerik:MonthViewDefinition />
    </telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>

Comme vous pouvez le deviner, le DayViewDefinition représente une vue journalière qui montre un seul jour. 💡 La même logique s’applique au reste. Le MultiDayViewDefinition affiche le nombre de jours que vous spécifiez via son VisibleDays propriété. La vue hebdomadaire affiche une semaine entière, ou uniquement la semaine de travail si vous définissez sa IsWeekendVisible propriété à false. La définition de la vue mensuelle constitue une légère exception à la règle car elle affiche plus d’un mois : pour être exact, elle affiche 42 jours.

Voyons si notre tabula n’est plus rasa. 😂

Oui, la mise à jour est lente, mais il manque encore quelque chose. Vous savez quoi? Sur rendez-vous bien sûr ! Je passerai au niveau supérieur avec eux dans les prochaines sections, mais pour l’instant, je pense qu’un simple modèle de vue avec une collection de rendez-vous fera l’affaire :

// First, create the view model
public ViewModel()
{
    var date = DateTime.Today;

    this.Appointments = new ObservableCollection<Appointment>
    {
        new Appointment { Subject = "Meeting with Alex", Start = date.AddHours(10).AddMinutes(30), End = date.AddHours(11) },
        new Appointment { Subject = "Lunch break", Start = date.AddHours(12).AddMinutes(30), End = date.AddHours(13).AddMinutes(30) },
        new Appointment { Subject = "Scheduler Introduction Blog", Start = date, End = date.AddHours(11), IsAllDay = true }
    };
}

public ObservableCollection<Appointment> Appointments { get; set; }

// And then, do not forget to set it as a BindingContext
this.BindingContext = new ViewModel();

Les lier au planificateur AppointmentsSource la propriété fera l’affaire :

<telerik:RadScheduler x:Name="scheduler" AppointmentsSource="{Binding Appointments}" ... />

Nous sommes maintenant prêts à passer au niveau supérieur.

Maîtrisez les rendez-vous

Comme nous l’avons appris dans la section précédente, pour que le Planificateur affiche les rendez-vous, son AppointmentSource La propriété doit être définie et doit être une collection d’objets Appointment.

Chaque rendez-vous définit les propriétés suivantes :

• Start – la valeur qui précise la date et l’heure de début du Rendez-vous
• End – la valeur qui précise la date et l’heure de fin du Rendez-vous
• Subject – la valeur qui indique l’objet du Rendez-vous
• IsAllDay – indique si le rendez-vous prendra toute la journée
• RecurrenceRule – définit les propriétés de base de la règle de récurrence du rendez-vous

Si vous regardez la capture d’écran à la toute fin de la section précédente, vous pouvez voir un rendez-vous d’une journée entière qui s’affiche dans la zone toute la journée du planificateur juste en dessous du jour en cours.

Quelques mots sur la dernière propriété : elle vous permet de configurer des rendez-vous répétitifs. Les modèles de planification récurrents possibles sont sur une base quotidienne, hebdomadaire, mensuelle ou annuelle, ou vous pouvez également définir une plage de récurrence d’une date à l’autre. Le mécanisme de règles flexibles couvre tous les scénarios de récurrence. De plus, vous avez également la possibilité de gérer les exceptions à cette règle.

Je suggère que nous ajoutions un rendez-vous récurrent et une exception à la règle de récurrence, mais si vous avez envie de plonger encore plus profondément dans la fonctionnalité de récurrence de RadScheduler, assurez-vous de consulter le Modèle de récurrence et Règle de récurrence sujets de la documentation en ligne.

Étant donné que l’un des pires scénarios serait de manquer votre réunion de synchronisation quotidienne avec l’équipe, il est préférable de l’ajouter au planning. Suis-moi.

var dailySyncPattern = new RecurrencePattern()
{
    Frequency = RecurrenceFrequency.Daily,
    MaxOccurrences = 90,
    DaysOfWeekMask = RecurrenceDays.WeekDays
};
var dailySyncRecurrenceRule = new RecurrenceRule(dailySyncPattern);
var dailySyncAppointment = new Appointment()
{
    Start = date.AddMonths(-1).AddHours(10),
    End = date.AddMonths(-1).AddHours(10).AddMinutes(20),
    Subject = "Maui Team Sync",
    RecurrenceRule = dailySyncRecurrenceRule
};

this.Appointments.Add(dailySyncAppointment);

Maintenant, imaginez que nous ayons tous un coéquipier qui aime faire la grasse matinée et qui a tendance à arriver en retard à la réunion de synchronisation. Cela n’est pas censé arriver, mais seulement ce seul jour, disons que cela se produit. Que fais-tu? Vous déplacez la synchronisation quotidienne d’une heure et demie pour leur laisser le temps de se présenter. On peut appeler ça une exception, non ? Faisons-le.

List<ExceptionOccurrence> exceptions = new()
{
    new ExceptionOccurrence
    {
        ExceptionDate = date,
        Appointment = new Appointment()
        {
            Start = date.AddHours(11).AddMinutes(30),
            End = date.AddHours(11).AddMinutes(50),
            Subject = "Exceptional Maui Team Sync",
        }
    }
};

dailySyncRecurrenceRule.Exceptions.Add(exceptions[0]);
dailySyncAppointment.RecurrenceRule = dailySyncRecurrenceRule;

Vous savez ce qui est exceptionnel dans le planificateur : sa capacité à définir des plages horaires spéciales. Allons au fond des choses dans la section suivante.

Ajouter des régions horaires spéciales

L’interface utilisateur Telerik pour le contrôle .NET MAUI Scheduler expose une option permettant de définir des emplacements spéciaux et en lecture seule, ainsi que de leur appliquer différents styles. Ce qu’il faut, c’est une collection d’objets Slot, qui doivent être affectés au SpecialSlotsSource propriété de toute instance de définition de vue à laquelle vous souhaitez qu’elle s’applique.

Je pense que ce serait sympa de vous montrer rapidement comment marquer les heures non travaillées d’une semaine de travail.

date = date.AddYears(-1);

this.SpecialSlotsSource = new ObservableCollection<Slot>()
{
    new Slot(date.AddHours(17), date.AddDays(1).AddHours(9))
    {
        RecurrencePattern = new RecurrencePattern
        {
            DaysOfWeekMask = RecurrenceDays.Monday | RecurrenceDays.Tuesday | RecurrenceDays.Wednesday | RecurrenceDays.Thursday,
            Frequency = RecurrenceFrequency.Weekly
        } 
    },
    new Slot(date.AddHours(17), date.AddDays(3).AddHours(9))
    {
        RecurrencePattern = new RecurrencePattern()
        {
            DaysOfWeekMask = RecurrenceDays.Friday,
            Frequency = RecurrenceFrequency.Weekly
        }
    }
};

// Given the SpecialSlotsSource is the following:
public ObservableCollection<Slot> SpecialSlotsSource { get; set; }

Ceci est notre source d’emplacements spéciaux et maintenant la seule chose que nous devons faire est de l’attribuer à notre WeekViewDefinition

<telerik:WeekViewDefinition Title="Work Week" IsWeekendVisible="False" SpecialSlotsSource="{Binding SpecialSlotsSource}" />

Je ne veux pas vous ennuyer avec des rendez-vous liés au travail, il est donc temps de vous montrer quelque chose de sympa qui démontre une partie infime mais essentielle des capacités de personnalisation du planificateur.

Mais puisque nous parlons encore du sujet des machines à sous spéciales, j’ai oublié de vous dire qu’elles peuvent également être personnalisées. Comme vous pouvez le voir sur la capture d’écran ci-dessus, ils sont marqués par défaut avec un arrière-plan grisâtre, de sorte qu’ils soient facilement visibles dans la vue. Vous pouvez également ajouter toutes les étincelles de votre imagination dans les emplacements spéciaux en utilisant le SpecialSlotTemplate propriété d’une définition de vue.

Personnalisez vos événements

Vos événements de planificateur méritent de pouvoir bénéficier d’un aspect unique. Et je vais vous montrer comment vous pouvez faire cela. La personnalisation de l’apparence du rendez-vous peut être effectuée en utilisant soit le AppointmentTemplate ou la
AppointmentStyleSelector propriété de RadScheduler.

Puisque j’avais promis des rendez-vous non liés au travail à la fin de la section précédente, j’en ajouterai deux maintenant. Et ils seront liés à l’un de mes favoris personnels : les voyages. Après tout, les emplois remplissent votre poche, mais les aventures remplissent votre âme. Vous avez besoin des deux.

Quel sera mon prochain morceau du monde découvert ? Nous le découvrirons dans les lignes de code qui suivent :

public class CustomAppointmentDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate LisbonAppointmentTemplate { get; set; }
    public DataTemplate PortoAppointmentTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var appointment = (item as AppointmentNode).Occurrence.Appointment;
        var subject = appointment.Subject;

        if (subject.Contains("Lisbon"))
        {
            return this.LisbonAppointmentTemplate;
        }
        else if(subject.Contains("Porto"))
        {
            return this.PortoAppointmentTemplate;
        }
        else
        {
            return null;
        }
    }
}

<local:CustomAppointmentDataTemplateSelector x:Key="CustomAppointmentDataTemplateSelector">
    <local:CustomAppointmentDataTemplateSelector.LisbonAppointmentTemplate>
        <DataTemplate>
            <telerik:RadBorder x:Name="rootVisual" CornerRadius="4" Padding="4" IsClippedToBounds="True">
                <telerik:RadBorder.Background>
                    <LinearGradientBrush StartPoint="0, 0" EndPoint="1, 1">
                        <GradientStop Offset="0.0" Color="#D2796A" />
                        <GradientStop Offset="1.0" Color="#FCA845" />
                    </LinearGradientBrush>
                </telerik:RadBorder.Background>
                <Label LineBreakMode="WordWrap" MaximumWidthRequest="{Binding Width, Source={x:Reference rootVisual}}" TextColor="White">
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="{Binding Occurrence.Appointment.Start, StringFormat="{}[BGY {0:hh.mm}-"}" />
                                <Span Text="{Binding Occurrence.Appointment.End, StringFormat="{}{0:hh.mm tt} LIS]"}" />
                                <Span Text="{Binding Occurrence.Appointment.Subject, StringFormat="{} {0}}"}" />
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </telerik:RadBorder>
        </DataTemplate>
    </local:CustomAppointmentDataTemplateSelector.LisbonAppointmentTemplate>
    <local:CustomAppointmentDataTemplateSelector.PortoAppointmentTemplate>
        <DataTemplate>
            <telerik:RadBorder CornerRadius="4" IsClippedToBounds="True">
                <Grid>
                    <Image Source="porto.jpg" Aspect="AspectFill" />
                    <Label Text="{Binding Occurrence.Appointment.Subject}" Margin="4" />
                </Grid>
            </telerik:RadBorder>
        </DataTemplate>
    </local:CustomAppointmentDataTemplateSelector.PortoAppointmentTemplate>
</local:CustomAppointmentDataTemplateSelector>

Donc, c’était long, je sais, mais nécessaire et ça valait le coup, je le promets. J’ai préparé un DataTemplateSelector personnalisé et défini les modèles de données.

Ensuite, j’ai attribué le sélecteur au AppointmentTemplate du planificateur :

<telerik:RadScheduler x:Name="scheduler" AppointmentsSource="{Binding Appointments}" AppointmentTemplate="{StaticResource CustomAppointmentDataTemplateSelector}" ... />

Et bien sûr, j’ai ajouté les rendez-vous :

var tripDate = new DateTime(2023, 10, 9, 0, 0, 0);
this.Appointments.Add(new Appointment { Subject = "Flight to Lisbon", Start = tripDate.AddHours(13), End = tripDate.AddHours(15).AddMinutes(15)  });
this.Appointments.Add(new Appointment { Subject = "Travel to Porto", Start = tripDate.AddDays(2).AddHours(13), End = tripDate.AddDays(2).AddHours(15).AddMinutes(7)  });

Et le résultat est le suivant : un rendez-vous avec un fond dégradé et un avec une image !

Les rendez-vous ne sont pas les seuls à pouvoir être personnalisés. Même les plus petits éléments du planificateur .NET MAUI peuvent être adaptés à vos besoins. La zone d’en-tête (avec tous ses boutons, étiquettes, etc.), l’élément d’en-tête de la définition de la vue, les emplacements spéciaux, les lignes (majeures, mineures, horizontales, verticales, celles de la règle temporelle), l’heure actuelle et plus d’indicateurs de rendez-vous et ainsi de suite.

Ceci est bien entendu lié à la personnalisation de l’apparence visuelle. Vous pouvez également contrôler le type de calendrier qui sera utilisé par le planificateur. Découvrez comment procéder dans la mini-section suivante.

G11N et L10N

Whoa, si je montre le titre de cette section à mon grand-père, il demandera à 100 % une traduction. Mais vous savez probablement que nous parlerons de la prise en charge de la mondialisation et de la localisation du planificateur .NET MAUI.

Quel est le rapport avec le type de calendrier que j’ai mentionné ? Eh bien, le planificateur expose un Culture propriété, ce qui, bien sûr, entraînera des modifications non seulement du type de calendrier que vous verrez, mais également de ses noms de jours et de son premier jour de la semaine.

Par exemple, nous pouvons avoir un calendrier japonais avec cette seule ligne de code :

this.scheduler.Culture = new System.Globalization.CultureInfo("ja"); 

En plus de ce qui précède, l’interface utilisateur Telerik pour .NET MAUI Scheduler fournit également une prise en charge de la localisation. Les éléments que vous pouvez localiser sont les titres de chaque définition de vue, l’en-tête du jour et le texte de définition de vue vide que nous avons vu au tout début de ce blog.

Plus de mille mots et pas un seul regard sur l’apparence mobile de cette beauté ! Laisse-moi me rattraper tout de suite.

Le calendrier ici est affiché en appuyant sur le chevron à côté du nom du mois dans l’en-tête, et les définitions de vue peuvent être changées en appuyant sur les trois points tout à droite dans la zone d’en-tête.

Continuer à explorer

Oooh, ce planificateur est énorme ! 😅 Pas étonnant que ce soit le composant le plus voté lors du Portail de commentaires! 🔝 Ce point est un bon moment pour s’arrêter et laisser le reste explorer par vous-mêmes. Je suis sûr d’avoir suffisamment suscité votre intérêt pour obtenir les dernières informations maintenant et intégrer le planificateur .NET MAUI à vos applications.

Si par hasard vous n’utilisez pas déjà la bibliothèque Telerik UI pour .NET MAUI, essayez-le pendant 30 jours sans frais. Essayez-le et appréciez à quel point il est facile et rapide de développer de superbes applications Maui. Et n’oubliez pas d’explorer le reste des nouveautés apportées par la version DevTools R3.

Et restez à l’écoute car il y a plus et comme toujours, le meilleur est encore à venir. 💫