Skip to content

lucashe1997/calendalha

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Calendalha @lucashe1997

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