1
+ <html>
2
+ <head>
3
+ <style>
4
+ .calendar {
5
+ display: flex;
6
+ flex-flow: column;
7
+ }
8
+ .calendar .header .month-year {
9
+ font-size: 20px;
10
+ font-weight: bold;
11
+ color: #636e73;
12
+ padding: 20px 0;
13
+ }
14
+ .calendar .days {
15
+ display: flex;
16
+ flex-flow: wrap;
17
+ }
18
+ .calendar .days .day_name {
19
+ width: calc(100% / 7);
20
+ border-right: 1px solid #2c7aca;
21
+ padding: 20px;
22
+ text-transform: uppercase;
23
+ font-size: 12px;
24
+ font-weight: bold;
25
+ color: #818589;
26
+ color: #fff;
27
+ background-color: #448cd6;
28
+ }
29
+ .calendar .days .day_name:nth-child(7) {
30
+ border: none;
31
+ }
32
+ .calendar .days .day_num {
33
+ display: flex;
34
+ flex-flow: column;
35
+ width: calc(100% / 7);
36
+ border-right: 1px solid #e6e9ea;
37
+ border-bottom: 1px solid #e6e9ea;
38
+ padding: 15px;
39
+ font-weight: bold;
40
+ color: #7c878d;
41
+ cursor: pointer;
42
+ min-height: 100px;
43
+ }
44
+ .calendar .days .day_num span {
45
+ display: inline-flex;
46
+ width: 30px;
47
+ font-size: 14px;
48
+ }
49
+ .calendar .days .day_num .event {
50
+ margin-top: 10px;
51
+ font-weight: 500;
52
+ font-size: 14px;
53
+ padding: 3px 6px;
54
+ border-radius: 4px;
55
+ background-color: #f7c30d;
56
+ color: #fff;
57
+ word-wrap: break-word;
58
+ }
59
+ .calendar .days .day_num .event.green {
60
+ background-color: #51ce57;
61
+ }
62
+ .calendar .days .day_num .event.blue {
63
+ background-color: #518fce;
64
+ }
65
+ .calendar .days .day_num .event.red {
66
+ background-color: #ce5151;
67
+ }
68
+ .calendar .days .day_num:nth-child(7n+1) {
69
+ border-left: 1px solid #e6e9ea;
70
+ }
71
+ .calendar .days .day_num:hover {
72
+ background-color: #fdfdfd;
73
+ }
74
+ .calendar .days .day_num.ignore {
75
+ background-color: #fdfdfd;
76
+ color: #ced2d4;
77
+ cursor: inherit;
78
+ }
79
+ .calendar .days .day_num.selected {
80
+ background-color: #f1f2f3;
81
+ cursor: inherit;
82
+ }
83
+ </style>
84
+ </head>
85
+
86
+ <body>
87
+
88
+ <?php
89
+ class Calendar {
90
+
91
+ private $ active_year , $ active_month , $ active_day ;
92
+ private $ events = [];
93
+
94
+ public function __construct ($ date = null ) {
95
+ $ this ->active_year = $ date != null ? date ('Y ' , strtotime ($ date )) : date ('Y ' );
96
+ $ this ->active_month = $ date != null ? date ('m ' , strtotime ($ date )) : date ('m ' );
97
+ $ this ->active_day = $ date != null ? date ('d ' , strtotime ($ date )) : date ('d ' );
98
+ }
99
+
100
+ public function add_event ($ txt , $ date , $ days = 1 , $ color = '' ) {
101
+ $ color = $ color ? ' ' . $ color : $ color ;
102
+ $ this ->events [] = [$ txt , $ date , $ days , $ color ];
103
+ }
104
+
105
+ public function __toString () {
106
+ $ num_days = date ('t ' , strtotime ($ this ->active_day . '- ' . $ this ->active_month . '- ' . $ this ->active_year ));
107
+ $ num_days_last_month = date ('j ' , strtotime ('last day of previous month ' , strtotime ($ this ->active_day . '- ' . $ this ->active_month . '- ' . $ this ->active_year )));
108
+ $ days = [0 => 'Sun ' , 1 => 'Mon ' , 2 => 'Tue ' , 3 => 'Wed ' , 4 => 'Thu ' , 5 => 'Fri ' , 6 => 'Sat ' ];
109
+ $ first_day_of_week = array_search (date ('D ' , strtotime ($ this ->active_year . '- ' . $ this ->active_month . '-1 ' )), $ days );
110
+ $ html = '<div class="calendar"> ' ;
111
+ $ html .= '<div class="header"> ' ;
112
+ $ html .= '<div class="month-year"> ' ;
113
+ $ html .= date ('F Y ' , strtotime ($ this ->active_year . '- ' . $ this ->active_month . '- ' . $ this ->active_day ));
114
+ $ html .= '</div> ' ;
115
+ $ html .= '</div> ' ;
116
+ $ html .= '<div class="days"> ' ;
117
+ foreach ($ days as $ day ) {
118
+ $ html .= '
119
+ <div class="day_name">
120
+ ' . $ day . '
121
+ </div>
122
+ ' ;
123
+ }
124
+ for ($ i = $ first_day_of_week ; $ i > 0 ; $ i --) {
125
+ $ html .= '
126
+ <div class="day_num ignore">
127
+ ' . ($ num_days_last_month -$ i +1 ) . '
128
+ </div>
129
+ ' ;
130
+ }
131
+ for ($ i = 1 ; $ i <= $ num_days ; $ i ++) {
132
+ $ selected = '' ;
133
+ if ($ i == $ this ->active_day ) {
134
+ $ selected = ' selected ' ;
135
+ }
136
+ $ html .= '<div class="day_num ' . $ selected . '"> ' ;
137
+ $ html .= '<span> ' . $ i . '</span> ' ;
138
+ foreach ($ this ->events as $ event ) {
139
+ for ($ d = 0 ; $ d <= ($ event [2 ]-1 ); $ d ++) {
140
+ if (date ('y-m-d ' , strtotime ($ this ->active_year . '- ' . $ this ->active_month . '- ' . $ i . ' - ' . $ d . ' day ' )) == date ('y-m-d ' , strtotime ($ event [1 ]))) {
141
+ $ html .= '<div class="event ' . $ event [3 ] . '"> ' ;
142
+ $ html .= $ event [0 ];
143
+ $ html .= '</div> ' ;
144
+ }
145
+ }
146
+ }
147
+ $ html .= '</div> ' ;
148
+ }
149
+ for ($ i = 1 ; $ i <= (42 -$ num_days -max ($ first_day_of_week , 0 )); $ i ++) {
150
+ $ html .= '
151
+ <div class="day_num ignore">
152
+ ' . $ i . '
153
+ </div>
154
+ ' ;
155
+ }
156
+ $ html .= '</div> ' ;
157
+ $ html .= '</div> ' ;
158
+ return $ html ;
159
+ }
160
+
161
+ }
162
+ ?>
163
+
164
+ </body>
165
+ </html>
0 commit comments