Angular 17 + Kendo UI Scheduler : calendrier de cours interactif

Découvrez comment créer un calendrier de cours interactif avec Kendo UI pour Angular Scheduler en utilisant les dernières nouveautés de la version Angular 17.

Face à un nouveau défi, organiser et planifier votre plan d’apprentissage est essentiel. Vous pouvez structurer ce plan quotidiennement, hebdomadairement ou mensuellement.

Mais que se passe-t-il si votre entreprise a besoin que vous organisiez et planifiiez une série de cours sur un calendrier, intégrant les dernières fonctionnalités Angular pour l’apprentissage en équipe ?

Construire une application avec l’intégration de Google Calendar ou d’Outlook n’est pas quelque chose que vous pouvez réaliser du jour au lendemain. Cependant, que se passerait-il si je vous disais que vous pouvez créer votre propre application de planification en utilisant Angulaire 17 et le progrès Interface utilisateur Kendo pour angulaire Un planificateur doté de fonctionnalités uniques, en quelques minutes seulement ?

• Les utilisateurs sélectionnent un cours et sa durée.
• L’application génère automatiquement un événement, en utilisant la durée du cours pour réserver cette heure dans votre calendrier.
• Il offre la flexibilité de visualiser les événements par mois ou par semaine, ou sous forme d’agenda.

Et cette idée amusante ? Donnons vie ensemble et apprenons à connaître Angular 17 et le Kendo UI Scheduler !

Configuration d’Angular 17

Pour commencer, installez Angular 17 sur votre machine. Cela peut être fait facilement en utilisant la commande suivante dans votre terminal ou votre invite de commande :

npm install -g @angular/cli

Cette commande installe la CLI Angular globalement sur votre machine, vous permettant de créer et de gérer des projets Angular depuis n’importe où.

Une fois l’installation terminée, confirmez que tout est correctement configuré en exécutant la version ng :

ng version

Cela affichera la version d’Angular CLI installée et prête à être utilisée pour votre projet.

ng version  

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.0
Node: 18.16.1
Package Manager: npm 9.5.1
OS: darwin arm64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1700.0 (cli-only)
@angular-devkit/core         17.0.0 (cli-only)
@angular-devkit/schematics   17.0.0 (cli-only)
@schematics/angular          17.0.0 (cli-only)

Nous sommes sur la bonne voie. Pour créer votre nouveau projet Angular nommé « learn-schedule », exécutez la commande ng new learn-schedule:

Avez-vous un nouveau calendrier d'apprentissage ?  Quelle feuille de style format Voudriez-vous utiliser ?  SCSS   [ 
https://sass-lang.com/documentation/syntax
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation 
(SSG/Prerendering)? No
✔ Packages installed successfully.
    Successfully initialized git.
dany ~/Desktop  $

After that’s finished, go to the directory and run ng -serve -o to see your first Angular 17 project ready!

This is just the beginning, and you can now start developing your “learn-schedule” application.

Setting up Kendo UI Scheduler

Before we dive into the installation, let’s talk about what the Kendo UI for Angular Scheduler is and why we’d pick it for this project.

Let’s say you have a list of courses about Angular 17 and you want to manage them effortlessly. This is where the Kendo UI Scheduler comes in! It’s part of Kendo UI for Angular, specially designed for scheduling and showing off your events in different styles. Whether you need to edit events, play with time zone settings or set up recurring events, Kendo UI Scheduler has got you covered.

We could spend another hour talking about all the features, so you can read all about the Scheduler and how to get started here.

Ready to Install? Let’s Go!

Open your terminal and run this command to add Kendo UI Scheduler to your project:

Cd 
ℹ Using package manager: npm
✔ Found compatible package version: @progress/kendo-angular-scheduler@14.1.0.
✔ Package information loaded.

The package @progress/kendo-angular-scheduler@14.1.0 will be installed and
 executed.
Would you like to proceed? Yes
✔ Packages successfully installed.

Make it look pretty with the Kendo UI Default theme and update your angular.json to include that stylish Kendo UI theme:

npm install --save @progress/kendo-theme-default

Now point to those styles in your angular.json file:

"build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/learn-schedule",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "LangageStyleenligne": "scss",
            "actifs": ["src/favicon.ico", "src/assets"],
            "modes": [
              "src/styles.scss",
              "node_modules/@progress/kendo-theme-default/dist/all.css"
            ],
            "scripts": []
          },

Le planificateur de l’interface utilisateur Kendo a besoin du angular/localizeajoutez donc ce package en exécutant la commande :

ng add @angular/localize

Une fois ces étapes terminées, vous êtes équipé de Kendo UI Scheduler. Commençons par créer le calendrier des cours des composants !

Création du composant Calendrier des cours

