Add calendar to your site using Zabuto Calendar

in #utopian-io • 7 years ago (edited)

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:

  1. Open https://github.com/zabuto/calendar
  2. Click Clone or download green button, it will open pop up.
  3. Click Download ZIP
    Screenshot (11) - Copy.png
  4. 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.

  1. Create new .html file in our project directory, example index.html
    Screenshot (13) - Copy.png
  2. 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>
  3. 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.
    Screenshot (36).png
Using the calendar
  1. Add one div right below our h1 and give some id to that div. Example: 
    <div id="calendar"></div>
  2. 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>
  3. Refresh index.html on your browser and it should display the calendar.
    Screenshot (37).png
  4. 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>
  5. Refresh index.html on your browser and the language changed to indonesian.
    Screenshot (38).png
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

#tutorials #web #calendar
7 years ago in #utopian-io by
$31.16
  • Past Payouts $31.16
  • - Author $21.84
  • - Curators $9.32
11 votes
Reply 3
Sort:  
  • Trending
    • [-]
     7 years ago 

    Thank you for the contribution. It has been approved.

    You can contact us on Discord.
    [utopian-moderator]

    $0.00
      Reply
      [-]
       7 years ago 

      Hey @mytosin I am @utopian-io. I have just upvoted you!

      Achievements

      • You have less than 500 followers. Just gave you a gift to help you succeed!
      • This is your first accepted contribution here in Utopian. Welcome!

      Suggestions

      • Contribute more often to get higher and higher rewards. I wish to see you often!
      • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

      Get Noticed!

      • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

      Community-Driven Witness!

      I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

      mooncryption-utopian-witness-gif

      Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

      $0.00
        Reply