A flexible and useful calendar control Kalendae

Kalendae is a pure JS does not rely on any JS Library Calendar control, can easily achieve the display of the number of months, currently selected multiple dates, and can be in accordance with the week and other formats you want to customize the selected items.

: Github/kalendae

First step: Kalendae reference

Need to reference style files before use kalendae.css and JS files kalendae.standalone.js

<link href=". /app_common/kalendae/build/kalendae.css "rel="stylesheet" type="  text/css" /> <script src=". /app_common/kalendae/build/kalendae.standalone.js" type="text/javascript "></script>

Step Two: No container (control) is specified to load Kalendae

varArrdate = $ ("#FACE_COURSE_TIME"). Val (). Split (","); Kal=NewKalendae ($ ("#SelectCourseDate")[0], {months:2, Mode:' Single', subscribe: {" Change": function () {$ ("#SKDate input[type= ' radio '][value= ' {0} ']". Format (kal.getselected ())). attr ("checked",true); }}, Blackout:function (date) {varEqual =false;  for(vari =0; i < arrdate.length; i++) {                     if(Kalendae.moment (date). Format ("YYYY-MM-DD") ==arrdate[i]) equal=true; }                 //determine whether to disable                 if(!equal)return true; }         });

or load the Calendar control directly using CSS

class="auto-kal"></div>

Parameter settings

class="auto-kal" data-kal="months:3, Direction: ' Future ' "></div>

Create a Load Calendar control using JQ

$ (selector). Data ('Kalendae')

Step three: Use parameter descriptions

Attachto: Loads the Calendar control into its container;

Mode: Control selection mode, "single" Individual date selection, "multiple" Multiple date selection, "range" Select Date range.

A flexible and useful calendar control Kalendae