Générer le course-calendar composant utilisant Angular CLI. Ce composant recevra une liste de cours en entrée.

Exécutez cette commande dans votre terminal :

ng g c components/course-calendar
CREATE src/app/components/course-calendar/course-calendar.component.scss (0 bytes)
CREATE src/app/components/course-calendar/course-calendar.component.html (30 bytes)
CREATE src/app/components/course-calendar/course-calendar.component.spec.ts (653 bytes)
CREATE src/app/components/course-calendar/course-calendar.component.ts (330 bytes)

Avec Angular 17, les composants sont générés de manière autonome par défaut. Pour utiliser le Kendo UI Scheduler, vous devez importer le Kendo UI SchedulerModule dans la section des importations du composant :

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SchedulerModule } from '@progress/kendo-angular-scheduler';

@Component({
  selector: 'app-course-calendar',
  standalone: true,
  imports: [CommonModule, SchedulerModule],
  templateUrl: './course-calendar.component.html',
  styleUrl: './course-calendar.component.scss'
})
export class CourseCalendarComponent {

}

Dans le modèle du composant, ajoutez le composant kendo-scheduler. Nous fournirons quelques vues pour le planificateur, telles que des vues journalières, hebdomadaires et mensuelles :

<kendo-scheduler>
  <kendo-scheduler-day-view/>
  <kendo-scheduler-week-view/>
  <kendo-scheduler-month-view/>
</kendo-scheduler>

Avant d’intégrer le course-calendar composant, nous devons créer une zone dans laquelle les utilisateurs peuvent sélectionner le cours auquel ils souhaitent s’inscrire. Créons ensuite ce composant !

Création du formulaire de cours

Avant de continuer, nous allons créer les types et les exemples de données de cours à utiliser dans l’application.

Définissez deux types de cours et déclarez un tableau contenant une liste de ces cours dans un nouveau fichier nommé courses.ts. Pour une meilleure organisation, placez ce fichier dans les nouvelles entités du répertoire, en créant un chemin comme entities/courses.ts:

export type Course = {
  title: string;
  duration: number;
  description: string;
};

export type BookedCourse = Course & {
  when: Date;
};

export const ANGULAR_V17_FEATURES : Array<Course> = [
    {
      title: 'New Control Flow',
      description: 'New Control Flow Syntax @for and more',
      duration: 2,
    },
    {
      title: 'Deferred Views',
      description: 'Deferred Views',
      duration: 6,
    },
    {
      title: 'Hydration',
      description: 'Hydration',
      duration: 4,
    },
    {
      title: 'SSR',
      description: 'SSR',
      duration: 8,
    },
  ];

Ensuite, générez le composant de cours à l’aide du fichier angulaire/cli :

ng g c components/course
CREATE src/app/components/course/course.component.scss (0 bytes)
CREATE src/app/components/course/course.component.html (21 bytes)
CREATE src/app/components/course/course.component.spec.ts (596 bytes)
CREATE src/app/components/course/course.component.ts (295 bytes)

Création d’une interface utilisateur avec les composants de l’interface utilisateur Kendo

Dans le composant Cours, nous exploitons les composants de Kendo UI pour créer une interface conviviale pour la sélection et la planification des cours et la liaison avec les variables suivantes :

• courseList: Contient la liste des cours disponibles
• selectedCourse: Garde une trace du cours actuellement sélectionné
• selectedDate: Stocke la date et l’heure choisies par l’utilisateur
• dateTimeFormat: Spécifie le format d’affichage des dates et des heures

courseList: Array<Course> = ANGULAR_V17_FEATURES;

public selectedDate: Date = new Date();
public selectedCourse = this.courseList[0];
public dateTimeFormat = 'MM/dd/yyyy HH:mm';

addToCalendar() {

}

N’oubliez pas d’importer ANGULAR_V17_FEATURES et Cours à partir d’entités/cours.

Nous voulons toujours gagner du temps et, avec les composants de l’interface utilisateur Kendo et les liaisons variables, votre formulaire est non seulement fonctionnel mais aussi esthétique et facile à utiliser.

• Le <kendo-dropdownlist> est utilisé pour la sélection des cours. Il se lie à selectedCourse en utilisant la liaison de données bidirectionnelle avec [(ngModel)] dans [data] l’attribut est lié à courseListavec la gamme d’options de cours.

• Le <kendo-datetimepicker> permet aux utilisateurs de sélectionner une date et une heure pour suivre le cours. Il lie le selectedDate variable en utilisant le [(value)] attribut et [format] à dateTimeFormat pour afficher la date et l’heure dans un format spécifique.

