abhorredCalendar/Index.html at master · mithun-daa/abhorredCalendar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Abhored Calendar Demo</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <!-- !CSS -->
    <link href="styles/style.css" rel="stylesheet" />
    <link href="styles/abhoredCalendar.css" rel="stylesheet" type="text/css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/cupertino/jquery-ui.css"
        rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="menu">
        <button id="Themed" class="myButton">
            Themed</button>
        <button id="customcss" class="myButton">
            Custom CSS</button>
    </div>
    <div id="container">
    </div>
    <div id="jdialog">
        <div>
            This dialog is show from the callback. You clicked <span id="datepassed"></span>
            Your implementation goes here...
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.abhoredCalendar%20.js" type="text/javascript"></script>
    <script type="text/javascript">
        var isThemed = false;

        $(document).ready(function () {
            //jQuery inits
            $('#Themed').click(function () {
                isThemed = true;
                $('#container').empty().abhoredCalendar({ isThemed: true, addButtonClicked: addButtonCallback, monthChanged: doMonthChange, data: data });
            });

            $('#customcss').click(function () {
                isThemed = false;
                $('#container').empty().abhoredCalendar({ isThemed: false, addButtonClicked: addButtonCallback, monthChanged: doMonthChange, data: data });
            });

            $('#jdialog').dialog({
                autoOpen: false,
                modal: true
            });

            /*-------------------------------------------------------------------------------------
            ABHORRED CALENDAR INITs
            -------------------------------------------------------------------------------------*/
            //Hard coded data
            var data = { "1": "2", "5": "10", "17": "4" };

            //with CALLBACK function
            $('#container').abhoredCalendar({ addButtonClicked: addButtonCallback, monthChanged: doMonthChange, data: data });
            /*Default intitialization
            $('#container').abhoredCalendar();
            inline CALLBACK function
            $('#container').abhoredCalendar({ addButtonClicked: function () {
            alert('This is coming from the add button callback. You clicked: ' + $(this).attr('id'));
            }});*/
        });

        // PRIVATE METHODS
        function addButtonCallback() {
            $('#datepassed').html($(this).attr('id'));
            $('#jdialog').dialog('open');

        }

        function doMonthChange(date) {
            //Passing hard-code values for DEMO purposes
            //This is where an AJAX call would get the data
            //which will get passed to the calendar
            var data = { "2": "2", "4": "10", "7": "4" };
            $('#container').abhoredCalendar.setData(data);
        }
    </script>
</body>
</html>