dyCalendarJS

Project

Share
dyCalendarJS logo

dyCalendarJS is a small library to create calendar for your blog and website.

license npm version

Become a Patron

If you find this project useful then feel free to back it. I'm on Patreon

Become a Patron!

Feeling generous

Buy me a cup of tea Donate via PayPal


This documentation is for v1.x of dyCalendarJS project.

Contents

License

It's free and released under MIT License.

Watch the YouTube tutorial video.


Demo

In the following example we are creating a month calendar using dyCalendarJS.

In the following example we are creating current day calendar using dyCalendarJS.

Getting started

You can start using this plugin in your project in any of the following ways.

Starter template

In the following example we have a starter template to create a current month calendar.

<!DOCTYPE html>
<html>
  <head>
    <title>Index Page</title>
    <!-- dyCalendarJS CSS File -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dycalendarjs@1.2.1/css/dycalendar.min.css" integrity="sha256-FPzAdciveg2PwCOWcFUzn2MxOHFIiE07p5T9Bz2OXHo=" crossorigin="anonymous">
  </head>
  <body>

    <!-- put your content here -->

    <!-- sample calendar -->
    <div id="sample-calendar" class="dycalendar-container"></div>

    <!-- dyCalendarJS JavaScript File -->
    <script src="https://cdn.jsdelivr.net/npm/dycalendarjs@1.2.1/js/dycalendar.min.js" integrity="sha256-VCMmrjRA+GzGwBJKqFPgV1cui7qeTlnw1HCCCQTOGPU=" crossorigin="anonymous"></script>

    <!-- init dyscrollup -->
    <script>
    dycalendar.draw({
      target: '#sample-calendar',
      type: 'month'
    });
    </script>
  </body>
</html>

The css directory

First import the dycalendar.min.css stylesheet file in the head tag. This is used to style the calendar. You will find the stylesheets inside the css directory.

<link rel="stylesheet" href="path/to/dycalendar.min.css" />

The js directory

dyCalendarJS comes with two version of JavaScript files inside the js directory.

There is a dycalendar.min.js vanilla JavaScript file.

And there is a dycalendar-jquery.min.js JavaScript file which is dependent on jQuery version 1.12 or above.

<script src="path/to/dycalendar.min.js"></script>

Note! If you are using the dycalendar-jquery.min.js file then, first include jQuery.

Creating a sample calendar

To create a month calendar we first have to create a container div having .dycalendar-container class.

<div id="sample-calendar" class="dycalendar-container"></div>

Next, we call the draw() method and pass the configuration to create the calendar.

dycalendar.draw({
  target: '#sample-calendar',
  type: 'month'
});

Where, target holds the id of the calendar container.

And, type define the calender type. In the above example it is of type month.


CSS

Let's explore the different classes we can use to create calendar.

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>

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

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

JavaScript

To create the calendar all we have to do is call the draw() method and pass some configurations.

The draw method

Following are the list of properties that can be used.

Name Type Default Description
target
(mandatory)
String This will hold the id of the container where the calendar will be drawn.
Example:
"#sample-calendar"
Use the # symbol for id.
type
(optional)
String "day" Type of the calendar being created.
Possible values:
"day"
"month"
month
(optional)
Integer Current month If set, will look for the specified month.
Example:
9 for October
Possible values:
0 = January
1 = February
...
11 = December
year
(optional)
Integer Current year If set, will look for the specified year.
Example:
1990
Range:
1900 to 9999
date
(optional)
Integer Current date If set, will look for the specified date.
Example:
21
Possible values:
1-31
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
Example:
If its October.
And 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
Example:
If its Sunday.
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
highlighttargetdate
(optional)
Boolean false If set to true will highlight the specified date.
Possible values:
true
false
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"
Share