DEVELOPE/반응형웹

반응형 달력(캘린더) 소스포함 Responsive Calendar

소찾나 2018. 7. 3. 15:01

반응형 달력(캘린더) 소스포함 Responsive Calendar

반응형 달력(캘린더) 소스포함 Responsive Calendar





웹개발을 하다보면 달력이 필요할때가 종종있고 최근에 반응형 웹으로 개발하는 경우에 반응형 캘린더를 

작업해야할 경우가 발생하게 된다. 여러곳을 소스등을 짜집기 하여 만들어 보았다.



웹브라우저 풀 화면에서의 캘린더 이미지 캡쳐


반응형 테스트를 위한 사이즈 조절후 화면 캡쳐


소스보기

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html;charset=euc-kr" />
<head>
<meta charset="euc-kr">
<title>반응형 캘린더</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/calendar.css"/>
 
<link rel="shortcut icon" href="images/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="top"></div>
<?
/*--------------------
Title : 초간단 달력
Author : Cho Sung O
---------------------*/
if ($YYYY =="") {
$YYYY = date("Y"); 
}
IF ($MM =="") {
$MM = date("m"); 
}
if($MM == 13) {
$MM = 1;
$YYYY++;
}
if($MM == 0) {
$MM = 12;
$YYYY--;
}
$before = $MM - 1;
$after = $MM + 1;
$firstday_weeknum = date("w", mktime(0, 0, 0, $MM, 1, $YYYY)); 
$lastday = date("t", mktime(0, 0, 0, $MM, 1, $YYYY)); 
if($MM == 2) { 
    if(($YYYY % 4) == 0 && ($YYYY % 100) != 0 || ($YYYY % 400) == 0) { $lastday = 29; }
}
$td1 = "<TD width='100' align='center'><font size='2' align='center'><b>";
$td2 = "</b></font></TD><TD width='100' height='100' align='center'><font size='2' align='center'><b>";
$td3 = "</b></font></TD>\n";
?>
<div class="wrap">
<div class="background-color-darkblack padding-top-80" id="projects-1column">
  <div class="our-expertise44 expert-tabs" id="projects-3column">
    <div class="container padding-0">
      <div id="content">
        <div id="my-tab-content" class="tab-content">
        <!-- 예정공연안내 //-->
          <div class="tab-pane active" id="red">
            <div class="col-md-12 ">
                <div class="calendar">
                    <p>
                        <a href="<?=$PHP_SELF?>?MM=<?=$before?>&YYYY=<?=$YYYY?>&sub=<?=$sub?>"><</a>
                        <span class="Ym"><?=$YYYY?>. <?=$MM?></span>
                        <a href="<?=$PHP_SELF?>?MM=<?=$after?>&YYYY=<?=$YYYY?>&sub=<?=$sub?>">></a>
                    </p>
                    <ul>
                        <li class="cal_header">
                            <div class="Sun">SUN</div>
                            <div class="Mon">MON</div>
                            <div class="Tue">TUE</div>
                            <div class="Wed">WED</div>
                            <div class="Thu">THU</div>
                            <div class="Fri">FRI</div>
                            <div class="Sat">SAT</div>
                        </li>
                        <li>
<?
$week = 0;
for ($i=0; $i < $firstday_weeknum; $i++) { echo("<div><time><span class='Ym'>[2017.01]</span><span class='W'></span></time></div>"); $week++;  }
for($d=1; $d <= $lastday; $d++)
{
    
    if($week == 6) { $temp = "</li><li>";  };
    if ($week == 7) { $week = 0; } // 밑에 빈공간을 채우기 위한 변수 초기화
    //$day = (date("j") == $d && $MM == date("m"))? "<font color='deepink'><b>".$d."</b></font>":$d;
    // 요일구하기
    $time3 = mktime('' ,'' ,'' , $MM , $d , $YYYY);
    $we = array('Sun', 'Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat');
    $time2 = date("w",$time3);
    $wday = $we[$time2];
    
    if(date("j") == $d && $MM == date("m")) {
        
    $cls = "class='".$wday." today'";    
    $day = $d;
    } else {
    $cls = "class='".$wday."'";
    $day = $d;
    }
        $check = $YYYY . "-" . $MM . "-" . $d;
        $check2 = $YYYY . "-" . $MM . "-" . $d;
?>
                        
                            
                    <div <?=$cls?>><time><span class="Ym">[2017.01]</span><?=$day?><span class="W">(<?=$wday?>)</span>
 
                    </time></div>
                    <?=$temp?>
                         
<?  
    
    
    
    $week++;
    // 초기화
    $temp="";
}
for ($i=$week; $i < 7; $i++) { echo("<div><time><span class='Ym'>[2017.01]</span><span class='W'></span></time></div>"); }
?>
 
                        </li>
                    </ul>
                </div>
 
 
            </div>
 
      </div>
    </div>
  </div>
 </div>
 </div>
 </body>
 </html>
cs


혹시 개발중 간단한 반응형 캘린더가 필요하다면 다운받아 사용하시면 되시겠다 ^^ ~ 간단한 질문을 허용

소스다운받기  

responsive.zip