Hi dear reader, in this post I will tell you how the idea of creating this calendar was born, how you can use it in your projects and what working advantages it will give you in comparison to other calendars.
Working on a project where there was a need for a large-format calendar, and none of the existing versions of the Internet did not meet our requirements, I decided to write a new one that would be dynamic and would meet almost any project requirements. So the creation of the calendar started.
With the calendar, you can create several types of date markup options with several possibilities of marking at the same time.
You can restrict the visual segment to a minimum and maximum values, as well as turn off the use of certain dates depending on the transmitted values.
There is also a possibility to disable the use of the definite days of the week.
The entire look and functionality of the calendar are controlled by the props and APIs, which gives you the opportunity to have a free decision and organize your work according to your needs.
The whole list of prop-s։
sundayStart — Start week from Sunday.
newCurrentDate — Change current calendar date․
limits — Set limits for the visual part of the calendar․
placeholder — Modify the placeholder of the input․
dateFormat — Define date format․
isDatePicker — Enable date picker feature․
isDateRange — Enable date range feature
isMultiple — Set the multiplicity of the calendars․
calendarsCount — Set the number of calendars
isModal — Set the calendar to be modal․
isTypeable — Set the possibility of writing manually in input․
changeMonthFunction — Set the possibility of changing a month from the interface.
changeYearFunction — Set the possibility of changing a year from the interface.
applyStylesheet — Disable or Enable styles․
markedDates — The array of marked dates.
markedDateRange –Mark the range of the marked dates
disabledDayNames — Set the disabled days of the week.
disabledDates — Set the disabled dates․
dayNames — Set the names of the weekdays․
monthNames — Set the names of the months.
transition — Allow animation.
hiddenElements — Hide calendar particles (day, dates, arrows, right side and left side dates, month)
The whole list of Events
changedMonth — Works when the month is being changed.
changedYear — Works when the year is being changed.
selectedDaysCount — Returns the selected days count․
opened — Works when the modal of the calendar get opened․
closed — Works when the modal of the calendar get closed․
PreMonth — Call method implementation to go to the previous month
NextMonth — Call method implementation to go to next month
PreYear — Call method implementation to go to the previous year
NextYear — Call method implementation to go to next year
ChooseDate — Call method implementation to go to a custom date
Thank you for taking the time and reading this post.
Hopefully, I was able to help you with both the record and the package. New achievements to you and pleasant working days.