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