Ceylon-Trek/calendar.php at master · Tour-Guide-Project/Ceylon-Trek · 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
129
130
131

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Travel Calendar-Ceylon Trek</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/calendar.css">
    <link rel="stylesheet" href="css/top_bar.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body onload="renderDate()" style="background-image: url('img/ct8.jpg'); background-size:cover;background-position: center center;background-attachment: fixed; background-repeat:no-repeat;">
    <?php include('inc/top_bar.php'); ?>

    <div class="wrapper">
        <div class="calendar">
            <div class="month">
                <i class="fa fa-caret-left  fa-3x" class="prev"  onclick="moveDate('prev')" aria-hidden="true"></i>
                <div class="date">
                    <h1 ></h1>
                    <p ></p>
                </div>

                <i class="fa fa-caret-right fa-3x" class="next" onclick="moveDate('next')" aria-hidden="true"></i>

            </div>
            <div class="weekdays">
                <div>Sun</div>
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
            </div>
            <div class="days">

            </div>
        </div>
    </div>
    <script>
        //get date =>get the date
        //get day => get the index of the day
        var dt = new Date();//create Date object as date

        function renderDate() {
            dt.setDate(1);

            const firstDayIndex = dt.getDay();//create variable for index of the first day of the month friday=5(index)
            const today = new Date();

            const endDate = new Date(
                dt.getFullYear(),
                dt.getMonth() + 1,
                0
            ).getDate();//create lastday of the current month

            const prevLastDate = new Date(
                dt.getFullYear(),
                dt.getMonth(),
                0
            ).getDate();//create previous lastday variable of previos month

            const lastDayIndex = new Date(
                dt.getFullYear(),
                dt.getMonth() + 1,
                0
            ).getDay();//Index of the lastday of the current month

            const nextDays = 7 - lastDayIndex - 1;

            const months = [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            ]
            document.querySelector(".date h1").innerHTML = months[dt.getMonth()];//create month

            document.querySelector(".date p").innerHTML = dt.toDateString();// create first date of the month with year

            let days = "";

            for (let x = firstDayIndex; x > 0; x--) {
                days += "<div class='prev_date'>" + (prevLastDate - x + 1) + "</div>";
            }//create previos days of the month

            for (let i = 1; i <= endDate; i++) {
                //check the current month is equal to the month in p tag
                if (i == today.getDate() && dt.getMonth() == today.getMonth() && dt.getFullYear() == today.getFullYear()){
                    days += "<div class='today'>" + i + "</div>";
                }
                else
                    days += "<div>" + i + "</div>";
            }//create days of the each month

            for (let j = 1; j <= nextDays; j++)
            {
              days += "<div class='next_date'>"+ j + "</div>";
            }//create next dates of the month


            document.getElementsByClassName("days")[0].innerHTML = days;//print days

        }

        function moveDate(para) {
            if(para == "prev") {
                dt.setMonth(dt.getMonth() - 1);//create previos monthes
            } else if(para == 'next') {
                dt.setMonth(dt.getMonth() + 1);//create next monthes
            }
            renderDate();
        }
    </script>

<?php include('inc/footer.php'); ?>
</body>

</html>