container which will hold the calendar.
Example :

Note! the div having id=”dycalendar-today” has a class dycalendar-container. This is the container
for the dyCalendar and a calendar will be drawn inside this div. We also can add the class that
satisfy the skin and shadow for the calendar. We will cover that in later steps.
Step 4 :
Draw the calendar
To create a calendar use the draw() method of dycalendar. The draw method takes an object
consisting of configurations for the calendar. We have to create an object in the tags of the file where our calendar will be. To actually draw the calendar according to
our wish, we have to pass all the necessary and optional parameters when we create an object. The
example below show you how to do it.
In the following example we will create a “Day-Calendar” by setting up the following
configuration.
dycalendar.draw({
target : “dycalendar-today”
});
To create the month view calendar, we have to set the type configuration to month when we create
the object like the following example.
dycalendar.draw({
target : “dycalendar-today”,
type : “month”
});
Please note that the type configuration have the default value. If we don’t set the type
configuration, the default value is “day” which will create a day view calendar. There are several
parameters that you have to pass when you create an object. The table below show list of the
parameters that you can pass when create your object.
Following are the list of parameters that can be passed :Name Type Default
value
Description Example
target
(mandatory)
String Nun Hold the id of the container
where the calendar will be
drawn.
“#sample-calendar”
(Use the # symbol
for id).
type
(optional)
String “day” Type of the calendar being
created.
Possible values: “day”,
“month”
Type : “month”
month
(optional)
Integer Current
month
If set, will look for the
specified month. Possible
values:
0 = January
1 = February
11 = December
Month : 0
year
(optional)
Integer Current
year
If set, will look for the
specified year.
Year : 1990
Year : 1900 to 9999
date
(optional)
Integer Current
date
If set, will look for the
specified date. Possible
values: 1-31
Date : 21
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
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
If dayformat = “full”
then output is
“Sunday”.
If dayformat = “ddd”
then output is “Sun”.
highlighttoday
(optional)
Boolean False If set to true will highlight
the today’s date. Possible
values:
True, false
highlighttoday : true
highlighttargetdate
(optional)
Boolean False If set to true will highlight
the specified date.
Possible values:
True, false
highlighttargetdate :
true
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”
Prevnextbutton :
“show”Step 5 :
Use the CSS to style the calendar
Round Edge
To create round edge calendar use the class .round-edge.
Example :

Following are the list of available round-edge options. :
Name Class
Default .round-edge
Skin
After we have the container div we can apply different skins by putting the class .skin-{name}.
Example :

Following are the list of available skins options.
Name Class
Black .skin-black
Blue .skin-blue
Green .skin-green
Purple .skin-purple
Red .skin-red
Spacegray .skin-spacegraySkin Gradient
After applying different skins we can add the class .gradient to create background color gradient.
Example :

Following are the list of available skins options.
Name Class
Default .gradient
Black .skin-black .gradient
Blue .skin-blue .gradient
Green .skin-green .gradient
Purple .skin-purple .gradient
Red .skin-red .gradient
Spacegray .skin-spacegray .gradient
Shadow
We can add shadow to the calendar using the class .shadow-{option}.
Example :

Following are the list of available shadow options.
Name Class
Default .shadow-default
Black .shadow-black
Blue .shadow-blue
Green .shadow-green
Purple .shadow-purple
Red .shadow-red
Spacegray .shadow-spacegrayThanks for read this documentation and thanks for using this program. If you have any question, feel
free to contact me or the original developer of this program, Mr. Yusuf Shakeel by sending an E-mail
message to contactus@dyclassroom.com contactus@dyclassroom.com or visit his website at https://www.dyclassroom.com/. If you
wish to read the original documentation of this program, feel free to visit this page.
Please keep in mind that this is an open source project. So, feel free to use it in whatever way you like
and feel free to modified it according to your needs if you wish to do so.
Good luck and happy coding!

Download dycalendarjs-1.1.1 from blindhelp.net
visit blindhelp from here!