IntroductionCSSJavaScript

JavaScript

dyCalendarJS

← Prev

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.

NameTypeDefaultDescription
target
(mandatory)		StringThis will hold the id of the container where the calendar will be drawn.
Example:
"#sample-calendar".
Use the # symbol for id.
type
(optional)		String"day"Type of the calendar being created.
Possible values:
"day"
"month"
month
(optional)		IntegerCurrent monthIf set, will look for the specified month.
Possible values:
0 = January
1 = February
...
11 = December
year
(optional)		IntegerCurrent yearIf set, will look for the specified year.
Example:
1990
Range:
1900 to 9999
date
(optional)		IntegerCurrent dateIf set, will look for the specified date.
Example:
21
Possible values:
1-31
monthformat
(optional)		String"full"Whether to display the full name of the month or in short form.
Possible values:
"mmm" = short form
"full" = complete name
Example:
If its October.
And if monthformat = "full" then output is "October".
If monthformat = "mmm" then output is "Oct".
dayformat
(optional)		String"full"Whether to display the full name of the day or in short form.
Possible values:
"ddd" = short form
"full" = complete name
Example:
If its Sunday.
If dayformat = "full" then output is "Sunday".
If dayformat = "ddd" then output is "Sun".
highlighttoday
(optional)		BooleanfalseIf set to true will highlight the today's date.
Possible values:
true
false
highlighttargetdate
(optional)		BooleanfalseIf set to true will highlight the specified date.
Possible values:
true
false
prevnextbutton
(optional)		String"hide"If set to "show" will show the prev and next symbol and allow the user to move to previous and next month and jump back to the current month.
Possible values:
"show"
"hide"

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

← Prev