dyCalendarJS
JavaScript in dyCalendarJS project.
First create a container and give it an id of your choice. This id will be used to create a calendar inside the container.
Following is a container having id="dycalendar-month-with-skin".
id="dycalendar-month-with-skin"
<div id="dycalendar-month-with-skin" class="dycalendar-container skin-red"></div>
Now we have the container for the calendar we are now ready to use the dycalendar.draw({...}) to create a calendar based on the configuration passed to it.
dycalendar.draw({...})
This method is used to create the calendar based on the configuration passed to it.
Following are the list of parameters that can be passed.
HTML
<div id="dycalendar-today" class="dycalendar-container"></div>
JavaScript
//today calendar dycalendar.draw({ target: '#dycalendar-today' });
Output
<div id="dycalendar-month" class="dycalendar-container"></div>
//month calendar dycalendar.draw({ target: '#dycalendar-month', type: 'month' });
<div id="dycalendar-day-with-skin-shadow" class="dycalendar-container skin-blue shadow-default"></div>
//day calendar - with skin and shadow dycalendar.draw({ target: '#dycalendar-day-with-skin-shadow', type: 'day', dayformat: "ddd", monthformat: "mmm", date : 21, month : 9, //0 = Jan, 1 = Feb, ..., 9 = October, ..., 11 = December year : 1990 });
<div id="dycalendar-month-with-skin-shadow" class="dycalendar-container skin-green shadow-default"></div>
//month calendar - with skin and shadow dycalendar.draw({ target: '#dycalendar-month-with-skin-shadow', type: 'month', month: 9, year: 1990, date: 21, monthformat: "full", highlighttargetdate : true });
Hints! Move to previous and next month calendar by using the prev < and next > button and to jump back to the current month calendar click on the month name.
<div id="dycalendar-prev-next-button-with-skin-shadow" class="dycalendar-container skin-purple shadow-default"></div>
//month calendar - with skin and shadow dycalendar.draw({ target: '#dycalendar-prev-next-button-with-skin-shadow', type: 'month', prevnextbutton : "show" });