تعرّف على Vuelendar: تقويم محدد التواريخ مكتوب بلغة VueJS

نظرًا لأن التخصيص أصبح أكثر صعوبة واستهلاكًا للوقت، قررنا البحث عن حل آخر. والأكثر من ذلك، لم تسمح لنا واجهات برمجة التطبيقات بتنفيذ الكثير من المتطلبات التي كانت حاسمة للغاية بالنسبة لجودة النهاية المنتج. ولهذا السبب فإن VueP55تقويم تم صنعه.

يمكنك العثور على المصدر الكود من VueP55تقويم في مستودع GitHub.

ما هو بالضبط؟

كما قد تكون خمنت بالفعل في بداية هذا المقال، فإن VueP55تقويم هو مكوّن تقويم مكتوب بلغة VueJs. يسمح لك باختيار نطاق من التواريخ أو تاريخ واحد. والأكثر من ذلك، يمكنك أيضًا استبدال الأيام غير النشطة بسهولة! كما أنه يسمح لك بإضافة أجزاء CSS مخصصة والتي يمكن أن تغير في النهاية تجربة "الشكل والمظهر".

عملية الإنشاء

في السابق، كنا نستخدم jQquery لتنفيذ خاصية التقويم في أحد مشاريعنا وقد واجهتنا مشكلة - كان من الصعب تخصيصها. هذا هو الوقت الذي اتخذنا فيه قرارًا بصنع مكوننا الخاص. في المرحلة الأولى، استخدمناه بشكل أساسي في مشاريعنا الخاصة ولكن مع مرور الوقت، توصلنا إلى استنتاج أنه قد يكون حلاً مفيدًا للمبرمجين الآخرين - وهذا عندما شاركناه على حساب The Codest على GitHub على شكل مكتبة أكواد.

التركيب

تثبيت npm [email protected]

الاستخدام

استيراد الأنماط في ملف .vue الخاص بك:

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

مكونات السجل:

استيراد VRangeSelector من 'vuelendar/components/vl-range-selector'؛
استيراد VDaySelector من 'vuelendar/components/vl-day-selector';

تصدير افتراضي {
  المكونات: {
    VRangeSelector,
    VDaySelector
  },
  البيانات () {
    الإرجاع {
      النطاق: {},
      التاريخ: فارغ
    }
  }
  // ...
}

استخدم في القالب:

تعطيل التواريخ

يتيح Vuelendar طريقتين لتعطيل التواريخ.

باستخدام مصفوفة:

سيتم تعطيل 21 أبريل 2019 و25 أبريل 2019

استخدام كائن لوصف نطاق من التواريخ:

سيتم تعطيل جميع التواريخ من 21 أبريل 2019 و25 أبريل 2019

سيؤدي تحديد سمة "من" فقط إلى تعطيل جميع التواريخ التي تجاوزت ذلك التاريخ.

سيتم تعطيل جميع التواريخ من 21 أبريل 2019

سيؤدي تحديد السمة "إلى" فقط إلى تعطيل جميع التواريخ قبل ذلك التاريخ.

سيتم تعطيل جميع التواريخ قبل 21 أبريل 2019

التطبيق

لدينا VueP55تقويم يمكن استخدامه في جميع المشاريع القائمة على VueJS. إنه مكون بسيط ولكنه فعال لن يوفر وقتك كمبرمج فحسب، بل سيثري أيضًا المشروع مع تقويم يعمل بسلاسة. في الوقت الحاضر، هناك العديد من المشاريع التي قد تحتاج إلى هذا الحل، لذلك نحن هنا!

التحديث

مع إطلاق التحديث الجديد لـ VueJS، ظهرت المتطلبات الجديدة. لهذا السبب قررنا تعديل مكون التقويم الخاص بنا إلى أحدث إصدار من VueJS. كان لا بد من تحسين المكتبات حتى تعمل جواهرنا الصغيرة ولكن المفيدة بسلاسة وفعالية.

الخاتمة

إذا كنت في منتصف مشروع يعتمد على VueJS وتبحث عن ميزة رائعة للتقويم، فهذا بالتأكيد مناسب لك! نعلم جميعًا كم من الوقت يمكن أن يستغرق إنشاء هذه المكونات. لدينا Vuelandar سيساعدك على إضفاء الإثارة على طلبك وتوفير بعض الوقت والأعصاب!

اقرأ المزيد:

لماذا يجب عليك (على الأرجح) استخدام Typescript

كيف لا تقتل مشروعاً بممارسات الترميز السيئة؟

استراتيجيات جلب البيانات في NextJS