JavaScript in dyCalendarJS project.

Create a container

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".

<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.

Method

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.

Example

Today calendar (default skin)

HTML

<div id="dycalendar-today" class="dycalendar-container"></div>

JavaScript

//today calendar
dycalendar.draw({
     target: '#dycalendar-today'
});

Output

Month calendar (default skin)

HTML

<div id="dycalendar-month" class="dycalendar-container"></div>

JavaScript

//month calendar
dycalendar.draw({
     target: '#dycalendar-month',
     type: 'month'
});

Output

Day calendar (21st October 1990) (skin-blue shadow-default)

HTML

<div id="dycalendar-day-with-skin-shadow" class="dycalendar-container skin-blue shadow-default"></div>

JavaScript

//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
});

Output

Month calendar (21st October 1990) (skin-green shadow-default)

HTML

<div id="dycalendar-month-with-skin-shadow" class="dycalendar-container skin-green shadow-default"></div>

JavaScript

//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
});

Output

Month calendar with prev-next-button (skin-purple shadow-default)

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.

HTML

<div id="dycalendar-prev-next-button-with-skin-shadow" class="dycalendar-container skin-purple shadow-default"></div>

JavaScript

//month calendar - with skin and shadow
dycalendar.draw({
     target: '#dycalendar-prev-next-button-with-skin-shadow',
     type: 'month',
     prevnextbutton : "show"
});

Output