Comment faire un calendrier mensuel avec de vraies données

Avez-vous déjà vu un calendrier sur une page Web et vous avez pensé: "Comment l'ont-ils fait?" Il est naturel d'utiliser des plugins ou même des calendriers Google intégrés pour des choses comme celle-ci, mais en fait, faire un calendrier est beaucoup plus facile que vous ne le pensez, seulement trois mousquetaires de HTML, CSS et JavaScript. Faisons-en un ensemble!

J'ai configuré une démo sur une boîte de codes et une boîte où vous pouvez voir notre cible.

Consultez d'abord la démo, déterminons certaines des exigences du calendrier. cela devrait:

• Affiche la grille du mois pour le mois spécifié
• Affiche des dates pour le mois précédent et le mois suivant afin que la grille soit toujours complète
• Indique la date actuelle
• Afficher le nom du mois actuellement sélectionné
• Accédez au mois précédent et le mois suivant
• Permettez aux utilisateurs de revenir au mois en cours en cliquant une fois

Oh, et nous allons le construire en une seule application de page pour obtenir des dates de calendrier de Day.js (une bibliothèque d'utilité super légère).

Pour simplifier les opérations, nous éviterons de choisir des cadres spécifiques. Pour cette configuration, j'utilise des parcelles pour la gestion des packages afin que je puisse utiliser Babel pour écrire du code, regrouper le code et gérer la seule dépendance du projet. Consultez le fichier package.json sur codes et boîte pour plus d'informations.

Étape 1: Commencez par des balises et des styles de base

Commençons par créer un modèle de base pour votre calendrier. Cela ne nécessite rien de sophistiqué. Mais cela doit également être fait sans utiliser le formulaire.

Nous pouvons décrire notre balisage comme trois couches, qui contient:

• Section du titre du calendrier. Cela affichera le mois actuellement sélectionné et les éléments responsables de la pagination entre les mois.
• Section de titre de grille de calendrier. Encore une fois, nous n'utiliserons pas de tables, mais c'est comme un en-tête qui contient une liste de jours de la semaine.
• Grille de calendrier. Vous savez, chaque jour du mois en cours est représenté par un carré dans la grille.

Écrivons ceci dans un fichier appelé index.js. Cela peut être placé dans le dossier SRC dans le dossier du projet. Nous avons un fichier index.html dans le répertoire racine du projet pour importer notre travail, mais la balise principale sera dans le fichier JavaScript.

 document.getElementById ("app"). innerHtml = `
<div>
  <div>
    Juillet 2020
  </div>

  <div>
    Aujourd'hui
    >
  </div>

  <ol>
    <li>Lun</li>
    ...
    <li>Soleil</li>
  </ol>

  <ol>
    <li>
      1
      ...
      29
    </li>
  </ol>
</div>
`;

Passons à l'importation de ce fichier dans le fichier index.html situé dans le répertoire racine du projet. Rien de spécial ne s'est produit ici. Il s'agit juste d'un chaudière HTML qui contient un élément situé par notre application et enregistré dans notre fichier index.js.

 

  
    <meta charset="UTF-8">
    <title>Bac à sable de colis</title>
  
  
    <div id="app"></div>
    <script src="./src/index.js"></script>
  

Maintenant que nous avons des marqueurs à utiliser, stylissons un peu pour que nous ayons un bon visuel comme début. Plus précisément, nous allons:

• Positionnement des éléments avec Flexbox
• Créer un cadre de calendrier à l'aide de la grille CSS
• Positionner les étiquettes dans les cellules

Tout d'abord, créons un nouveau fichier Styles.css dans le même dossier SRC que Index.js et mettons cela:

 / * ... (le code CSS est le même que ci-dessus) ... * /

La partie clé de la configuration d'une grille est:

 .Day de semaine,
.Days-Grid {
  / * 7 colonnes égales pour les jours de semaine et les cellules de jours * /
  Affichage: grille;
  Grid-Template-colonnes: répéter (7, 1FR);
}

Notez que le titre de grille de calendrier et la grille de calendrier eux-mêmes sont présentés à l'aide d'une grille CSS. Nous savons qu'il y a toujours sept jours par semaine, ce qui nous permet de créer sept colonnes proportionnelles les unes aux autres à l'aide de la fonction Repeat (). Nous avons également déclaré un min-hauteur de 100px à chaque date de calendrier pour garantir que les lignes sont cohérentes.

Nous devons connecter ces styles avec les balises, alors ajoutons-les en haut du fichier index.js:

 import "./styles.css";

C'est un bon point d'arrêt pour voir ce que nous avons jusqu'à présent.

Voir la démo ### Étape 2: Définissez le calendrier du mois en cours

Vous avez peut-être remarqué que le modèle ne contient actuellement que des données statiques. Le mois est codé en hard en juillet, et les numéros de date sont également codés en dur. C'est là que Day.js entre en jeu. Il fournit toutes les données dont nous avons besoin pour placer correctement la date à la date correcte de la semaine en utilisant des données de calendrier réelles. Il nous permet d'obtenir et de définir n'importe quoi d'une date de début d'un mois à toutes les options de format de date requises pour afficher les données.

nous allons:

• Obtenez le mois en cours
• Calculez où la date doit être placée (jour de travail)
• Calculez les dates pour afficher le mois précédent et le mois suivant
• Combinez toutes les dates dans un tableau

Tout d'abord, nous devons importer day.js et supprimer tous les HTML statiques (mois sélectionné, jour de semaine et date). Nous le ferons en ajoutant cela au style d'importation directement au-dessus du fichier index.js:

 Importer Dayjs à partir de "DayJs";

Nous compterons également sur le plugin day.js pour obtenir de l'aide. La semaine nous aide à définir le premier jour de la semaine. Certaines personnes aiment faire le dimanche le premier jour de la semaine. D'autres préfèrent lundi. Heck, dans certains cas, il est logique de commencer vendredi. Nous commencerons lundi.

Le plugin Weekofyear renvoie la valeur numérique de la semaine en cours de l'année. Il y a 52 semaines par an, donc nous pouvons dire que la semaine à partir du 1er janvier est la première semaine de l'année, etc.

Voici donc ce que nous ajoutons à index.js après l'instruction IMPORT:

 const weekday = require ("dayjs / plugin / weekday");
const weekofyear = requis ("dayjs / plugin / weekofyear");

dayjs.extend (en semaine);
dayjs.extend (semaineofyear);

Une fois que nous avons supprimé les valeurs du calendrier codées en dur, c'est ce que nous avons jusqu'à présent dans index.js:

 // ... (le code JavaScript est le même que ci-dessus) ...

Maintenant, définissons quelques constantes. Plus précisément, nous voulons construire un éventail de jours de la semaine (c'est-à-dire lundi, mardi, mercredi, etc.):

 // ... (le code JavaScript est le même que ci-dessus) ...

Ensuite, nous voulons obtenir l'année en cours et le définir au format Yyyy:

 // ... (le code JavaScript est le même que ci-dessus) ...

Nous voulons définir le mois en cours comme point de départ lors du chargement du calendrier, où M formats le mois comme une valeur numérique (par exemple, janvier égal à 1):

 // ... (le code JavaScript est le même que ci-dessus) ...

Continuons à remplir nos titres de grille de calendrier avec les jours de la semaine. Tout d'abord, nous obtenons l'élément correct (# jours de semaine), puis nous parcourons le tableau des jours de semaine, créons un élément d'élément de liste pour chaque élément dans le tableau et définissons le nom de chaque élément:

 // ... (le code JavaScript est le même que ci-dessus) ...

Étape 3: Créez une grille de calendrier

C'est très simple, mais maintenant le vrai plaisir commence parce que nous utiliserons la grille de calendrier maintenant. Arrêtons-nous et réfléchissons à ce que nous devons vraiment faire pour le faire correctement.

Tout d'abord, nous voulons que les numéros de date tombent dans la bonne colonne du jour de travail. Par exemple, le 1er juillet 2020 est mercredi. C'est là que le numéro de date doit commencer.

Si le premier jour d'un mois est mercredi, cela signifie qu'il y aura des articles de grille disponibles lundi et mardi de la première semaine. Le dernier jour du mois est le 31 juillet, vendredi. Cela signifie que le samedi et le dimanche de la semaine dernière sera vide. Nous voulons remplir ces dates avec des dates de fuite et des dates de tête pour le mois précédent et le mois suivant afin que la grille de calendrier soit toujours terminée.

Créer la date du mois en cours

Pour ajouter la date du mois en cours au réseau, nous devons savoir combien de jours il y a dans le mois en cours. Nous pouvons utiliser la méthode DaysImonth fournie par day.js pour l'obtenir. Créons une méthode d'assistance pour cela.

 // ... (le code JavaScript est le même que ci-dessus) ...

Lorsque nous le savons, nous créons un tableau vide de longueur est égal au nombre de jours dans le mois en cours. Nous mappons ensuite le tableau et créons un objet de date pour chaque tableau. Les objets que nous créons ont une structure arbitraire, vous pouvez donc ajouter des propriétés supplémentaires si vous le souhaitez.

Dans cet exemple, nous avons besoin d'une propriété de date qui sera utilisée pour vérifier si une date spécifique est la date actuelle. Nous retournerons également une propriété dayofmonth qui agit comme une étiquette (par exemple 1, 2, 3, etc.). Iscurrentmonth vérifie si la date est à l'intérieur ou à l'extérieur du mois en cours. S'il est en dehors du mois en cours, nous allons le coiffer pour que les gens sachent qu'ils sont en dehors de la gamme du mois en cours.

 // ... (le code JavaScript est le même que ci-dessus) ...

Ajouter la date du mois précédent à la grille du calendrier

Pour obtenir la date du mois précédent à afficher au cours du mois en cours, nous devons vérifier le jour de la semaine le premier jour du mois sélectionné. C'est là que nous pouvons utiliser le plugin en semaine pour day.js. Créons une méthode d'assistance pour cela.

 // ... (le code JavaScript est le même que ci-dessus) ...

Ensuite, sur la base de cela, nous devons vérifier le jour du dernier lundi du mois précédent. Nous avons besoin de cette valeur pour savoir combien de jours du mois précédent devrait être affiché dans la vue du mois en cours. Nous pouvons l'obtenir en soustrayant la valeur de la journée de travail du premier jour du mois en cours. Par exemple, si le premier jour d'un mois est mercredi, nous devons soustraire 3 jours pour obtenir le dernier lundi du mois précédent. Avec cette valeur, nous pouvons créer un tableau d'objets de date à partir du dernier lundi du mois précédent et jusqu'au dernier jour de ce mois.

 // ... (le code JavaScript est le même que ci-dessus) ...

Ajouter la date du mois suivant à la grille du calendrier

Maintenant, tournons pour calculer les dates que nous devons obtenir du mois prochain pour remplir la grille du mois en cours. Heureusement, nous pouvons utiliser la même méthode d'assistance que nous venons de créer pour les calculs du mois précédent. La différence est que nous calculerons le nombre de jours devrait être affiché le mois prochain en soustrayant cette valeur de jour de travail à partir de 7.

Ainsi, par exemple, si le dernier jour d'un mois est samedi, nous devons soustraire 1 jour de 7 pour construire le tableau de date requis du mois prochain (dimanche).

 // ... (le code JavaScript est le même que ci-dessus) ...

OK, nous savons comment créer tous les jours requis, utilisons la méthode que nous venons de créer, puis fusionnez tous les jours dans un seul tableau contenant tous les jours que nous voulons afficher dans le mois en cours, y compris les dates de rembourrage pour le mois précédent et le mois prochain.

 // ... (le code JavaScript est le même que ci-dessus) ...

Voici tout ce que nous assemblons dans index.js:

 // ... (le code JavaScript est le même que ci-dessus) ...

Voir la démo ### Étape 4: Afficher la date du calendrier

OK, nous avons donc les marqueurs de base du calendrier, nous devons afficher des données pour la date du mois en cours, plus les dates du mois précédent et le mois prochain pour remplir les éléments de la grille vides. Nous devons maintenant joindre la date au calendrier!

Nous avons déjà un conteneur pour une grille de calendrier # les jours civils. Obtenons l'élément.

 // ... (le code JavaScript est le même que ci-dessus) ...

Créons maintenant une fonction qui attache les dates à la vue de calendrier.

 // ... (le code JavaScript est le même que ci-dessus) ...

Notez que nous vérifions les dates du mois précédent et du mois suivant afin que nous puissions ajouter une classe pour les distinguer des dates du mois en cours:

 // ... (le code CSS est le même que ci-dessus) ...

C'est ça! Notre calendrier devrait maintenant être affiché comme nous le voulons.

Voir la démo ### Étape 5: Sélectionnez le mois en cours

Ce que nous avons jusqu'à présent est assez bon, mais nous voulons que les utilisateurs puissent enregistrer le mois en avant et en arrière, en commençant par le mois en cours. Nous avons déjà la majeure partie de la logique, donc ce que nous devons vraiment faire, c'est ajouter un écouteur de clic au bouton de pagination qui rejoue le calcul de la date et repeint le calendrier avec des données mises à jour.

Avant de commencer, définissons les variables de date pour le mois en cours, le mois précédent et le mois suivant afin que nous puissions les référencer tout au long du code.

 // ... (le code JavaScript est le même que ci-dessus) ...

Créons maintenant une méthode qui sera responsable de la recalcul de la date du calendrier et de la rediffusion du calendrier lors de la pagination à un autre mois. Nous appellerons la fonction CreateCalendar. Cette méthode acceptera deux propriétés - encore et mois - et sur la base de cela, le calendrier sera remis avec de nouvelles données sans recharger la page.

Cette méthode remplace le contenu de titre pour toujours afficher l'étiquette du mois sélectionné.

 // ... (le code JavaScript est le même que ci-dessus) ...

Il obtiendra ensuite le conteneur de date de calendrier et supprimera toutes les dates existantes.

 // ... (le code JavaScript est le même que ci-dessus) ...

Après avoir effacé le calendrier, il calculera la nouvelle date qui devrait être affichée en utilisant la méthode que nous avons créée précédemment.

 // ... (le code JavaScript est le même que ci-dessus) ...

Enfin, il attachera un élément de date à chaque jour.

 // ... (le code JavaScript est le même que ci-dessus) ...

Une partie logique manquait également: une méthode de removeAlLdayElements qui efface un calendrier existant. Cette méthode prend le premier élément de date de calendrier, le supprime et le remplace par un autre élément. De là, il bouclera la logique jusqu'à ce que tous les éléments soient supprimés.

 // ... (le code JavaScript est le même que ci-dessus) ...

Maintenant, lorsque nous voulons changer le mois, nous pouvons réutiliser cette logique. Rappelez-vous la première étape, lorsque nous avons créé un modèle statique pour le composant. Nous avons ajouté ces éléments:

 // ... (le code HTML est le même que ci-dessus) ...

Ce sont les contrôles de la pagination entre les mois. Pour le changer, nous devons stocker le mois actuellement sélectionné. Créons une variable qui suit ce qu'elle est et définissons sa valeur initiale ce mois-ci.

 // ... (le code JavaScript est le même que ci-dessus) ...

Maintenant, pour que le sélecteur fonctionne, nous avons besoin de JavaScript. Pour faciliter la lecture, nous créerons une autre méthode appelée initMonthSelectors et laisserons la logique là-bas. Cette méthode ajoute un écouteur d'événements à l'élément sélecteur. Il écoute les événements de clic et met à jour la valeur de Selectedmonth au nom du mois nouvellement sélectionné, puis exécute la méthode CreateCalendar avec les valeurs de l'année et du mois correctes.

 // ... (le code JavaScript est le même que ci-dessus) ...

C'est ça! Notre calendrier est prêt. Bien que ce soit bon, ce serait encore mieux si nous pouvions marquer la date actuelle afin qu'elle se démarque du reste. Cela ne devrait pas être difficile. Nous définissons déjà un style de date en dehors du mois en cours, alors faisons quelque chose de similaire.

Nous créerons une variable définie aujourd'hui:

 // ... (le code JavaScript est le même que ci-dessus) ...

Ensuite, dans la méthode de l'annexe, lorsque nous appliquons une classe avec une date en dehors du mois en cours, nous devons ajouter un autre chèque pour voir si l'élément est la date d'aujourd'hui. Si c'est le cas, nous ajouterons une classe à l'élément:

 // ... (le code JavaScript est le même que ci-dessus) ...

Maintenant, nous pouvons définir le style!

 // ... (le code CSS est le même que ci-dessus) ...

Regardez, nous avons fini! Découvrez la démo finale pour voir une combinaison de tout.

Voir la démo

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!