Create a calendar for your blog and website using dyCalendarJS.

API Documentation

Welcome to the dyCalendarJS project documentation. This is an open source MIT Licensed project and you can use it in your blog and websites.

Following is a month calendar

You can switch between months using the previous and next button. To get back to the current month calendar click on the month name.

Let's get started...

Download

The project can be downloaded from its GitHub repository.

Usage

CSS file

First import the stylesheet dycalendar.css or the minified version dycalendar.min.css in the file where you want to use the calendar.

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

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

JS file

Two types of dyCalendarJS files are available. One is the plain JavaScript version dycalendar.min.js and the other one uses jQuery dycalendar-jquery.min.js.

Using the JavaScript version:

Import dycalendar.js file using the script tag in the file where you want to use the calendar. (Preferred: At the end of the body tag.)

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

To use the minified version import dycalender.min.js file.

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

For example, if you are going to use dyCalendarJS in the index.html file then it may look like the following.

<!DOCTYPE html>
<html>
    <head>
        <title>dyCalendarJS</title>
        <link href="css/dycalendar.min.css" rel="stylesheet" />
    </head>
    <body>

        <!-- javascript -->
        <script src="js/dycalendar.min.js"></script>
    </body>
</html>

Using the jQuery version:

In order to use the jQuery version of dyCalendarJS you have to first include the jQuery file and then dycalendar-jquery.min.js file.

Using the unminified version.

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

Using the minified version.

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

Example

<!DOCTYPE html>
<html>
    <head>
        <title>dyCalendarJS - jQuery</title>
        <link href="css/dycalendar.min.css" rel="stylesheet" />
    </head>
    <body>

        <!-- javascript -->
        <script src="js/jquery.min.js"></script>
        <script src="js/dycalendar-jquery.min.js"></script>
    </body>
</html>

Creating a calendar

HTML

First we have to create a <div> container which will hold the calendar.

Example

<div class="some-class">
    <h1>Today calendar (skin-black shadow-default)</h1>
    <div class="calendar-container">
        <div id="dycalendar-today-with-skin-shadow" class="dycalendar-container skin-purple shadow-default"></div>
    </div>
</div>

Note! the div having id="dycalendar-today-with-skin-shadow" has a class dycalendar-container. This is the container for the dyCalendar and a calendar will be drawn inside this div.

Next you will see the class="skin-purple". This is optional, and if set, defines the skin of the calendar. We will cover different skins in the dyCaledar Skin section.

And we have the class="shadow-default". This is optional, and if set, gives a shadow to the calendar.

JavaScript

To create a calendar use the draw() method of dycalendar.

dycalendar.draw({...});

The draw method takes an object consisting of configurations for the calendar.

In the following example we will create a "Day-Calendar" by setting up the following configuration.

//today calendar - with skin and shadow
dycalendar.draw({
     target: '#dycalendar-today-with-skin-shadow',
     type: 'day',
     dayformat: "full",
     monthformat: "full"
});

In the above configuration we are targetting an element having id="dycalendar-today-with-skin-shadow" inside which we will create a calendar.

The type is set to "day" meaning it is a "Day-Calendar". We can also create a month calendar which we will cover in the later part of this documentation.

The dayformat is set to "full" which means we will use the full name of the day like, "Sunday" and not a short form like "Sun".

The monthformat is set to "full" meaning the name of the month will be full like "October" and not in short form like "Oct".

Introduction