Fermer

mai 21, 2019

Construire un planificateur de tâches Mini Vue avec le planificateur Kendo UI


Apprenez à créer votre propre planificateur de tâches dans Vue.js à l'aide du composant Planificateur Kendo UI. Nous créons un projet Vue et implémentons le planificateur Kendo UI pour montrer le processus de configuration et expliquer comment le construire dans Vue.js.

En moyenne, nous organisons quotidiennement deux ou trois événements non planifiés. Ce pourrait être au bureau, à la maison, même dans les cafés. Un ami pourrait facilement vous heurter, et avant de vous en rendre compte, vous vous dirigez vers un endroit où vous ne le saviez pas il y a cinq minutes.

C'est pourquoi les planificateurs de tâches sont importants pour que nous restions concentrés sur ce nous devons le faire, même face à une distraction croissante. Avec un planificateur de tâches, tout ce que vous avez à faire est d'ouvrir votre emploi du temps et de voir quelle est votre prochaine tâche et l'heure à laquelle vous avez planifié de le faire.

Ils nous aident à planifier des tâches spécifiques et à les définir pour qu'elles soient terminées fois. C’est un bon moyen de nous contrôler et d’organiser nos tâches de manière assez simple pour accroître l’efficacité et améliorer la productivité. Dans cet article, nous allons montrer comment vous pouvez en créer un vous-même à l’aide de Vue.js et du composant Planificateur Kendo UI.

Configurer un projet Vue

Nous devons d’abord créer un projet Vue.js avec lequel nous peut démontrer la mise en œuvre de notre planificateur de tâches. Sans plus attendre, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

 $ vue create scheduler-demo

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.

Lorsque vous avez terminé de démarrer votre application Vue, Accédez au nouveau répertoire de l'application Vue et démarrez le serveur de développement.

 $  cd  scheduler-demo
[ npm  $ servir servir

Ceci servira votre application Vue sur localhost: 8080 . Naviguez jusqu'à votre navigateur et vous verrez votre application Vue en direct.

vue-app "title =" vue-app "/> </p> <h2 id= Ajoutez l'interface utilisateur de Kendo au projet

Ensuite, ajoutons Kendo UI à notre nouveau projet Vue. Pour la portée de cette démonstration, nous aurons besoin de:

  1. Le paquet Kendo UI
  2. Le paquet de thème par défaut Kendo UI
  3. Le wrapper Kendo UI Dropdown pour Vue

Pour ce faire, ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez les commandes ci-dessous:

 // Installez le paquet Kendo UI vue
[ npm   $ installer  --save @ progress / kendo-ui
  // Installer un wrapper déroulant Kendo UI  pour  vue
$  npm   installer  --save @ progress / kendo-scheduler-vue-wrapper
  // Installer le paquet thématique par défaut de Kendo UI
$  npm   installer  --save @ progress / kendo-theme-default
  1. Enfin, nous ajoutons les packages nécessaires de Kendo UI du service CDN. Ouvrez le fichier index.html du répertoire public et ajoutez cet extrait dans le tag :

    

 <   rel  = [19659028] " feuille de style "    href  =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common .min.css  "  /> 
 < link   rel  = "  feuille de style  " [

 [19659000] href 
 =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css "   /> [19659041] < script   src  =  " https://code.jquery.com/jquery-1.12.4.min.js "    ]>  </  script > 
 < script   src  =  " https://kendo.cdn.telerik.com/ 2017.3.913 / js / kendo.all.min.js  " >  </  script > 
 < script   src  =  " https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6. 15 / browser-polyfill.min.js  " >  </  script > 
 < script   src  = [19659028] " https://unpkg.com/vue/dist/vue.min.js "  >  </  script > 
    

 < script   src  =  " https://unpkg.com/@progress/kendo-scheduler-vue-wrapper/dist/cdn/kendo-scheduler-vue-wrapper .js  " >  </  script >

Création du composant Planificateur

Maintenant que nous disposons de tous les packages Kendo UI dont nous avons besoin pour notre planificateur app, allons de l'avant et modifions notre application Vue pour rendre le planificateur. Pour ce faire, ouvrez le dossier src / components / . Vous devriez trouver un fichier existant HelloWorld.vue . Renommez le fichier Scheduler.vue et mettez-le à jour avec le code ci-dessous:

 <!  -  src  /  composants  /  Planificateur .  vue  - > 

 < modèle > 

   < div  classe  = [19659085] "Bonjour" > 

     < h1 >  { { msg } }  < /  h1 > 

         < div id  =  "vueapp"   class  =  "vue-app" > 

     <  div > 

       < kendo  -  planificateur :  données  -  source  =  "localDataSource" 

                     :  date  =  "date" 

                     :  height  =  "600" 

                     :  fuseau horaire  =  ] "'Etc / UTC'" 

                     @add  =  "onAdd" 

                     @navigate  =  "onNavigate" 

       < kendo  -  planificateur  -  vue :  type  = . ] "'day'" >  < /  kendo  -  planificateur  -  vue > 

       < kendo  -  planificateur  -  vue :  type  =  "'semaine de travail'"  :  sélectionnée  =  ] "true" >  < /  kendo  -  planificateur  -  vue > 

       < kendo  ] -  planificateur  -  vue :  type  =  "'semaine'" >  < /  kendo  -  ordonnanceur  -  vue > 

       < kendo  -  ordonnanceur  -  vue








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link