Add calendar to your site using Zabuto Calendar

What Will I Learn?

Adding calendar to your site
Change the calendar language
Adjust the calendar size

Requirements

Internet connection
Browser
Text editor

Difficulty

Basic

Tutorial Contents

Download the library

Before we begin, you can download the library from GitHub:

Open https://github.com/zabuto/calendar
Click Clone or download green button, it will open pop up.
Click Download ZIP
After you finished the download, extract the .zip file.

Create project directory

We will begin with making empty directory for our project. After this, you need to copy two file from extracted .zip from previous step to this empty directory. Those file are zabuto_calendar.min.css and zabuto_calendar.min.js.
Screenshot (12) - Copy.png

Create HTML and load required library

Before we load and use Zabuto Calendar library, we need to include another library that required for it to function properly. As seen in the GitHub, we need to include jQuery and Bootstrap, we will load this extra library using CDN.

Create new .html file in our project directory, example index.html

Open index.html using your favorite text editor and write basic html layout along with loading our required library which is jQuery, Bootstrap, and Zabuto Calendar. Always remember, required library should placed on top of library that depends on it.

<!DOCTYPE html>
<html>
    <head>
        <title>Zabuto Calendar</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="zabuto_calendar.min.css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello World</h1>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="zabuto_calendar.min.js"></script>
    </body>
</html>

Open index.html using your browser and check the console to see if there is any error. If there is no error, we can continue to next step.

Using the calendar

Add one div right below our h1 and give some id to that div. Example:
```
<div id="calendar"></div>
```

To initialize the calendar, add this code below our zabuto_calendar.min.js or before the closing body.

<script>
    $(document).ready(function () {
        $('#calendar').zabuto_calendar();
    });
</script>

Refresh index.html on your browser and it should display the calendar.
The default language is english. We can change the language by passing an object to initialize function. Here is the list of available language (ar, az, cn, cs, de, en, es, fi, fr, he, hu, id, it, jp, kr, nl, no, pl, pt, ru, se, sk, tr, ua). For example, I will change the language to indonesian.
```
<script>
    $(document).ready(function () {
        $('#calendar').zabuto_calendar({
            language: 'id'
        });
    });
</script>
```
Refresh index.html on your browser and the language changed to indonesian.

Calendar size

We can adjust the calendar size by giving our calendar div fixed width. Here I set my div to 500px width and center it.

<div id="calendar" style="width: 500px; margin: 0 auto;"></div>

Final looks

Screenshot (39).png

Final index.html code

<!DOCTYPE html>
<html>
    <head>
        <title>Zabuto Calendar</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="zabuto_calendar.min.css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello World</h1>
        <div id="calendar" style="width: 500px; margin: 0 auto;"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="zabuto_calendar.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#calendar').zabuto_calendar({
                    language: 'id'
                });
            });
        </script>
    </body>
</html>

Posted on Utopian.io - Rewarding Open Source Contributors