1+ const isLeapYear = ( year ) => {
2+ return (
3+ ( year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0 ) ||
4+ ( year % 100 === 0 && year % 400 === 0 )
5+ ) ;
6+ } ;
7+ const getFebDays = ( year ) => {
8+ return isLeapYear ( year ) ? 29 : 28 ;
9+ } ;
10+ let calendar = document . querySelector ( '.calendar' ) ;
11+ const month_names = [
12+ 'January' ,
13+ 'February' ,
14+ 'March' ,
15+ 'April' ,
16+ 'May' ,
17+ 'June' ,
18+ 'July' ,
19+ 'August' ,
20+ 'September' ,
21+ 'October' ,
22+ 'November' ,
23+ 'December' ,
24+ ] ;
25+ let month_picker = document . querySelector ( '#month-picker' ) ;
26+ const dayTextFormate = document . querySelector ( '.day-text-formate' ) ;
27+ const timeFormate = document . querySelector ( '.time-formate' ) ;
28+ const dateFormate = document . querySelector ( '.date-formate' ) ;
29+
30+ month_picker . onclick = ( ) => {
31+ month_list . classList . remove ( 'hideonce' ) ;
32+ month_list . classList . remove ( 'hide' ) ;
33+ month_list . classList . add ( 'show' ) ;
34+ dayTextFormate . classList . remove ( 'showtime' ) ;
35+ dayTextFormate . classList . add ( 'hidetime' ) ;
36+ timeFormate . classList . remove ( 'showtime' ) ;
37+ timeFormate . classList . add ( 'hideTime' ) ;
38+ dateFormate . classList . remove ( 'showtime' ) ;
39+ dateFormate . classList . add ( 'hideTime' ) ;
40+ } ;
41+
42+ const generateCalendar = ( month , year ) => {
43+ let calendar_days = document . querySelector ( '.calendar-days' ) ;
44+ calendar_days . innerHTML = '' ;
45+ let calendar_header_year = document . querySelector ( '#year' ) ;
46+ let days_of_month = [
47+ 31 ,
48+ getFebDays ( year ) ,
49+ 31 ,
50+ 30 ,
51+ 31 ,
52+ 30 ,
53+ 31 ,
54+ 31 ,
55+ 30 ,
56+ 31 ,
57+ 30 ,
58+ 31 ,
59+ ] ;
60+
61+ let currentDate = new Date ( ) ;
62+
63+ month_picker . innerHTML = month_names [ month ] ;
64+
65+ calendar_header_year . innerHTML = year ;
66+
67+ let first_day = new Date ( year , month ) ;
68+
69+
70+ for ( let i = 0 ; i <= days_of_month [ month ] + first_day . getDay ( ) - 1 ; i ++ ) {
71+
72+ let day = document . createElement ( 'div' ) ;
73+
74+ if ( i >= first_day . getDay ( ) ) {
75+ day . innerHTML = i - first_day . getDay ( ) + 1 ;
76+
77+ if ( i - first_day . getDay ( ) + 1 === currentDate . getDate ( ) &&
78+ year === currentDate . getFullYear ( ) &&
79+ month === currentDate . getMonth ( )
80+ ) {
81+ day . classList . add ( 'current-date' ) ;
82+ }
83+ }
84+ calendar_days . appendChild ( day ) ;
85+ }
86+ } ;
87+
88+ let month_list = calendar . querySelector ( '.month-list' ) ;
89+ month_names . forEach ( ( e , index ) => {
90+ let month = document . createElement ( 'div' ) ;
91+ month . innerHTML = `<div>${ e } ;
92+
93+ month_list . append ( month ) ;
94+ month . onclick = ( ) => {
95+ currentMonth . value = index ;
96+ generateCalendar ( currentMonth . value , currentYear . value ) ;
97+ month_list . classList . replace ( 'show' , 'hide' ) ;
98+ dayTextFormate . classList . remove ( 'hideTime' ) ;
99+ dayTextFormate . classList . add ( 'showtime' ) ;
100+ timeFormate . classList . remove ( 'hideTime' ) ;
101+ timeFormate . classList . add ( 'showtime' ) ;
102+ dateFormate . classList . remove ( 'hideTime' ) ;
103+ dateFormate . classList . add ( 'showtime' ) ;
104+ } ;
105+ } ) ;
106+
107+ ( function ( ) {
108+ month_list . classList . add ( 'hideonce' ) ;
109+ } ) ( ) ;
110+ document . querySelector ( '#pre-year' ) . onclick = ( ) => {
111+ -- currentYear . value ;
112+ generateCalendar ( currentMonth . value , currentYear . value ) ;
113+ } ;
114+ document . querySelector ( '#next-year' ) . onclick = ( ) => {
115+ ++ currentYear . value ;
116+ generateCalendar ( currentMonth . value , currentYear . value ) ;
117+ } ;
118+
119+ let currentDate = new Date ( ) ;
120+ let currentMonth = { value : currentDate . getMonth ( ) } ;
121+ let currentYear = { value : currentDate . getFullYear ( ) } ;
122+ generateCalendar ( currentMonth . value , currentYear . value ) ;
123+
124+ const todayShowTime = document . querySelector ( '.time-formate' ) ;
125+ const todayShowDate = document . querySelector ( '.date-formate' ) ;
126+
127+ const currshowDate = new Date ( ) ;
128+ const showCurrentDateOption = {
129+ year : 'numeric' ,
130+ month : 'long' ,
131+ day : 'numeric' ,
132+ weekday : 'long' ,
133+ } ;
134+ const currentDateFormate = new Intl . DateTimeFormat (
135+ 'en-US' ,
136+ showCurrentDateOption
137+ ) . format ( currshowDate ) ;
138+ todayShowDate . textContent = currentDateFormate ;
139+ setInterval ( ( ) => {
140+ const timer = new Date ( ) ;
141+ const option = {
142+ hour : 'numeric' ,
143+ minute : 'numeric' ,
144+ second : 'numeric' ,
145+ } ;
146+ const formateTimer = new Intl . DateTimeFormat ( 'en-us' , option ) . format ( timer ) ;
147+ let time = `${ `${ timer . getHours ( ) } . padStart (
148+ 2 ,
149+ '0'
150+ ) } :${ `${ timer . getMinutes ( ) } . padStart (
151+ 2 ,
152+ '0'
153+ ) } : ${ `${ timer . getSeconds ( ) } . padStart ( 2 , '0' ) } ;
154+ todayShowTime . textContent = formateTimer ;
155+ } , 1000 ) ;
156+
0 commit comments