( Web ) 스케쥴 관리 웹 만들기 Programing/Web 2016. 5. 2. 11:56

※ 제작과정을... 못만들었어요... 시간 날때 틈틈히 만들다 보니.. 과정을...찍어둔다는게...

※ 회원별 나누는구간도 만들어 두긴 했어요...가입부분을 안만들어서 ... ?!

※ IE10버전, 크롬에서만 돌아가는거 확인했어요...나머진...모름...!?

※ 시간을 계속 투자한게 아니라... 틈틈히 기회날때마다 만든거라... 소스가 조금 너저분 할수도 있어요..

※ 그냥....저혼자 쓸려고 만든거라...?! PC버전이용!

※ 주고 받는 데이터 형식은 Json이나 xml을 쓰지 않았어요...귀찮아서가 아님...아마도...


※ css 랑 js 가 길어서 숨겨놨어요 클릭해서 보세요


1. 만들어진 화면


[ 이미지 1 ]




2. 완성본

     ....DB랑 이것저것 해야되서 여기다가 바로 못올리더라구요... 그래서 링크를 걸께요!!


     http://xline.dothome.co.kr/zero.php


     내 위에 주소를 눌리면 새창이떠요!1 여기서 확인 가능해요!!




3. 소스부분 ( 주의 : 꽤 김... )

   3-1. CSS 부분 (클릭하면 소스가 나와요)
view source
print?
001.<!-- css style -->
002.    <style>
003.        html, body {
004.            margin: 0;
005.        }
006.     
007.        .schedule_body {
008.            width: 890px;
009.        }
010. 
011.        .schedule_info {
012.            float: left;
013.        }
014. 
015.        .titleHead {
016.            width: 100%;
017.        }
018. 
019.        .schedule_addbt_lay {
020.            float: right;
021.            padding-right: 130px;
022.            padding-top: 10px;
023.        }
024. 
025.        .TotalView {
026.            width: 310px;
027.            height: 100px;
028.            border: 1px double black;;
029.            margin-left: 10px;
030.            margin-top: 10px;
031.        }
032.        .TotalView.right{
033.            margin-left: 100px;
034.        }
035. 
036.        .TotalView .info_body {
037.            font-size: 13px;
038.            vertical-align: middle;
039.            margin-top: 2px;
040.        }
041. 
042.        .TotalView .info_body div {
043.            line-height: 21px;
044.            vertical-align: middle;
045.        }
046. 
047.        .lodingMsg {
048.            width: 100px;
049.            height: 20px;
050.            border: 1px;
051.            border-style: double;
052.            float: left;
053.            line-height: 20px;
054.            vertical-align: middle;
055.            padding-left: 10px;
056.            font-size: 13px;
057.            margin-top: 10px;
058.            margin-left: 10px;
059.            opacity: 0;
060.        }
061. 
062.        .info_veiw_bk {
063.            width: 100%;
064.        }
065. 
066.        .info_veiw_bk .info_view_body {
067.            width: 740px;
068.            height: 105px;
069.            /* height: 350px; */
070.            margin-left: 10px;
071.            margin-top: 10px;
072.            border: 1px;
073.            border-style: double;
074.            overflow: hidden;
075.        }
076. 
077.        .info_veiw_bk .info_view_body div {
078.            margin-left: 15px;
079.            padding-top: 10px;
080.        }
081. 
082.        .info_veiw_bk .info_view_body div > .rightSaveBt {
083.            float: right;
084.            width: 40px;
085.            height: 20px;
086.            border: 1px;
087.            border-style: dotted;
088.            cursor: pointer;
089.            font-size: 14px;
090.            margin-top: 0px;
091.            margin-right: 10px;
092.            padding-top: 0px;
093.            line-height: 20px;
094.            text-align: center;
095.            vertical-align: middle;
096.            display: none;
097.        }
098. 
099.        .info_veiw_bk .info_view_body div > #info_sDay_input {
100.            text-align: center;
101.        }
102. 
103.        .info_veiw_bk .info_view_body div > #info_eDay_input {
104.            text-align: center;
105.        }
106. 
107.        .info_veiw_bk .info_view_body div > .rightSaveBt:hover {
108.            background-color: #ffff00;
109.        }
110. 
111.        .info_veiw_bk .info_view_body #info_subject_memo {
112.            width: 638px;
113.            height: 200px;
114.            margin-left: 30px;
115.        }
116. 
117.        .schedule_info {
118.            width: 300px;
119.            height: 90px;
120.            background-color: #ffffff;
121.            border: 1px;
122.            border-style: double;
123.            position: absolute;
124.            z-index: 99;
125.            display: none;
126.        }
127. 
128.        .schedule_info .info_subject {
129.            font-size: 14px;
130.            font-family: -webkit-body;
131.            margin-left: 15px;
132.            margin-top: 5px;
133.        }
134. 
135.        .schedule_info .info_content {
136.            font-size: 13px;
137.            font-family: -webkit-body;
138.            margin-left: 10px;
139.            margin-top: 5px;
140.        }
141. 
142.        .schedule_info .info_content p {
143.            margin-top: 0px;
144.            margin-bottom: 2px;
145.        }
146. 
147.        .schedule_body .inDay {
148.            padding-left: 10px;
149.            height: 30px;
150.        }
151. 
152.        .schedule_body .inDay > div {
153.            width: 22px;
154.            height: 22px;
155.            line-height: 22px;
156.            vertical-align: middle;
157.            text-align: center;
158.            float: left;
159.            border: 1px;
160.            border-style: dotted;
161. 
162.        }
163. 
164.        .schedule_body .addSchedule {
165.            width: 100%;
166.            height: 220px;
167.            padding-top: 10px;
168.            border-top: 1px;
169.            border-bottom: 1px;
170.            border-style: dotted;
171.            border-left: 0px;
172.            border-right: 0px;
173.            background-color: #EFEFEF;
174.        }
175. 
176.        .schedule_body .addSchedule div {
177.            margin-left: 10px;
178.            width: 95%;
179.            line-height: 28px;
180.            vertical-align: middle;
181.        }
182. 
183.        .schedule_body .addSchedule .addLineView #inAddDayMini {
184.            height: 22px;
185.            width: 22px;
186.            line-height: 22px;
187.            vertical-align: middle;
188.            text-align: center;
189.            float: left;
190.            border: 1px;
191.            border-style: dotted;
192.            margin-left: 0px;
193.            cursor: pointer;
194.        }
195. 
196.        .schedule_body .inScheduleView {
197.            width: 99%;
198.            height: 141px;
199.            margin-left: 10px;
200.            position: relative;
201.        }
202. 
203.        .schedule_body .inScheduleView #inSchDiv {
204.            width: 0px;
205.            height: 25px;
206.            position: absolute;
207.            line-height: 25px;
208.            text-align: center;
209.            vertical-align: middle;
210.            overflow: hidden;
211.            cursor: pointer;
212.            border: 1px double #A2A2A2;
213.            border-top-right-radius: 5px;
214.            border-bottom-left-radius: 5px;
215.            border-top-left-radius: 5px;
216.            border-bottom-right-radius: 5px;
217.        }
218. 
219.        .schedule_body .inScheduleView #InSchedule {
220.            width: 23px;
221.            height: 100%;
222.            float: left;
223.            border-right: 1px;
224.            border-left: 0px;
225.            border-top: 0px;
226.            border-bottom: 0px;
227.            border-style: dotted;
228.        }
229. 
230.        .schedule_body .inScheduleView #InSchedule.last {
231.            border-right: 0px;
232.        }
233. 
234.        .schedule_body .info {
235.            width: 164px;
236.            height: 50px;
237.            line-height: 50px;
238.            vertical-align: middle;
239.            padding-right: 180px;
240.            margin: auto;
241.        }
242. 
243.        .schedule_body .info > div {
244.            float: left;
245.            width: 22px;
246.            height: 22px;
247.            cursor: pointer;
248.            padding-left: 10px;
249.        }
250. 
251.        .schedule_body .info .TodayView {
252.            width: 100px;
253.            cursor: context-menu;
254.            text-align: center;
255.            padding-left: 0px;
256.        }
257. 
258.        .schedule_body .addSchedule div .ColorPikerBody {
259.            width: 350px;
260.            height: 176px;
261.            border: 1px;
262.            border-style: dotted;
263.            margin-top: 5px;
264.        }
265. 
266.        .schedule_body .addSchedule div .ColorPik {
267.            margin: auto;
268.            width: 350px;
269.        }
270. 
271.        .schedule_body .addSchedule div .ColorPik div {
272.            width: 35px;
273.            height: 35px;
274.            line-height: 35px;
275.            margin: 0;
276.            float: left;
277.            cursor: pointer;
278.        }
279. 
280.        .schedule_body .addSchedule div .ColorView {
281.            width: 28px;
282.            height: 28px;
283.            float: left;
284.            margin-right: 10px;
285.            border: 1px;
286.            border-style: dotted;
287.        }
288.    </style>



   3-1. JS 부분 ( 클릭하면 소스가 나와요 )
