https://uinssc.ac.id/assets/js/plugins/calender.js

1
2
3var datepicker =  document.querySelectorAll("#calender-active");
4
5if(datepicker.length){
6
7
8    function generate_year_range(start, end) {
9        var years = "";
10        for (var year = start; year <= end; year++) {
11            years += "<option value='" + year + "'>" + year + "</option>";
12        }
13        return years;
14    }
15    
16    today = new Date();
17    currentMonth = today.getMonth();
18    currentYear = today.getFullYear();
19    selectYear = document.getElementById("year");
20    selectMonth = document.getElementById("month");
21    
22    
23    createYear = generate_year_range(1970, 2050);
24    /** or
25     * createYear = generate_year_range( 1970, currentYear );
26     */
27    
28    document.getElementById("year").innerHTML = createYear;
29    
30    var calendar = document.getElementById("calendar");
31    var lang = calendar.getAttribute('data-lang');
32    
33    var months = "";
34    var days = "";
35    
36    var monthDefault = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
37    
38    var dayDefault = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
39    
40    if (lang == "en") {
41        months = monthDefault;
42        days = dayDefault;
43    } else if (lang == "id") {
44        months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
45        days = ["Ming", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
46    } else if (lang == "fr") {
47        months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
48        days = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
49    } else {
50        months = monthDefault;
51        days = dayDefault;
52    }
53    
54    
55    var $dataHead = "<tr>";
56    for (dhead in days) {
57        $dataHead += "<th data-days='" + days[dhead] + "'>" + days[dhead] + "</th>";
58    }
59    $dataHead += "</tr>";
60    
61    // alert($dataHead);
62    document.getElementById("thead-month").innerHTML = $dataHead;
63    
64    
65    monthAndYear = document.getElementById("monthAndYear");
66    showCalendar(currentMonth, currentYear);
67    
68    
69    
70    function next() {
71        currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
72        currentMonth = (currentMonth + 1) % 12;
73        showCalendar(currentMonth, currentYear);
74    }
75    
76    function previous() {
77        currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
78        currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
79        showCalendar(currentMonth, currentYear);
80    }
81    
82    function jump() {
83        currentYear = parseInt(selectYear.value);
84        currentMonth = parseInt(selectMonth.value);
85        showCalendar(currentMonth, currentYear);
86    }
87    
88    function showCalendar(month, year) {
89    
90        var firstDay = ( new Date( year, month ) ).getDay();
91    
92        tbl = document.getElementById("calendar-body");
93    
94        
95        tbl.innerHTML = "";
96    
97        
98        // monthAndYear.innerHTML = months[month] + " " + year;
99        selectYear.value = year;
100        selectMonth.value = month;
101    
102        // creating all cells
103        var date = 1;
104        for ( var i = 0; i < 6; i++ ) {
105            
106            var row = document.createElement("tr");
107    
108            
109            for ( var j = 0; j < 7; j++ ) {
110                if ( i === 0 && j < firstDay ) {
111                    cell = document.createElement( "td" );
112                    cellText = document.createTextNode("");
113                    cell.appendChild(cellText);
114                    row.appendChild(cell);
115                } else if (date > daysInMonth(month, year)) {
116                    break;
117                } else {
118                    cell = document.createElement("td");
119                    cell.setAttribute("data-date", date);
120                    cell.setAttribute("data-month", month + 1);
121                    cell.setAttribute("data-year", year);
122                    cell.setAttribute("data-month_name", months[month]);
123                    cell.className = "date-picker";
124                    cell.innerHTML = "<span>" + date + "</span>";
125    
126                    if ( date === today.getDate() && year === today.getFullYear() && month 

126=== today.getMonth() ) {
127                        cell.className = "date-picker selected";
128                    }
129                    row.appendChild(cell);
130                    date++;
131                }
132    
133    
134            }
135    
136            tbl.appendChild(row);
137        }
138    
139    }
140    
141    function daysInMonth(iMonth, iYear) {
142        return 32 - new Date(iYear, iMonth, 32).getDate();
143    }
144}
145
146
147
148
149
150
151