Simple Really Customizable Calendar
This library requires moment.js
The installation is pretty strait forward just import the calendalha.js into your code and call the function calendalha passing your div id.
<!-- This example includes a optional css file with the default style -->
<link rel="stylesheet" href="/path/to/calendalha.css"/>
<!-- div where calendar will render -->
<div class="calendalha"></div>
<!-- Moment.js is required -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
<!-- Calendalha script -->
<script src="/path/to/calendalha.js"></script>
<script>
$(document).ready(function(){
calendalha('.calendalha')
})
</script>
Position of the days in the calendar {center,left,right}
Example:
calendalha('.calendalha',{
textAlign:'center'
})
Function called when user clicks in a day cell
Example:
calendalha('.calendalha',{
onDayClick:function(date){
console.log(date);
}
})
Function called when user changes month
Example:
calendalha('.calendalha',{
onMonthChange:function(month,year){
alert("Month:"+month+" Year: "+year)
}
})
Localizations of calendar based in moment locale, imports from project if already set
Example:
calendalha('.calendalha',{
locale:'pt-br'
})
Initial date of the calendar "YYYY-MM-DD"
Example:
calendalha('.calendalha',{
initDate:'2019-05-01'
})
Marcked dates of the calendar (marked dates receive "marked" class)
Example:
calendalha('.calendalha',{
markedDates:["2019-05-23","2019-04-22",2017-12-08]
})
initDate receives active status (class "active")
Example:
calendalha('.calendalha',{
initDayActive:true
})
Function to create a custom html of the table cell
Example:
calendalha('.calendalha',{
renderCustomDay:function(item,date){
console.log(date) // moment object with item date
console.log(item) // day number string
return `<i>${item}</i>`
}
})
Vertical aligment of the content inside the table cell
Example:
calendalha('.calendalha',{
celVAlign:'top'
})
Custom html to the left arrow
Example:
calendalha('.calendalha',{
custLeftArrow:'←'
})
Custom html to the right arrow
Example:
calendalha('.calendalha',{
custRightArrow:'→'
})
Week day name display format, based in moment.js format
Example:
calendalha('.calendalha',{
weekFormat:'ddd'
})
Month name display format, based in moment.js format
Example:
calendalha('.calendalha',{
monthFormat:'MMM'
})
- Inicial build
This project is licensed under the MIT License