CSS

dyCalendarJS

CSS used in dyCalendarJS project.

Container

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>

Round Edge

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.

NameClassSample
default.round-edge
21

Skin

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.

NameClassSample
black.skin-black
21
blue.skin-blue
21
green.skin-green
21
purple.skin-purple
21
red.skin-red
21
spacegray.skin-spacegray
21

Skin Gradient

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.

NameClassSample
defaultJust 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

Shadow

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.

NameClassSample
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