dyCalendarJS
CSS used in dyCalendarJS project.
We first need to create a container which will hold the calendar. For this we use the class .dycalendar-container
.
<div id="sample-calendar" class="dycalendar-container"></div>
To create round edge calendar use the class .round-edge
.
Example
<div id="sample-calendar" class="dycalendar-container skin-blue round-edge"></div>
Following are the list of available round-edge options.
Name | Class | Sample |
---|---|---|
default | .round-edge | 21 |
After we have the container div we can apply different skins by putting the class .skin-{name}
.
Example
<div id="sample-calendar" class="dycalendar-container skin-blue"></div>
<!--Sample output
-->Following are the list of available skins options.
Name | Class | Sample |
---|---|---|
black | .skin-black | 21 |
blue | .skin-blue | 21 |
green | .skin-green | 21 |
purple | .skin-purple | 21 |
red | .skin-red | 21 |
spacegray | .skin-spacegray | 21 |
After applying different skins we can add the class .gradient
to create background color gradient.
Example
<div id="sample-calendar" class="dycalendar-container skin-blue gradient"></div>
Following are the list of available skins options.
Name | Class | Sample |
---|---|---|
default | Just use the class .gradient | 21 |
black | .skin-black .gradient | 21 |
blue | .skin-blue .gradient | 21 |
green | .skin-green .gradient | 21 |
purple | .skin-purple .gradient | 21 |
red | .skin-red .gradient | 21 |
spacegray | .skin-spacegray .gradient | 21 |
We can add shadow to the calendar using the class .shadow-{option}
.
Example
<div id="sample-calendar" class="dycalendar-container skin-green shadow-default"></div>
<!--Sample output
-->Following are the list of available shadow options.
Name | Class | Sample |
---|---|---|
default | .shadow-default | 21 |
black | .shadow-black | 21 |
blue | .shadow-blue | 21 |
green | .shadow-green | 21 |
purple | .shadow-purple | 21 |
red | .shadow-red | 21 |
spacegray | .shadow-spacegray | 21 |
ADVERTISEMENT