Show events with action in Zabuto Calendar

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

What Will I Learn?

  • Show events data to calendar
  • Add action when specific date clicked
  • Mark today date

Requirements

Difficulty

  • Basic

Tutorial Contents

Starting project

Before we begin, this is the starting project for our tutorial. You should check this add basic calendar tutorial first before continue to this tutorial.

  1. Project directory
    Screenshot (41).png
  2. Code in index.html 
    <!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: 'en'
                });
            });
        </script>
    </body>
</html>
  3. Browser output
    Screenshot (42).png
Events data property

In previous tutorial, we can change the language by passing an object to zabuto_calendar() initialize function. The object property is language and the value is string of the language code, example id (Indonesian) and en (English). For showing events data, we must set the data as property and the value is array of objects.

Array of objects

Many beginner got confuse of this. Array of objects is simply an normal array, but the elements are an object instead of string or integer. For example:

  1. This is an array of integers 
    var days = [4, 5, 6];
  2. This is an object 
    var person = {
    name: 'john',
    age: 12
};
  3. This is an array of objects 
    var people = [
    {
        'name': 'tony',
        'age': 24
    },
    {
        'name': 'angel',
        'age': 23
    },
    {
        'name': 'paul',
        'age': 37
    }
];
Array of objects property

Here are the single object property for each data array:

  1. date: set the date for event
  2. badge: mark important event
  3. title: appear when hovering to specific date
{
    'date': '2018-01-14',
    'badge': true
    'title': 'Meeting with John'
}
Add data to our calendar
  1. Edit index.html and insert the data array of objects. 
    <script>
    $(document).ready(function () {
        $('#calendar').zabuto_calendar({
            language: 'en',
            data: [
                {
                    'date': '2018-01-11',
                    'badge': true,
                    'title': 'Meeting with John'
                },
                {
                    'date': '2018-01-13',
                    'badge': false,
                    'title': 'Go to market'
                }
            ]
        });
    });
</script>
  2. Open index.html and it will display our events with light orange color. There will be extra dot mark with more solid orange color if the badge set to true. Try hovering to one of the event, and it will show the event title.
    printscreen.png
Add action onclick
  1. To add onclick action, we can add action property as function. Inside this function we can get the selected date and do any action. For example, we will alert our selected date. 
    <script>
    $(document).ready(function () {
        $('#calendar').zabuto_calendar({
            language: 'en',
            data: [
                {
                    'date': '2018-01-11',
                    'badge': true,
                    'title': 'Meeting with John'
                },
                {
                    'date': '2018-01-13',
                    'badge': false,
                    'title': 'Go to market'
                }
            ],
            action: function () {
                //get the selected date
                var date = $('#' + this.id).data('date');
                //alert the date
                alert('You clicked date: ' + date);
            }
        });
    });
</script>
  2. Refresh index.html and try to click any date. It should display an alert popup.
    Screenshot (44).png
Mark today date

Add today property and set the value to true, so today date will be marked as blue dot.

Final index.html output

Screenshot (45).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: 'en',
                    data: [
                        {
                            'date': '2018-01-11',
                            'badge': true,
                            'title': 'Meeting with John'
                        },
                        {
                            'date': '2018-01-13',
                            'badge': false,
                            'title': 'Go to market'
                        }
                    ],
                    action: function () {
                        //get the selected date
                        var date = $('#' + this.id).data('date');
                        //alert the date
                        alert('You clicked date: ' + date);
                    },
                    today: true
                });
            });
        </script>
    </body>
</html>

Curriculum


Posted on Utopian.io - Rewarding Open Source Contributors

#tutorials #web #calendar
7 years ago in #utopian-io by
$23.71
  • Past Payouts $23.71, 0.00 TRX
  • - Author $16.45, 0.00 TRX
  • - Curators $7.27, 0.00 TRX
10 votes
Reply 5
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!
      • Seems like you contribute quite often. AMAZING!

      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

        Coin Marketplace

        STEEM 0.16
        TRX 0.13
        JST 0.027
        BTC 59056.49
        ETH 2597.22
        USDT 1.00
        SBD 2.44