view source
print?
001.<!-- script -->
002.    <script src='/_Js/JQuery/jquery-2.2.2.js'></script>
003.    <script>
004.        var _user_id = "<?php echo $_user_id;?>";
005.        var init_day = new Date();
006.        var in_year = init_day.getFullYear();
007.        var in_month = init_day.getMonth() + 1;
008.        var in_today = init_day.getDate();
009.        var start_day = 0;
010.        var end_day = 0;
011.        var lastDay = 0;
012.        var SaveInfoScheduleArr;
013.        var clickOnFlag = false;
014.        var DdayInfoScheduleArr;
015.        $(function(){
016.            LoadDdayList();
017.            LoadSchedule();
018. 
019.            $('.PrepBt').click(function(){
020.                $('.inDay')[0].innerHTML = "";
021.                $('.addLineView')[0].innerHTML = "";
022.                $('.inScheduleView')[0].innerHTML = "";
023.                in_month -= 1;
024.                if(in_month == 0){
025.                    in_month = 12;
026.                    in_year -= 1;
027.                }
028.                if(in_month < 10){
029.                    drawDayLine(in_year, "0"+in_month);
030.                    drawDayAddLine(in_year, "0"+in_month);
031.                    drawInScheduleLine(in_year, "0"+in_month);
032.                }else{
033.                    drawDayLine(in_year, in_month);
034.                    drawDayAddLine(in_year, in_month);
035.                    drawInScheduleLine(in_year, in_month);
036.                }
037.                if($('#s_day').val() != ''){
038.                    inBkColorChange($('#s_day').val(), $('#e_day').val());
039.                }
040.                LoadSchedule();
041.                modViewCloseBtEvent();
042.            });
043. 
044.            $('.NextBt').click(function(){
045.                $('.inDay')[0].innerHTML = "";
046.                $('.addLineView')[0].innerHTML = "";
047.                $('.inScheduleView')[0].innerHTML = "";
048.                in_month += 1;
049.                if(in_month == 13){
050.                    in_month = 1;
051.                    in_year += 1;
052.                }
053.                if(in_month < 10){
054.                    drawDayLine(in_year, "0"+in_month);
055.                    drawDayAddLine(in_year, "0"+in_month);
056.                    drawInScheduleLine(in_year, "0"+in_month);
057.                }else{
058.                    drawDayLine(in_year, in_month);
059.                    drawDayAddLine(in_year, in_month);
060.                    drawInScheduleLine(in_year, in_month);
061.                }
062.                if($('#s_day').val() != ''){
063.                    inBkColorChange($('#s_day').val(), $('#e_day').val());
064.                }
065.                LoadSchedule();
066.                modViewCloseBtEvent();
067.            });
068.        });
069. 
070.        function init() {
071.            $('.inDay')[0].innerHTML = "";
072.            $('.addLineView')[0].innerHTML = "";
073.            $('.inScheduleView')[0].innerHTML = "";
074.            if(in_month < 10){
075.                drawDayLine(in_year, "0"+in_month);
076.                drawDayAddLine(in_year, "0"+in_month);
077.                drawInScheduleLine(in_year, "0"+in_month);
078.            }else{
079.                drawDayLine(in_year, in_month);
080.                drawDayAddLine(in_year, in_month);
081.                drawInScheduleLine(in_year, in_month);
082.            }
083.            toDayCheck();
084.        }
085. 
086.        function toDayCheck(){
087.            if(Number(in_month) == Number((init_day.getMonth()+1)) && Number(in_year) == Number(init_day.getFullYear())){
088.                $('.inDayMini_'+Number(in_today)).css('background-color', '#8DF6FB');
089.                $('.InSchedule_'+Number(in_today)).css('background-color', '#8DF6FB');
090.            }
091.            getInputDayLabel(in_year, in_month);
092.        }
093. 
094.        function getInputDayLabel(yy, mm) {
095.            var Getweek = new Array('일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일');
096.            var Gettoday = "";
097.            for(var i=1;i<=lastDay;i++){
098.                if(mm < 10){
099.                    if(i < 10) {
100.                        Gettoday = new Date(yy+"-0"+mm+"-0"+i).getDay();
101.                    }else {
102.                        Gettoday = new Date(yy+"-0"+mm+"-"+i).getDay();
103.                    }
104.                }else{
105.                    Gettoday = new Date(yy+"-"+mm+"-"+i).getDay();
106.                }
107.                if(Getweek[Gettoday] == "일요일" || Getweek[Gettoday] == "토요일"){
108.                    $('.inDayMini_'+i).css('background-color', '#FFEBEB');
109.                    $('.InSchedule_'+i).css('background-color', '#FFEBEB');
110.                }
111.            }
112.        }
113. 
114. 
115.        function drawDayLine(yy, mm) {
116.            $('.TodayView')[0].innerHTML = in_year+"-"+in_month;
117.            lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
118.            for(var i=1; i <= lastDay; i++){
119.                $('.inDay')[0].innerHTML += "<div class='inDayMini_"+i+"' id='inDayMini'>"+i+"</div>";
120.            }
121.        }
122. 
123.        function drawDayAddLine(yy, mm) {
124.            lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
125.            for(var i=1; i <= lastDay; i++){
126.                var dayMin = i;
127.                if(i < 10){
128.                    dayMin = "0"+i;
129.                }
130.                $('.addLineView')[0].innerHTML += " <div class='inAddDayMini_"+i+"' id='inAddDayMini' tumb='"+yy+mm+dayMin+"' inPos='"+i+"'>"+i+"</div>";
131.            }
132. 
133.            $("[class^='inAddDayMini_']").hover(
134.                function (){
135.                    if($(this).css("background-color") != "rgb(249, 149, 218)"){
136.                        $(this).css("background-color", "#ffff00");
137.                    }
138.                },
139.                function (){
140.                    if($(this).css("background-color") != "rgb(249, 149, 218)"){
141.                        $(this).removeAttr('style');
142.                    }
143.                }
144.            );
145. 
146.            $("[class^='inAddDayMini_']").click(function(){
147.                schedule_add_div_click($(this));
148.            });
149.        }
150. 
151.        function drawInScheduleLine (yy, mm) {
152.            lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
153.            for(var i=1; i <= lastDay; i++){
154.                if(i == lastDay){
155.                    $('.inScheduleView')[0].innerHTML += "<div class='InSchedule_"+i+" last' id='InSchedule'></div>";
156.                }else{
157.                    $('.inScheduleView')[0].innerHTML += "<div class='InSchedule_"+i+"' id='InSchedule'></div>";
158.                }
159.            }
160.        }
161. 
162.        function schedule_add_view() {
163.            if($('.addSchedule').css("display") == "none"){
164.                $('.OnOffbt').val("Close Add Schedule");
165.                $('.addSchedule').css("display", "block");
166.            }else{
167.                $('.OnOffbt').val("Open Add Schedule");
168.                $('.addSchedule').css("display", "none");
169.            }
170.        }
171. 
172.        function schedule_add_div_click (obj) {
173.            if(start_day == 0){
174.                obj.css("background-color", "#F995DA");
175.                start_day = obj.attr("tumb");
176.                $('#s_day').val(start_day);
177.            }else if(start_day == obj.attr("tumb")) {
178.                obj.removeAttr('style');
179.                start_day = 0;
180.                clearInput();
181.            }else if(start_day != 0 && start_day != obj.attr("tumb")) {
182.                if(Number(obj.attr("tumb")) > Number(start_day)) {              
183.                    obj.css("background-color", "#F995DA");
184.                    end_day = obj.attr("tumb");
185.                    $('#e_day').val(end_day);
186.                    inBkColorChange(start_day, end_day);
187.                }
188.            }else {
189. 
190.            }
191.        }
192. 
193.        function inBkColorChange(s_flag, e_flag) {
194.            clearAddBkColor();
195.            if(e_flag != '' && s_flag != '') {
196.                for(var i=s_flag;i<=e_flag;i++){
197.                    $('div[tumb="'+i+'"]').css("background-color", "#F995DA");
198.                }
199.            }else if(s_flag != '' && e_flag == ''){
200.                $('div[tumb="'+s_flag+'"]').css("background-color", "#F995DA");
201.            }
202.        }
203. 
204.        function clearAddBkColor() {
205.            $('div[id="inAddDayMini"]').removeAttr('style');
206.        }
207. 
208.        function clearInput() {
209.            clearAddBkColor();
210.            $('.addSchedule input[type=text]').val("");
211.            start_day = 0;
212.            end_day = 0;
213.            return false;
214.        }
215. 
216.        function schedule_add() {
217.            var url = "스케쥴 등록하는 url 경로";
218.            $('.lodingMsg').animate({
219.                opacity: "1"
220.            }, 500);
221.            $.ajax({     
222.                type:"POST",
223.                url:url,
224.                data:{
225.                    user_id : _user_id,
226.                    subject : $('#s_subject').val(),
227.                    content : $('#s_content').val(),   
228.                    sdate : $('#s_day').val(),
229.                    edate : $('#e_day').val(),
230.                    field_color : $('#inputColor').val(),
231.                },
232.                success:function(args){
233.                    if(args){
234.                        LoadDdayList();
235.                        LoadSchedule();
236.                        schedule_add_view();
237.                        clearInput();
238.                    }else{
239.                        alert("스케쥴 등록 실패.");
240.                        LoadSchedule();
241.                        schedule_add_view();
242.                    }
243.                    $('.lodingMsg').animate({
244.                        opacity: "0"
245.                    }, 500);
246.                },
247.                error:function(e){ 
248.                    alert(e.responseText); 
249.                } 
250.            });
251.            return false;
252.        }
253. 
254.        function colorPickUp() {
255.            if($('.ColorPikerBody').css("display") == "none"){
256.                $('.info_veiw_bk').css('padding-top', '190px');
257.                $('.ColorPikerBody').css("display", "block");
258.                $('.ColorPik')[0].innerHTML = "";
259.                for(var i=0; i< 5; i++){
260.                    for(var j=0; j<10; j++){
261.                        var InColorPick = Math.random().toString(16).replace(/.*(\w{6})/, '#$1');
262.                        $('.ColorPik')[0].innerHTML += "<div class='cPick_1' coloTump='"+InColorPick+"' style='background-color: "+InColorPick+";''></div>";
263.                    }
264.                }
265.                $('[class^="cPick_"]').hover(
266.                    function(){
267.                        $('.ColorView').css("background-color", $(this).attr("coloTump"));
268.                        $('#inputColor').val($(this).attr("coloTump"));
269.                    }
270.                );
271.                $('[class^="cPick_"]').click(function(){
272.                    $('.ColorPikerBody').css("display", "none");
273.                    $('.info_veiw_bk').css('padding-top', '0px');
274.                    $('#inputColor').val($(this).attr("coloTump"));
275.                });
276.            }else{
277.                $('.info_veiw_bk').css('padding-top', '0px');
278.                $('.ColorPikerBody').css("display", "none");
279.            }
280.        }
281. 
282.        function LoadSchedule() {
283.            init();
284.            var NowDate_s = 0;
285.            var NowDate_e = 0;
286.            if(in_month < 10){
287.                NowDate_s = in_year+"0"+in_month+"01";
288.            }else{
289.                NowDate_s = in_year+in_month+"01";
290.            }
291.            if(in_month < 10){
292.                NowDate_e = in_year+"0"+in_month+lastDay;
293.            }else{
294.                NowDate_e = in_year+in_month+lastDay;
295.            }
296. 
297.            var url = "스케쥴 등록하는 url 경로";
298.            $('.lodingMsg').animate({
299.                opacity: "1"
300.            }, 500);
301.            $.ajax({     
302.                type:"POST",
303.                url:url,
304.                data:{
305.                    user_id : _user_id,
306.                    yyMonth_s: NowDate_s,
307.                    yyMonth_e: NowDate_e,
308.                },     
309.                success:function(args){
310.                    if(args){
311.                        splitScheduleString(args);
312.                    }
313.                    $('.lodingMsg').animate({
314.                        opacity: "0"
315.                    }, 500);
316.                },
317.                error:function(e){ 
318.                    alert(e.responseText); 
319.                }
320.            });
321.        }
322. 
323.        function LoadDdayList() {
324.            var url = "스케쥴 오늘날짜에서부터 D-day 리스트를 가져오는 url 경로";
325.            var now_year = Number(init_day.getFullYear());
326.            var now_month = Number(init_day.getMonth() + 1);
327.            var now_today = Number(init_day.getDate());
328.            var hitNow = "";
329. 
330.             
331.            if(10 > now_month){
332.                now_month = "0"+now_month;
333.            }
334.            if(10 > now_today){
335.                now_today = "0"+now_today;
336.            }
337.            hitNow = now_year+""+now_month+""+now_today;
338. 
339.            $('.lodingMsg').animate({
340.                opacity: "1"
341.            }, 500);
342.            $.ajax({
343.                type:"POST",
344.                url:url,
345.                data:{
346.                    user_id : _user_id,
347.                    toDay: hitNow,
348.                },     
349.                success:function(args){
350.                    if(args){
351.                        splitScheduleString2(args);
352.                    }
353.                    $('.lodingMsg').animate({
354.                        opacity: "0"
355.                    }, 500);
356.                },
357.                error:function(e){ 
358.                    alert(e.responseText); 
359.                }
360.            });
361.        }
362. 
363. 
364.        /*
365.        ***********************************************************************
366.            splitScheduleString[0][0] = subject;    스케쥴 제목이 와야되요
367.            splitScheduleString[0][1] = content;    스케쥴 내용이 오구요
368.            splitScheduleString[0][2] = s_date;     스케쥴 시작날짜
369.            splitScheduleString[0][3] = e_date;     스케쥴 종료날짜
370.            splitScheduleString[0][4] = color;      스케쥴 표시할 칼라
371.            splitScheduleString[0][5] = s_idx;      스케쥴 고유 idx
372.            splitScheduleString[0][6] = s_memo;     스케쥴 세부 내용
373.        ***********************************************************************
374.        */
375.        function splitScheduleString(stringTo) {
376.            var InSchArr = stringTo.split('&|&');
377.            var countArr = 0;
378.            SaveInfoScheduleArr = "";
379.            SaveInfoScheduleArr = new Array();
380. 
381.            for(var i=0;i<InSchArr.length;i++){
382.                var tempArr = new Array();
383.                tempArr = InSchArr[i].split('@|@');
384.                 
385.                if( Number(tempArr[2]) >= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[2]) <= Number($('[inpos="'+lastDay+'"]').attr("tumb")) ){
386.                    SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
387.                    countArr += 1;
388.                }else if( Number(tempArr[3]) >= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[3]) <= Number($('[inpos="'+lastDay+'"]').attr("tumb")) ){
389.                    SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
390.                    countArr += 1;
391.                }else if(Number(tempArr[2]) <= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[3]) >= Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
392.                    SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
393.                    countArr += 1;
394.                }
395.            }
396.            ViewheightChange();
397.            DrawInfoSchedule();
398.        }
399. 
400.        function splitScheduleString2(stringTo) {
401.            var InSchArr = stringTo.split('&|&');
402.            var countArr = 0;
403.            DdayInfoScheduleArr = "";
404.            DdayInfoScheduleArr = new Array();
405. 
406.            for(var i=0;i<InSchArr.length;i++){
407.                var tempArr = new Array();
408.                tempArr = InSchArr[i].split('@|@');
409. 
410.                DdayInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
411.                countArr += 1;
412.            }
413.            info_msg();
414.        }
415. 
416.        function ViewheightChange() {
417.            var heightSet = (SaveInfoScheduleArr.length * 33) + 1;
418.                 
419.            if(heightSet < 141){
420.                $(".inScheduleView").animate({
421.                    height: "141px"
422.                }, 1000 );
423.            }else{
424.                $(".inScheduleView").animate({
425.                    height: heightSet+"px"
426.                }, 1000 );
427.            }
428.        }
429. 
430.        function info_msg() {
431.            var now = new Date();
432.            var then = 0;
433. 
434.            var now_year = Number(init_day.getFullYear());
435.            var now_month = Number(init_day.getMonth() + 1);
436.            var now_today = Number(init_day.getDate());
437.            var hitNow = "";
438. 
439.             
440.            if(10 > now_month){
441.                now_month = "0"+now_month;
442.            }
443.            if(10 > now_today){
444.                now_today = "0"+now_today;
445.            }
446.            hitNow = now_year+""+now_month+""+now_today;
447.            $('.info_msg')[0].innerHTML = "";
448. 
449.            var count_info = 0;
450.            for(var i=1; i<=DdayInfoScheduleArr.length;i++){
451.                if(Number(DdayInfoScheduleArr[i-1][3]) >=  Number(hitNow)){
452.                     
453.                    then = new Date(YearMonthDay2(DdayInfoScheduleArr[i-1][3]));
454.                    var gap = now.getTime() - then.getTime();
455.                    gap = Math.floor(gap / (1000 * 60 * 60 * 24)) * -1;
456.                    if(i%2 == 0){
457.                        $('.info_msg')[0].innerHTML += "<div style='background-color: #F5F5F5;'>  "+DdayInfoScheduleArr[i-1][0]+"<div style='float: right; padding-right:10px'>D-day : "+gap+"</div></div>";
458.                    }else{
459.                        $('.info_msg')[0].innerHTML += "<div>  "+DdayInfoScheduleArr[i-1][0]+"<div style='float: right; padding-right:10px'>D-day : "+gap+"</div></div>";
460.                    }
461.                    count_info += 1;
462.                }
463.            }
464.             
465.            var TotalViewHeight = 40 + (count_info * 21);
466.            $('.TotalView').css("height", TotalViewHeight+"px");
467.            $('.titleHead').css("height", (TotalViewHeight+20)+"px");
468. 
469.        }
470. 
471.        function YearMonthDay2(inDay){
472.            var yy = inDay.substring(0,4);
473.            var mm = inDay.substring(4,6);
474.            var dd = inDay.substring(6,8);
475. 
476.            return yy+"-"+mm+"-"+dd;
477.        }
478. 
479.        function DrawInfoSchedule(){
480.            for(var i=1; i<=SaveInfoScheduleArr.length;i++){
481.                var left = ($('[tumb="'+SaveInfoScheduleArr[(i-1)][2]+'"]').attr('inpos') * 24) - 24;
482.                var color_set = SaveInfoScheduleArr[(i-1)][4];
483.                $('.inScheduleView')[0].innerHTML += "<div class='inSchDiv_"+i+"' id='inSchDiv' infotumb='"+(i-1)+"' style='bottom:"+(((i-1)*32)+5)+"px; left: "+left+"px; background-color: "+color_set+";'>"+SaveInfoScheduleArr[(i-1)][0]+"</div>";
484.            }
485.            $('[class^=inSchDiv_]').hover(
486.                function(){
487.                    var s_day_val = 0;
488.                    var e_day_val = 0;
489.                    var stringSet = $(this).css("background-color");
490.                    stringSet = stringSet.slice(3,-1)+", 0.6)";
491.                    $(this).css("background-color", "rgba"+stringSet);
492.                    if(!clickOnFlag){
493.                        s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
494.                        e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
495. 
496.                        if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
497.                            s_day_val = 0;
498.                        }
499.                        if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
500.                            e_day_val = Number(lastDay);
501.                        }
502. 
503.                        infoSet($(this));
504.                         
505.                        $('.schedule_info').css("display", "block");
506.                        for(var i=s_day_val;i<=e_day_val;i++){
507.                            $('.inDayMini_'+i).css("background-color", "yellow");
508.                        }
509.                    }
510.                },
511.                function(){
512.                    var stringSet = $(this).css("background-color");
513.                    var stringSetArr = stringSet.split(", ");
514.                    var stringSet = stringSetArr[0]+", "+stringSetArr[1]+", "+stringSetArr[2]+",  1.0)";
515. 
516.                    $(this).css("background-color", stringSet);
517.                    if(!clickOnFlag){
518.                        var s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
519.                        var e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
520.                         
521.                        if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
522.                            s_day_val = 0;
523.                        }
524.                        if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
525.                            e_day_val = Number(lastDay);
526.                        }
527.                         
528.                        $('.schedule_info').css("display", "none");
529. 
530.                        for(var i=s_day_val;i<=e_day_val;i++){
531.                            $('.inDayMini_'+i).removeAttr('style');
532.                        }
533.                        toDayCheck();
534.                    }
535.                }
536.            );
537. 
538.            $('[class^=inSchDiv_]').click(function(){
539.                /* 여기 작업해야됨!!!!!!!! */
540.                if(SaveInfoScheduleArr[$(this).attr('infotumb')][5] == $('#in_idx').val()){
541.                    modViewCloseBtEvent();
542.                    if($(this).css("border-right") == "0px none rgb(0, 0, 0)"){
543.                        $(this).css("border-left", "1px double #A2A2A2");
544.                        $(this).css("border-top", "1px double #A2A2A2");
545.                        $(this).css("border-bottom", "1px double #A2A2A2");
546.                    }else if($(this).css("border-left") == "0px none rgb(0, 0, 0)"){
547.                        $(this).css("border-right", "1px double #A2A2A2");
548.                        $(this).css("border-top", "1px double #A2A2A2");
549.                        $(this).css("border-bottom", "1px double #A2A2A2");
550.                    }else{
551.                        $(this).css("border", "1px double #A2A2A2");
552.                    }
553.                    $('[class="rightSaveBt"]').css("display", "none");
554.                    return false;
555.                }else{
556.                    borderClear();
557.                }
558. 
559.                if($(this).css("border-right") == "0px none rgb(0, 0, 0)"){
560.                    $(this).css("border-left", "2px groove yellow");
561.                    $(this).css("border-top", "2px groove yellow");
562.                    $(this).css("border-bottom", "2px groove yellow");
563.                }else if($(this).css("border-left") == "0px none rgb(0, 0, 0)"){
564.                    $(this).css("border-right", "2px groove yellow");
565.                    $(this).css("border-top", "2px groove yellow");
566.                    $(this).css("border-bottom", "2px groove yellow");
567.                }else{
568.                    $(this).css("border", "2px");
569.                    $(this).css("border-style", "groove");
570.                    $(this).css("border-color", "yellow");
571.                }
572. 
573.                $('[class="rightSaveBt"]').css("display", "block");
574. 
575.                clickOnFlag = true;
576.                $('.schedule_info').css("display", "none");
577.                infoSet($(this));
578.                var s_idx = SaveInfoScheduleArr[$(this).attr('infotumb')][5];
579.                $('#in_idx').val(s_idx);
580.                $('.info_view_body').animate({
581.                    height: "350px"
582.                }, 500);
583. 
584.                for(var i=1;i<=lastDay;i++){
585.                    $('.inDayMini_'+i).removeAttr('style');
586.                }
587. 
588.                s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
589.                e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
590. 
591.                if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
592.                    s_day_val = 0;
593.                }
594.                if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
595.                    e_day_val = Number(lastDay);
596.                }
597. 
598.                toDayCheck();
599.                for(var i=s_day_val;i<=e_day_val;i++){
600.                    $('.inDayMini_'+i).css("background-color", "yellow");
601.                }
602.            });
603.            inAnimation();
604.        }
605. 
606.        function borderClear(){
607.            for(var i=0;i<SaveInfoScheduleArr.length;i++){
608.                if($('div[infotumb="'+i+'"]').css("border-right") == "0px none rgb(0, 0, 0)"){
609.                    $('div[infotumb="'+i+'"]').css("border-left", "1px double #A2A2A2");
610.                    $('div[infotumb="'+i+'"]').css("border-top", "1px double #A2A2A2");
611.                    $('div[infotumb="'+i+'"]').css("border-bottom", "1px double #A2A2A2");
612.                }else if($('div[infotumb="'+i+'"]').css("border-left") == "0px none rgb(0, 0, 0)"){
613.                    $('div[infotumb="'+i+'"]').css("border-right", "1px double #A2A2A2");
614.                    $('div[infotumb="'+i+'"]').css("border-top", "1px double #A2A2A2");
615.                    $('div[infotumb="'+i+'"]').css("border-bottom", "1px double #A2A2A2");
616.                }else{
617.                    $('div[infotumb="'+i+'"]').css("border", "1px double #A2A2A2");
618.                }
619.            }
620.        }
621. 
622.        function infoSet(obj){
623.            var SubjectVal = SaveInfoScheduleArr[obj.attr('infotumb')][0];
624.            var ContentVal = SaveInfoScheduleArr[obj.attr('infotumb')][1];
625.            var s_date = YearMonthDay(SaveInfoScheduleArr[obj.attr('infotumb')][2]);
626.            var e_date = YearMonthDay(SaveInfoScheduleArr[obj.attr('infotumb')][3]);
627.         
628.            $('.info_subject')[0].innerHTML = "<b>"+SubjectVal+"</b>";
629.            $('.info_content')[0].innerHTML = "<p>"+s_date+" ~ "+e_date+"</p><p>"+ContentVal+"</p>";
630. 
631.            $('#info_sDay_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][2]);
632.            $('#info_eDay_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][3]);
633.            $('#info_subject_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][0]);
634.            $('#info_subject_content').val(SaveInfoScheduleArr[obj.attr('infotumb')][1]);
635.            $('#info_subject_memo').val(SaveInfoScheduleArr[obj.attr('infotumb')][6]);
636. 
637. 
638.            $(document).mousemove(function(e){
639.                if(obj.attr('infotumb') > 2){
640.                    if((e.pageX+5) < 610){
641.                        $('.schedule_info').css('left', e.pageX+5);
642.                        $('.schedule_info').css('top', e.pageY);
643.                    }else{
644.                        $('.schedule_info').css('left', e.pageX-310);
645.                        $('.schedule_info').css('top', e.pageY);
646.                    }
647.                }else{
648.                    if((e.pageX+5) < 610){
649.                        $('.schedule_info').css('left', e.pageX+5);
650.                        $('.schedule_info').css('top', e.pageY-90);
651.                    }else{
652.                        $('.schedule_info').css('left', e.pageX-310);
653.                        $('.schedule_info').css('top', e.pageY-90);
654.                    }
655.                }
656.            });
657. 
658.        }
659. 
660.        function YearMonthDay(inDay){
661.            var yy = inDay.substring(0,4);
662.            var mm = inDay.substring(4,6);
663.            var dd = inDay.substring(6,8);
664. 
665.            return yy+"년 "+mm+"월 "+dd+"일";
666.        }
667. 
668.        function inAnimation() {
669.            for(var i=1; i<=SaveInfoScheduleArr.length;i++){
670.                var s_setPos = 0;
671.                var e_setPos = 0;
672. 
673.                if(Number(SaveInfoScheduleArr[(i-1)][2]) < Number($('[inpos="1"]').attr("tumb"))){
674.                    s_setPos = $('[inpos="1"]').attr('inpos');
675. 
676.                    $('.inSchDiv_'+i).css("border-left", "0px");
677.                    $('.inSchDiv_'+i).css("border-top-left-radius", "0px");
678.                    $('.inSchDiv_'+i).css("border-bottom-left-radius", "0px");
679.                }else{
680.                    s_setPos = $('[tumb="'+SaveInfoScheduleArr[(i-1)][2]+'"]').attr('inpos');
681.                }
682. 
683.                if(Number(SaveInfoScheduleArr[(i-1)][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
684.                    e_setPos = $('[inpos="'+lastDay+'"]').attr('inpos');
685. 
686.                    $('.inSchDiv_'+i).css("border-right", "0px");
687.                    $('.inSchDiv_'+i).css("border-top-right-radius", "0px");
688.                    $('.inSchDiv_'+i).css("border-bottom-right-radius", "0px");
689.                }else{
690.                    e_setPos = $('[tumb="'+SaveInfoScheduleArr[(i-1)][3]+'"]').attr('inpos');
691.                }
692. 
693.                var widthSet = ((e_setPos - s_setPos)*24) + 21;
694.                $(".inSchDiv_"+i).animate({
695.                    width: widthSet+"px"
696.                }, 1500 );
697.            }
698.        }
699. 
700.        function modViewCloseBtEvent() {
701.            clickOnFlag = false;
702.            $('#info_sDay_input').val("");
703.            $('#info_eDay_input').val("");
704.            $('#info_subject_input').val("");
705.            $('#info_subject_content').val("");
706.            $('#info_subject_memo').val("");
707.            $('#in_idx').val("");
708. 
709.            $('.info_view_body').animate({
710.                height: "105px"
711.            }, 500);
712. 
713.            for(var i=1;i<=lastDay;i++){
714.                $('.inDayMini_'+i).removeAttr('style');
715.            }
716.            toDayCheck();
717.        }
718. 
719.        function modDelEvent(){
720.            if (confirm("정말 삭제하시겠습니까??") == true){    //확인
721.                var s_idx = $('#in_idx').val();
722.                var url = "스케쥴 삭제 처리하는 url 경로"
723.                $('.lodingMsg').animate({
724.                    opacity: "1"
725.                }, 500);
726.                $.ajax({     
727.                    type:"POST",
728.                    url:url,
729.                    data:{
730.                        user_id : _user_id,
731.                        s_idx : s_idx,
732.                    },
733.                    success:function(args){
734.                        if(args){
735.                            LoadDdayList();
736.                            LoadSchedule();
737.                            $('.info_view_body div input[type=text]').val("");
738.                            $('.info_view_body div textarea').val("");
739.                            modViewCloseBtEvent();
740.                            $('[class="rightSaveBt"]').css("display", "none");
741.                        }
742.                        $('.lodingMsg').animate({
743.                            opacity: "0"
744.                        }, 500);
745.                    },
746.                    error:function(e){ 
747.                        alert(e.responseText); 
748.                    }
749.                });
750.            }else{   //취소
751.                return false;
752.            }
753.        }
754. 
755.        function modViewUpdateEvent() {
756.            var s_day = $('#info_sDay_input').val();
757.            var e_day = $('#info_eDay_input').val();
758.            var subject = $('#info_subject_input').val();
759.            var content = $('#info_subject_content').val();
760.            var memo = $('#info_subject_memo').val();
761.            var s_idx = $('#in_idx').val();
762. 
763.            var url = "스케쥴 업데이트 및 수정처리하는 url 경로";
764.            $('.lodingMsg').animate({
765.                opacity: "1"
766.            }, 500);
767.            $.ajax({     
768.                type:"POST",
769.                url:url,
770.                data:{
771.                    user_id : _user_id,
772.                    subject : subject,
773.                    content : content,
774.                    sdate : s_day,
775.                    edate : e_day,
776.                    memo : memo,
777.                    s_idx : s_idx,
778.                },     
779.                success:function(args){
780.                    if(args){
781.                        LoadSchedule();
782.                    }else{
783.                        clearInput();
784.                        init();
785.                    }
786.                    $('.lodingMsg').animate({
787.                        opacity: "0"
788.                    }, 500);
789.                },
790.                error:function(e){ 
791.                    alert(e.responseText); 
792.                }
793.            });
794.        }
795. 
796.        function showObj(obj) {
797.            var str = "";
798.                for(key in obj) {
799.                str += key+"="+obj[key]+"\n";
800.            }
801.            alert(str);
802.            return;
803.        }
804. 
805.        function PrepNextDay(flag){
806.            if(!clickOnFlag){
807.                return false;
808.            }
809.             
810.            var s_day_yy = Number($('#info_sDay_input').val().substring(0,4));
811.            var s_day_mm = Number($('#info_sDay_input').val().substring(4,6));
812.            var s_day_dd = Number($('#info_sDay_input').val().substring(6,8));
813. 
814.            var e_day_yy = Number($('#info_eDay_input').val().substring(0,4));
815.            var e_day_mm = Number($('#info_eDay_input').val().substring(4,6));
816.            var e_day_dd = Number($('#info_eDay_input').val().substring(6,8));
817. 
818.            var InlastDay = 0;
819.            InlastDay = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
820.            switch(Number(flag)){
821.                case 1:
822.                    if(1 >= s_day_dd){
823.                        if(1 >= s_day_mm){
824.                            s_day_yy -= 1;
825.                            s_day_mm = 12;
826.                        }else{
827.                            s_day_mm -= 1;
828.                            s_day_dd = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
829.                        }
830.                    }else{
831.                        s_day_dd -= 1;
832.                    }
833.                    if(10 > s_day_mm) {
834.                        s_day_mm = "0"+s_day_mm;
835.                    }
836.                    if(10 > s_day_dd) {
837.                        s_day_dd = "0"+s_day_dd;
838.                    }
839.                    $('#info_sDay_input').val(s_day_yy+""+s_day_mm+""+s_day_dd);
840.                    break;
841.                case 2:
842.                    InlastDay = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
843.                    if(InlastDay <= s_day_dd){
844.                        s_day_dd = 1;
845.                        if(12 <= s_day_mm){
846.                            s_day_yy += 1;
847.                            s_day_mm = 1;
848.                        }else{
849.                            s_day_mm += 1;
850.                        }
851.                    }else {
852.                        s_day_dd += 1;
853.                    }
854.                    if(10 > s_day_mm) {
855.                        s_day_mm = "0"+s_day_mm;
856.                    }
857.                    if(10 > s_day_dd) {
858.                        s_day_dd = "0"+s_day_dd;
859.                    }
860.                    $('#info_sDay_input').val(s_day_yy+""+s_day_mm+""+s_day_dd);
861.                    break;
862. 
863.                case 3:
864.                    if(1 >= e_day_dd){
865.                        if(1 >= e_day_mm){
866.                            e_day_yy -= 1;
867.                            e_day_mm = 12;
868.                        }else{
869.                            e_day_mm -= 1;
870.                            e_day_dd = ( new Date( e_day_yy, e_day_mm, 0) ).getDate();
871.                        }
872.                    }else{
873.                        e_day_dd -= 1;
874.                    }
875.                    if(10 > e_day_mm) {
876.                        e_day_mm = "0"+e_day_mm;
877.                    }
878.                    if(10 > e_day_dd) {
879.                        e_day_dd = "0"+e_day_dd;
880.                    }
881.                    $('#info_eDay_input').val(e_day_yy+""+e_day_mm+""+e_day_dd);
882.                    break;
883.                case 4:
884.                    InlastDay = ( new Date( e_day_yy, e_day_mm, 0) ).getDate();
885.                    if(InlastDay <= e_day_dd){
886.                        e_day_dd = 1;
887.                        if(12 <= e_day_mm){
888.                            e_day_yy += 1;
889.                            e_day_mm = 1;
890.                        }else{
891.                            e_day_mm += 1;
892.                        }
893.                    }else {
894.                        e_day_dd += 1;
895.                    }
896.                    if(10 > e_day_mm) {
897.                        e_day_mm = "0"+e_day_mm;
898.                    }
899.                    if(10 > e_day_dd) {
900.                        e_day_dd = "0"+e_day_dd;
901.                    }
902.                    $('#info_eDay_input').val(e_day_yy+""+e_day_mm+""+e_day_dd);
903.                    break;
904.            }
905.        }
906.    </script>



   3-1. HTML 부분 ( 클릭하면 소스가 보여요 )
view source
print?
01.<body>
02.        <div class="schedule_info">
03.            <div class="info_subject"><b>제목</b></div><hr><div class="info_content">내용</div>
04.        </div>
05.        <div class="titleHead">
06.            <div class="TotalView">
07.                <div class="info_body">
08.                    <b>현재 진행중인 스케쥴 </b><font style="font-size: 9px; color: gray;"> (지난 프로젝트는 표기하지 않습니다.)</font>
09.                    <hr>
10.                    <div class="info_msg"></div>
11.                </div>
12.            </div>
13.        </div>
14.        <div class="schedule_body">
15.            <div class="schedule_addbt_lay">
16.                <input type='button' class='OnOffbt' onclick='schedule_add_view();' value='Open Add Schedule'/>
17.            </div>
18.            <div class="lodingMsg">로딩중...</div>
19.            <div class="info">
20.                <div class="PrepBt"><</div>
21.                <div class="TodayView">2016-04-26</div>
22.                <div class="NextBt">></div>
23.            </div>
24.            <div class="inScheduleView"></div>
25.            <div class="inDay"></div>
26.            <div class="addSchedule" style="display:none">
27.                <div><font style="font-size: 13px; color: #F38080;">> 아래 날짜를 선택해주세요.</font></div>
28.                <div class="addLineView" style='height: 28px;'></div>
29.                <div>기간 : <input type="text" id="s_day" name="s_day" size="8" value="" /> ~ <input type="text" id="e_day" name="e_day" size="8" value="" /></div>
30.                <div>
31.                    제목 : <input type="text" id="s_subject" name="s_subject" value="" />
32.                </div>
33.                <div>
34.                    간단설명 : <input type="text" id="s_content" name="s_content" value="" />
35.                </div>
36.                <div>
37.                    <input type='text' id='inputColor' name='inputColor' size='7' onclick='colorPickUp(); return false;' value=''/><div class='ColorView'></div>
38.                    <div class="ColorPikerBody" style="display:none">
39.                        <div class='ColorPik'></div>
40.                    </div>
41.                </div>
42.                <div style="padding-top:3px;">
43.                    <input type="button" id="s_save" name="s_save" onclick="schedule_add();" value="InSave" /> <input type="button" id="s_clear" name="s_clear" onclick="clearInput();" value="Clear" />
44.                </div>
45.            </div>
46.            <div class="info_veiw_bk">
47.                <div class="info_view_body">
48.                    <input type="hidden" id="in_idx" name="in_idx" value="" />
49.                    <div class="mod_subject">
50.                        기간 : <input type="button" onclick="PrepNextDay(1); return false;" value="<" /><input type="text" id="info_sDay_input" name="info_sDay_input" size="8" value="" /><input type="button" onclick="PrepNextDay(2); return false;" value=">" /> ~ <input type="button" onclick="PrepNextDay(3); return false;" value="<" /><input type="text" id="info_eDay_input" name="info_eDay_input" size="8" value="" /><input type="button" onclick="PrepNextDay(4); return false;" value=">" />
51.                        <div class="rightSaveBt" id="closeBt" onclick='modDelEvent(); return false;'>Del</div>
52.                        <div class="rightSaveBt" onclick="modViewUpdateEvent(); return false;" style="margin-left: 0px; margin-right: 00px;">Save</div>
53.                    </div>
54.                    <div class="mod_subject">
55.                        제목 : <input type="text" id="info_subject_input" name="info_subject_input" size="80" value="" />
56.                    </div>
57.                    <div class="mod_Content">
58.                        간단설명 : <input type="text" id="info_subject_content" name="info_subject_content" size="80" value="" />
59.                    </div>
60.                    <div class="mod_memo">
61.                        내용<br><textarea id="info_subject_memo" name="info_subject_memo" value="" /></textarea>
62.                    </div>
63.                </div>
64.            </div>
65.        </div>
66.    </body>





   3-2 처리단부분

view source
print?
01./*
02.추가 삭제 수정 리스트 가져오는 모든 주고받는 형식은 하단에 정의되로 스트링값으로 주고 받고 있어요
03.***********************************************************************
04.    splitScheduleString[0][0] = subject;    스케쥴 제목이 와야되요
05.    splitScheduleString[0][1] = content;    스케쥴 내용이 오구요
06.    splitScheduleString[0][2] = s_date;     스케쥴 시작날짜
07.    splitScheduleString[0][3] = e_date;     스케쥴 종료날짜
08.    splitScheduleString[0][4] = color;      스케쥴 표시할 칼라
09.    splitScheduleString[0][5] = s_idx;      스케쥴 고유 idx
10.    splitScheduleString[0][6] = s_memo;     스케쥴 세부 내용
11.***********************************************************************
12.ex) 제목@|@내용@|@시작날짜@|@종료날짜@|@스케쥴칼라@|@고유idx@|@세부내용&|&제목@|@내용@|@시작날짜@|@종료날짜@|@스케쥴칼라@|@고유idx@|@세부내용
13.*/








궁금하신거 있으면 댓글 ㄱㄱ



저작자표시

'Programing > Web' 카테고리의 다른 글

( CSS ) 심플한 드랍다운 메뉴 만들기  (10) 2016.05.10
( CSS ) 아주심플하면서 이쁜 메뉴 만들기!  (0) 2016.05.10
( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트  (0) 2016.04.27
( HTML & CSS ) 이쁜 메뉴만들기 두번째 !!  (0) 2016.04.26
( CSS )( HTML ) 이쁜 메뉴 만들기  (0) 2016.04.22
,

티스토리툴바