CSS

dyCalendarJS

Share

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.

Name Class Sample
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>

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

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.

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

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>

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
Share

Recently Added