Calendar-Challenge/index.html at master · sansagara/Calendar-Challenge · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leonel Calendar Challenge</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/index.css"/>
  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" href="css/sweetalert.css">
  <script src="js/calendar.js"></script>
  <script src="js/d3.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/moment.js"></script>
  <script src="js/transition.js"></script>
  <script src="js/collapse.js"></script>
  <script src="js/bootstrap-datetimepicker.js"></script>
  <script src="js/sweetalert.min.js"></script>
  <script src="js/index.js"></script>
</head>
<body>

<div class="container">

        <h1>Create calendar</h1>
        <hr>

        <div class="row">
            <div class="col-md-7">

                <form id="createTables">
                    <div class="form-group">
                        <label for="date">Start Date</label>
                        <div class='input-group date' id='datetimepicker1'>
	                        <input type="text" id="date" class="form-control" required="required" pattern="\d{4}-\d{2}-\d{2}">
	                        <span class="input-group-addon">
	                        	<span class="glyphicon glyphicon-calendar"></span>
	                    	</span>
	                    </div>
                    </div>

                    <script type="text/javascript">
			            $(function () {
			                $('#datetimepicker1').datetimepicker({
			                	allowInputToggle: true,
			                	format: 'YYYY-MM-DD'
			                });
			            });
			        </script>

                    <div class="form-group">
                        <label for="days">Number of Days</label>
                        <input type="number" id="days" class="form-control" required="required" min="1">
                    </div>

                    <div class="form-group">
                        <label for="country">Country Code</label>
                        <input type="text" id="country" class="form-control"  pattern="[A-Z]{2}" required="required" title="Country code must be 2 uppercase chars">
                    </div>

                    <button type="submit" class="btn btn-primary"> Generate Calendars</button>
                </form>

            </div>

        </div>


    <hr>
	<table id="calendar"></table>

</div>

<script>
 $('#createTables').submit(function(e){
 	//prevent default submit.
 	e.preventDefault();
 	//empty the div ()
 	$("#calendar").empty();

 	//get values from inputs.
 	var date = $('#date').val().split("-");;
	var days = $('#days').val();
	var country = $('#country').val();

	//Hardcoded an array of valid country codes on holidayapi.com as of June, 2016
	var allowedCountries = ["BE", "BG", "BR", "CA", "CZ", "DE", "ES", "FR", "GB", "GT", "HR", "HU", "ID", "IN", "IT", "NL", "NO", "PL", "PR", "RU", "SI", "SK", "US"];
	if ($.inArray(country, allowedCountries) < 0) {
		//alert("Country code not supported by holidayapi. Holidays will not be displayed!");
		//swal is a nice alert library.
		swal({
			title: "Country not supported",
			text: "The country you entered is not supported on holidayapi service!. Do you want to render it anyway?",
			type: "warning",
			showCancelButton: true,
			confirmButtonColor: "#DD6B55",
			confirmButtonText: "Render without holidays",
			closeOnConfirm: false
		}, function(){
			//Alert the user that calendars will not have holidays rendered.
			//swal("Rendering!", "Showing the calendars without holidays.", "success");
			swal({   title: "Rendering!",   text: "Showing the calendars without holidays.",   timer: 2000,   showConfirmButton: false });
			showCalendars(new Date(date[0], date[1] - 1, date[2]), days, country);
		});
	} else {
		//No problem, show calendars!
		showCalendars(new Date(date[0], date[1] - 1, date[2]), days, country);
	}

});


//Uppercase country codes.
$("#country").bind('keyup', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    $("#country").val(($("#country").val()).toUpperCase());
});

</script>

</body>
</html>