Simple Really Customizable Calendar
Getting Started
Prerequisites
This library requires moment.js
Installation
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>
Options
textAlign (string)
Position of the days in the calendar {center,left,right}
Example:
calendalha('.calendalha',{
textAlign:'center'
})
onDayClick (function)
Function called when user clicks in a day cell
Example:
calendalha('.calendalha',{
onDayClick:function(date){
console.log(date);
}
})
onMonthChange (function)
Function called when user changes month
Example:
calendalha('.calendalha',{
onMonthChange:function(month,year){
alert("Month:"+month+" Year: "+year)
}
})
locale (string)
Localizations of calendar based in moment locale, imports from project if already set
Example:
calendalha('.calendalha',{
locale:'pt-br'
})
initDate (string)
Initial date of the calendar "YYYY-MM-DD"
Example:
calendalha('.calendalha',{
initDate:'2019-05-01'
})
markedDates (array)
Marcked dates of the calendar (marked dates receive "marked" class)
Example:
calendalha('.calendalha',{
markedDates:["2019-05-23","2019-04-22",2017-12-08]
})
initDayActive (boolean)
initDate receives active status (class "active")
Example:
calendalha('.calendalha',{
initDayActive:true
})
renderCustomDay (function)
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>`
}
})
celVAlign (string)
Vertical aligment of the content inside the table cell
Example:
calendalha('.calendalha',{
celVAlign:'top'
})
custLeftArrow (string)
Custom html to the left arrow
Example:
calendalha('.calendalha',{
custLeftArrow:'←'
})
custRightArrow (string)
Custom html to the right arrow
Example:
calendalha('.calendalha',{
custRightArrow:'→'
})
weekFormat (string)
Week day name display format, based in moment.js format
Example:
calendalha('.calendalha',{
weekFormat:'ddd'
})
monthFormat (string)
Month name display format, based in moment.js format
Example:
calendalha('.calendalha',{
monthFormat:'MMM'
})
Version
v1.0 (03-06-2019)
- Inicial build
License
This project is licensed under the MIT License