تقویم
FullCalendar
بازکردن با codepenروش استفاده
ما از افزونه FullCalendar برای این برنامه تقویم استفاده میکنیم. این افزونه برای نمایش رویدادها به همراه جزئیات در یک tooltip عالی است. میتوانید نام یک رویداد یا سایر دادههای مرتبط را تغییر دهید و یک رویداد جدید اضافه کنید. اضافه کردن این قابلیت از طریق قلابهای رویداد FullCalendar به عهده شماست. برای جزئیات بیشتر، مستندات مستندات FullCalendar را بررسی کنید.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
eventRender: function(info) {
var ntoday = moment().format('YYYYMMDD');
var eventStart = moment( info.event.start ).format('YYYYMMDD');
info.el.setAttribute("title", info.event.extendedProps.description);
info.el.setAttribute("data-toggle", "tooltip");
if (eventStart < ntoday){
info.el.classList.add("fc-past-event");
} else if (eventStart == ntoday){
info.el.classList.add("fc-current-event");
} else {
info.el.classList.add("fc-future-event");
}
},
events: [
{
title: 'All Day Event',
description: 'description for All Day Event',
start: '2020-01-01'
}
// more events here
]
});
calendar.render();
});
<script src="plugins/fullcalendar/core-4.3.1/main.min.js"></script><script src="plugins/fullcalendar/daygrid-4.3.0/main.min.js"></script><script src="js/calendar.js"></script>
<div id="calendar"></div>
<link href="plugins/fullcalendar/core-4.3.1/main.min.css" rel="stylesheet"><link href="plugins/fullcalendar/daygrid-4.3.0/main.min.css" rel="stylesheet">
JalaliDatePicker
بازکردن با codepenروش استفاده
ما از افزونه JalaliDatePicker برای انتخاب تاریخ نیز استفاده میکنیم. این افزونه برای انتخاب تاریخ شمسی در جستجوها عالی است. برای جزئیات بیشتر، مستندات jalalidatepicker در github را بررسی کنید .