Calendalha

Simple Really Customizable Calendar

Getting Started

Prerequisites

This library requires jquery and 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>

<!-- Jquery and Moment.js are required -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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