مكتبة JavaScript قوية تعمل على تبسيط عملية إنشاء تقاويم ديناميكية بأحداث و classes قابلة للتخصيص. باستخدام Quick Calendar، يمكنك إنشاء تقويمات بسهولة باستخدام JavaScript وCSS فقط، دون أي مكتبات خارجية.
يمكنك بسهولة تعيين الأحداث لتواريخ محددة أو أحداث متعددة في وقت واحد، مما يوفر المرونة للتعامل مع سيناريوهات الجدولة المختلفة. كرر الأحداث بسلاسة على أساس شهري أو سنوي، مما يسمح بالإدارة الفعالة للمهام والمواعيد المتكررة.
يوفر Quick Calendar أيضًا القدرة على تخصيص CSS class لأي تاريخ، مما يمكّنك من التمييز بصريًا بين التواريخ المهمة أو تسليط الضوء على أحداث معينة. قم بتخصيص يوم بداية الأسبوع في التقويم ليتوافق مع احتياجاتك المحددة أو تفضيلاتك الإقليمية.
تحكم بشكل كامل في تفاعلات المستخدم عن طريق تعيين أحداث الماوس إلى شبكة التقويم، مما يتيح تجارب جذابة وتفاعلية. يمكنك تحسين سهولة الاستخدام عن طريق إضافة وسيلة إيضاح مناسبة أسفل التقويم، مما يوفر مرجعًا واضحًا للأحداث أو الفئات المرمزة بالألوان.
بالإضافة إلى ذلك، يوفر Quick Calendar ميزة إدخال، مما يسمح للمستخدمين باختيار الشهر والسنة المرغوبين دون عناء، مما يضمن التنقل السلس عبر فترات زمنية مختلفة.
استمتع بالبساطة والتنوع الذي يتميز به Quick Calendar حيث يمكنك إطلاق العنان لإمكانات إنشاء التقويم الديناميكي، مع استكمال إدارة الأحداث وخيارات التخصيص وتفاعلات المستخدم البديهية. قم بتمكين تطبيقاتك ومواقع الويب الخاصة بك من خلال وظائف Quick Calendar القوية اليوم.
يمكنك تمرير محدد CSS أو عنصر Html
let ele = document.querySelector('.cal');
let cal = new Cal(ele);
أو:
let cal = new Cal('.cal');
الشهر الافتراضي هو الشهر الحالي
يمكنك إضافة حدث ببساطة عن طريق استدعاء أسلوب addEvent وتمرير التاريخ "YYYY-MM-DD".
يمكنك إدراج أي تنسيق مقبول من Date function.
cal.addEvent('2019-3-2', true);
// the method accept another bollean parameter to refresh the calender
// immediately after adding the event,
// but it is better when we finish all the work then refresh it manually
// so the default value for refresh is false
// you can pass a Date Object
let dt=new Date('Mar 27 2019');
cal.addEvent(dt);
// you can pass an object contains the date, the tip, the class and an option
// to loop the event
// the tip will popup as the mouse hover over the event
// the loop option accept 'month' and 'year'
cal.addEvent({date:'2019-03-10', tip:'WOW', loop:'month'});
// you can also pass an array of events
// you can pass one class or an array of classes
cal.addEvent([
'2019-3-5',
{date:'2019-3-9'},
{date:'2019-3-12', class:'red', tip:'Important!', loop:'month'},
{date:'2019-3-12', tip:'another event in the same day!'},
{date:'2019-3-21', tip:'this is great!', class:['red','cal-animate']},
{date:'2019-4-23', tip:'Try it!'}
]);
let id = cal.addEvent('2019-3-18'); // return event's ID,
// use it to remove the event later if you need to.
cal.removeEvent(id); // you can also pass an array of Id's
// you can give any date a special class, you can pass one class
// or an array of classes
cal.setDayClass ({date:'2019-3-16', class: 'gold'});
cal.setDayClass ({date:'2019-3-21', class: ['gold', 'big']});
// in case you see this later
cal.goToDate('2019-3-10');
// now you are ready to refresh the calendar
cal.refresh();
// there is also many other methods:
cal.el() // returns calendar wrapper element
cal.refresh() // rebuild the calender
cal.prevMonth() // go to the privious month
cal.nextMonth() // go to the next month
cal.setFirstDayInTheWeek(n)
// set the first day to be used, // 0 is Sunday .. 6 is Saturday.
cal.clearEvents(refresh)
// clear all the events in the calender, pass true to refresh the calendar
cal.removeSpecialDayClass(obj, refresh)
// use it to remove a class from a date,
// you can pass a string date to remove all it's classes
// or pass an object {date: .. , class:..} where class can be a string or an array
clearAllSpecialClasses(refresh)
// to clear all the classes from all dates
goToDate(date)
// use it to go to a date, you can pass a string or a Date Object
Github هنا