Voici Vuelendar : un calendrier de sélection de dates écrit en VueJS

La personnalisation devenant de plus en plus difficile et chronophage, nous avons décidé de chercher une autre solution. De plus, les API ne nous permettaient pas d'implémenter de nombreuses exigences qui étaient cruciales pour la qualité du produit final. produit. C'est pourquoi le 1TP53Calendrier a été faite.

Vous pouvez trouver la source code de la 1TP53Calendrier dans notre Dépôt GitHub.

De quoi s'agit-il exactement ?

Comme vous l'avez peut-être déjà deviné au début de cet article, un 1TP53Calendrier est un composant de calendrier écrit en VueJs. Il vous permet de choisir une plage de dates ou une seule. De plus, vous pouvez facilement remplacer les jours inactifs ! De plus, il vous permet d'ajouter des éléments CSS personnalisés qui peuvent changer l'aspect et la convivialité de l'expérience.

Le processus de création

Auparavant, nous utilisions jQquery pour implémenter la fonction calendrier dans l'un de nos projets et nous sommes tombés sur un problème - il était difficile de le personnaliser. C'est alors que nous avons pris la décision de créer notre propre composant. Dans un premier temps, nous l'avons principalement utilisé dans nos propres projets, mais au fil du temps, nous sommes arrivés à la conclusion qu'il pourrait être une solution pratique pour d'autres programmeurs - c'est alors que nous l'avons partagé sur le compte GitHub de The Codest sous la forme d'une bibliothèque de code.

Installation

npm install [email protected]

Utilisation

Importez les styles dans votre fichier .vue :

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

Composants du registre :

import VRangeSelector from 'vuelendar/components/vl-range-selector' ;
import VDaySelector from 'vuelendar/components/vl-day-selector' ;

export default {
  composants : {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range : {},
      date : null
    }
  }
  // ...
}

Utiliser dans le modèle :

Désactivation des dates

Vuelendar permet de désactiver les dates de deux manières différentes.

Utilisation d'un tableau :

Désactivera le 21 avril 2019 et le 25 avril 2019

Utilisation d'un objet pour décrire une fourchette de dates :

Désactivera toutes les dates entre le 21 avril 2019 et le 25 avril 2019

Le fait de ne spécifier que l'attribut "from" désactive toutes les dates antérieures à cette date.

Désactive toutes les dates à partir du 21 avril 2019

Le fait de ne spécifier que l'attribut "jusqu'au" désactive toutes les dates antérieures à cette date.

Désactive toutes les dates avant le 21 avril 2019

Application

Notre 1TP53Calendrier peut être utilisé dans tous les projets basés sur VueJS. Il s'agit d'un composant simple mais efficace qui vous permettra non seulement de gagner du temps en tant que programmeur, mais aussi d'enrichir votre travail. projet avec un calendrier qui fonctionne bien. De nos jours, de nombreux projets peuvent avoir besoin d'une telle solution, alors nous sommes là !

La mise à jour

Avec le lancement de la nouvelle mise à jour de VueJS, de nouvelles exigences sont apparues. C'est pourquoi nous avons décidé d'adapter notre composant de calendrier à la dernière version de VueJS. Les bibliothèques devaient être améliorées afin que notre petit mais pratique bijou fonctionne de manière fluide et efficace.

Conclusion

Si vous êtes au milieu d'un projet basé sur VueJS et que vous cherchez une fonctionnalité intéressante pour un calendrier, celui-ci est certainement pour vous ! Nous savons tous combien de temps la création de ces composants peut prendre. Notre Vuelandar vous aidera à donner du piment à votre candidature et à gagner du temps et de l'énergie !

En savoir plus :

Pourquoi vous devriez (probablement) utiliser Typescript

Comment ne pas tuer un projet avec de mauvaises pratiques de codage ?

Stratégies de récupération des données dans NextJS