• Le bouton avec le kendoBouton La directive permet aux utilisateurs de confirmer leur sélection et d’ajouter le cours à leur calendrier. Le (click) l’événement est lié au addToCalendar() méthode, qui gérera la logique pour ajouter le cours et la date sélectionnés au calendrier.

Le balisage final ressemble à :

<h1>Prepare your Angular RoadMap </h1>
  <div class="course-form">
    <kendo-label text="To Learn ?">
      <kendo-dropdownlist [(ngModel)]="selectedCourse" [data]="courseList" id="courses" textField="title"
        valueField="description">
      </kendo-dropdownlist>
    </kendo-label>
    <kendo-label text="When ?">
      <kendo-datetimepicker [(value)]="selectedDate" [format]="dateTimeFormat"></kendo-datetimepicker>
    </kendo-label>
  </div>
<button (click)="addToCalendar()" kendoButton>Book it!</button>
</div>

OK, nous avons la liste des composants, mais comment communiquer avec les composants ? Eh bien, le composant de cours émettra un événement avec le cours sélectionné et le liera au app.component, vous permettant de gérer le cours sélectionné.

Importations pour nos composants autonomes

À ce stade, vous obtenez probablement des erreurs dans vos composants de cours et de calendrier de cours qui ne reconnaissent pas kendo-label ou kendo-scheduler. Notre application a ces dépendances, mais pas nos composants autonomes. Il vous suffit de fournir à chaque composant les importations manquantes. Vérifier mon application terminée sur GitHub si vous avez besoin d’aide pour configurer vos importations.

Voici les importations dont vous devriez avoir besoin à ce stade de l’application pour votre composant de calendrier :

import { Component, EventEmitter, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ANGULAR_V17_FEATURES, BookedCourse } from '../entities/course';

import { FormsModule } from '@angular/forms';
import { ButtonModule } from '@progress/kendo-angular-buttons';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';

@Component({
selector: 'app-course',
standalone: true,
imports: [
CommonModule,
    DateInputsModule,
    DropDownListModule,
    InputsModule,
    ButtonModule,
    LabelModule,
    FormsModule
],
templateUrl: './course.component.html',
styleUrl: './course.component.scss'
})
export class CourseComponent {
...
}

Et les importations pour votre composant calendrier de cours :

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MonthViewModule,
SchedulerModule,
} from '@progress/kendo-angular-scheduler';


...

@Component({
selector: 'app-course-calendar',
standalone: true,
imports: [CommonModule, MonthViewModule, SchedulerModule],
templateUrl: './course-calendar.component.html',
styleUrl: './course-calendar.component.scss'
})
export class CourseCalendarComponent {

}

Gestion du cours sélectionné

Nous devons déclarer un émetteur d’événements pour envoyer les données de cours sélectionnées aux composants parents.

@Output() addCourse = new EventEmitter<BookedCourse>();

Dans le addToCalendar méthode, dans le composant cours, rassemblez les valeurs du cours sélectionné et émettez l’événement :

addToCalendar() {

    const bookedCourse: BookedCourse = {
      when: this.selectedDate,
      title: this.selectedCourse.title,
      description: this.selectedCourse.description,
      duration: this.selectedCourse.duration,
    };
    this.addCourse.emit(bookedCourse);
  }

Avec cette configuration, le composant de cours est maintenant prêt à interagir avec app.component.

Avant d’utiliser le composant de cours dans votre application, assurez-vous que les animations sont activées, car le sélecteur de calendrier et d’heure de Kendo UI pour Angular en dépend. Dans Angular 17, cela se fait dans le app.config.ts déposer:

import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideAnimations()],
};

Intégration dans l’application

Dans app.component.tsdéclarez un tableau pour stocker les cours réservés :

bookedCourses: BookedCourse[] = [];

addBookedCourse(course: BookedCourse) {
  this.bookedCourses = [...this.bookedCourses, course];
}

Dans le HTML de votre application, écoutez le addCourse événement et liez-le à l’événement addBookedCourse méthode:

<app-course (addCourse)="addBookedCourse($event)"></app-course>
<app-course-calendar></app-course-calendar>

Assurez-vous également de les importer dans votre fichier TypeScript !

import { CourseCalendarComponent } from './components/course-calendar/course-calendar.component';
import { CourseComponent } from './components/course/course.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, CourseCalendarComponent, CourseComponent],
...

L’analyse de rentabilisation

Avant de finaliser la liaison dans le composant calendrier-cours, n’oubliez pas les détails de l’analyse de rentabilisation suivants :

• Les cours ont une durée déterminée, ce qui nécessite une programmation dans ce délai.
• Le composant Planificateur attend un type d’événement Planifier, pas un événement Cours.

Par conséquent, des étapes supplémentaires sont nécessaires pour transformer les données de cours dans un format adapté au composant Planificateur.

Transformation de l’entrée pour le composant Cours-Calendrier

À partir de la version 16.1 d’Angular, une fonctionnalité est fournie pour transformer les entrées. Cela permet de convertir le cours BookedCourse dans le format attendu pour le Kendo UI Scheduler. Utilisons cette fonctionnalité.

Transformez les cours pour planifier un événement

Pour afficher correctement nos cours dans le planificateur Kendo UI, nous devons transformer nos données de cours dans un format que le planificateur peut comprendre. Nous utiliserons deux fonctions à cet effet :

• calculateCourseEndTime: Cette fonction calcule l’heure de fin d’un cours en fonction de son heure de début et de sa durée.
• mapCoursesToSchedulerEvents: Cette fonction transforme un tableau de BookedCourse dans un tableau de SchedulerEvent objets adaptés au Kendo UI Scheduler.

Créer un nouveau fichier utils.tsil fournit les fonctions précédentes, pour gagner du temps, ajoutez l’extrait suivant :

'import { BookedCourse } from '../entities/course';
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';

export function calculateCourseEndTime(
  courseDate: Date,
  duration: number,
): Date {
  let courseEndTime = new Date(courseDate.getTime());
  courseEndTime.setHours(courseEndTime.getHours() + duration);
  return courseEndTime;
}

export function mapCoursesToSchedulerEvents(
  courses: BookedCourse[],
): SchedulerEvent[] {
  return courses.map((course) => ({
    title: course.title,
    description: course.description,
    start: course.when,
    end: calculateCourseEndTime(course.when, course.duration),
    isAllDay: false,
  }));
}

Parfait. Passons à la dernière étape :

Intégration du composant Calendrier des cours

Dans le course-calendar composant, ajoutez une propriété d’entrée nommée courses. Cette propriété prendra un éventail de BookedCourse. Le transform possibilité dans le @Input décorateur utilise notre mapCoursesToSchedulerEvents fonction pour transformer automatiquement les données d’entrée dans le format requis par le planificateur Kendo UI.

@Input({ transform: mapCoursesToSchedulerEvents }) courses: BookedCourse[] = [];

Enfin, reliez les cours à l’aide du kendoSchedulerBinding directive pour appliquer la transformation courses tableau au planificateur de l’interface utilisateur Kendo.

<kendo-scheduler [kendoSchedulerBinding]="courses">

Affichage du planificateur d’interface utilisateur Kendo à l’aide d’Angular @if Directif

Enfin, nous souhaitons afficher le calendrier uniquement si nous avons des cours. Utilisation de la nouvelle syntaxe de flux de contrôle @if est un excellent moyen d’afficher dynamiquement des composants en fonction de certaines conditions.

Nous utilisons @if pour afficher conditionnellement le Kendo UI Scheduler dans le composant du calendrier des cours. Placer le @if directive dans le modèle de votre composant.

@if (courses.length > 0 ) {
  <p>Looks like you have appointments. Please go ahead and attend them</p>
  <kendo-scheduler [editable]="true" [kendoSchedulerBinding]="courses">
    <kendo-scheduler-day-view>

    </kendo-scheduler-day-view>

    <kendo-scheduler-week-view>
    </kendo-scheduler-week-view>
    <kendo-scheduler-month-view></kendo-scheduler-month-view>
  </kendo-scheduler>
} @else {
  <p>Hey! Looks like your agenda is free ;) Please pick one course.</p>
}

Cette directive vérifiera si le courses le tableau a des entrées. Si c’est le cas (c’est-à-dire courses.length > 0), il affichera le Kendo UI Scheduler avec les cours. Sinon, il affichera un message indiquant que l’agenda est libre.

Enfin, revenez à app.component et liez les cours réservés au calendrier :

<app-calendar [courses]="bookedCourses"/>

Enregistrez les modifications, rechargez et félicitations ! Vous disposez d’une application qui vous permet de réserver des cours et d’effectuer des calculs en fonction de la durée des cours. Il affiche également les cours dans un calendrier élégamment organisé avec Angular 17 et l’interface utilisateur Kendo pour Angular Scheduler.

résumer

Nous avons créé avec succès une application de planification à l’aide d’Angular 17 et du Kendo UI Scheduler, couvrant la configuration, l’installation, l’intégration d’autres composants de Kendo UI et la transformation des données.

J’ai beaucoup aimé apprendre à construire un calendrier, à peaufiner les données à l’aide des puissantes fonctionnalités d’Angular et à implémenter une logique métier avant de lier les événements. J’espère sincèrement que cela vous aidera dans vos prochains projets de planification. 😊 N’hésitez pas à programmer une démo de Kendo UI ou Essayez-le gratuitement aujourd’hui.