'web' 태그의 글 목록

web에 해당되는 글 7건

2016.05.02 ( Web ) 스케쥴 관리 웹 만들기

( 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 부분 (클릭하면 소스가 나와요)

 
<!-- css style -->
	<style>
		html, body {
			margin: 0;
		}
	
		.schedule_body {
			width: 890px;
		}

		.schedule_info {
			float: left;
		}

		.titleHead {
			width: 100%;
		}

		.schedule_addbt_lay {
			float: right;
			padding-right: 130px;
			padding-top: 10px;
		}

		.TotalView {
			width: 310px;
			height: 100px;
			border: 1px double black;;
			margin-left: 10px;
			margin-top: 10px;
		}
		.TotalView.right{
			margin-left: 100px;
		}

		.TotalView .info_body {
			font-size: 13px;
			vertical-align: middle;
			margin-top: 2px;
		}

		.TotalView .info_body div {
			line-height: 21px;
		    vertical-align: middle;
		}

		.lodingMsg {
			width: 100px;
			height: 20px;
			border: 1px;
			border-style: double;
			float: left;
			line-height: 20px;
			vertical-align: middle;
			padding-left: 10px;
			font-size: 13px;
			margin-top: 10px;
			margin-left: 10px;
			opacity: 0;
		}

		.info_veiw_bk {
			width: 100%;
		}

		.info_veiw_bk .info_view_body {
			width: 740px;
			height: 105px;
			/* height: 350px; */
			margin-left: 10px;
			margin-top: 10px;
			border: 1px;
			border-style: double;
			overflow: hidden;
		}

		.info_veiw_bk .info_view_body div {
			margin-left: 15px;
			padding-top: 10px;
		}

		.info_veiw_bk .info_view_body div > .rightSaveBt {
			float: right;
			width: 40px;
			height: 20px;
			border: 1px;
			border-style: dotted;
			cursor: pointer;
			font-size: 14px;
			margin-top: 0px;
			margin-right: 10px;
			padding-top: 0px;
			line-height: 20px;
			text-align: center;
			vertical-align: middle;
			display: none;
		}

		.info_veiw_bk .info_view_body div > #info_sDay_input {
			text-align: center;
		}

		.info_veiw_bk .info_view_body div > #info_eDay_input {
			text-align: center;
		}

		.info_veiw_bk .info_view_body div > .rightSaveBt:hover {
			background-color: #ffff00;
		}

		.info_veiw_bk .info_view_body #info_subject_memo {
			width: 638px;
			height: 200px;
			margin-left: 30px;
		}

		.schedule_info {
			width: 300px;
			height: 90px;
			background-color: #ffffff;
			border: 1px;
			border-style: double;
			position: absolute;
			z-index: 99;
			display: none;
		}

		.schedule_info .info_subject {
		    font-size: 14px;
		    font-family: -webkit-body;
			margin-left: 15px;
			margin-top: 5px;
		}

		.schedule_info .info_content {
			font-size: 13px;
		    font-family: -webkit-body;
			margin-left: 10px;
			margin-top: 5px;
		}

		.schedule_info .info_content p {
			margin-top: 0px;
			margin-bottom: 2px;
		}

		.schedule_body .inDay {
			padding-left: 10px;
			height: 30px;
		}

		.schedule_body .inDay > div {
			width: 22px;
			height: 22px;
			line-height: 22px;
			vertical-align: middle;
			text-align: center;
			float: left;
			border: 1px;
			border-style: dotted;

		}

		.schedule_body .addSchedule {
			width: 100%;
			height: 220px;
			padding-top: 10px;
			border-top: 1px;
			border-bottom: 1px;
			border-style: dotted;
			border-left: 0px;
			border-right: 0px;
			background-color: #EFEFEF;
		}

		.schedule_body .addSchedule div {
			margin-left: 10px;
			width: 95%;
			line-height: 28px;
			vertical-align: middle;
		}

		.schedule_body .addSchedule .addLineView #inAddDayMini {
			height: 22px;
			width: 22px;
			line-height: 22px;
			vertical-align: middle;
			text-align: center;
			float: left;
			border: 1px;
			border-style: dotted;
			margin-left: 0px;
			cursor: pointer;
		}

		.schedule_body .inScheduleView {
			width: 99%;
			height: 141px;
			margin-left: 10px;
			position: relative;
		}

		.schedule_body .inScheduleView #inSchDiv {
			width: 0px;
			height: 25px;
			position: absolute;
			line-height: 25px;
			text-align: center;
			vertical-align: middle;
			overflow: hidden;
			cursor: pointer;
			border: 1px double #A2A2A2;
		    border-top-right-radius: 5px;
		    border-bottom-left-radius: 5px;
			border-top-left-radius: 5px;
		    border-bottom-right-radius: 5px;
		}

		.schedule_body .inScheduleView #InSchedule {
			width: 23px;
			height: 100%;
			float: left;
			border-right: 1px;
			border-left: 0px;
			border-top: 0px;
			border-bottom: 0px;
			border-style: dotted;
		}

		.schedule_body .inScheduleView #InSchedule.last {
			border-right: 0px;
		}

		.schedule_body .info {
			width: 164px;
			height: 50px;
			line-height: 50px;
			vertical-align: middle;
			padding-right: 180px;
			margin: auto;
		}

		.schedule_body .info > div {
			float: left;
			width: 22px;
			height: 22px;
			cursor: pointer;
			padding-left: 10px;
		}

		.schedule_body .info .TodayView {
			width: 100px;
			cursor: context-menu;
			text-align: center;
			padding-left: 0px;
		}

		.schedule_body .addSchedule div .ColorPikerBody {
			width: 350px;
			height: 176px;
			border: 1px;
			border-style: dotted;
			margin-top: 5px;
		}

		.schedule_body .addSchedule div .ColorPik {
			margin: auto;
			width: 350px;
		}

		.schedule_body .addSchedule div .ColorPik div {
			width: 35px;
			height: 35px;
			line-height: 35px;
			margin: 0;
			float: left;
			cursor: pointer;
		}

		.schedule_body .addSchedule div .ColorView {
			width: 28px;
			height: 28px;
			float: left;
			margin-right: 10px;
			border: 1px;
			border-style: dotted;
		}
	</style>

3-1. JS 부분 ( 클릭하면 소스가 나와요 )

 
<!-- script -->
	<script src='/_Js/JQuery/jquery-2.2.2.js'></script>
	<script>
		var _user_id = "<?php echo $_user_id;?>";
		var init_day = new Date();
		var in_year = init_day.getFullYear();
		var in_month = init_day.getMonth() + 1;
		var in_today = init_day.getDate();
		var start_day = 0;
		var end_day = 0;
		var lastDay = 0;
		var SaveInfoScheduleArr;
		var clickOnFlag = false;
		var DdayInfoScheduleArr;
		$(function(){
			LoadDdayList();
			LoadSchedule();

			$('.PrepBt').click(function(){
				$('.inDay')[0].innerHTML = "";
				$('.addLineView')[0].innerHTML = "";
				$('.inScheduleView')[0].innerHTML = "";
				in_month -= 1;
				if(in_month == 0){
					in_month = 12;
					in_year -= 1;
				}
				if(in_month < 10){
					drawDayLine(in_year, "0"+in_month);
					drawDayAddLine(in_year, "0"+in_month);
					drawInScheduleLine(in_year, "0"+in_month);
				}else{
					drawDayLine(in_year, in_month);
					drawDayAddLine(in_year, in_month);
					drawInScheduleLine(in_year, in_month);
				}
				if($('#s_day').val() != ''){
					inBkColorChange($('#s_day').val(), $('#e_day').val());
				}
				LoadSchedule();
				modViewCloseBtEvent();
			});

			$('.NextBt').click(function(){
				$('.inDay')[0].innerHTML = "";
				$('.addLineView')[0].innerHTML = "";
				$('.inScheduleView')[0].innerHTML = "";
				in_month += 1;
				if(in_month == 13){
					in_month = 1;
					in_year += 1;
				}
				if(in_month < 10){
					drawDayLine(in_year, "0"+in_month);
					drawDayAddLine(in_year, "0"+in_month);
					drawInScheduleLine(in_year, "0"+in_month);
				}else{
					drawDayLine(in_year, in_month);
					drawDayAddLine(in_year, in_month);
					drawInScheduleLine(in_year, in_month);
				}
				if($('#s_day').val() != ''){
					inBkColorChange($('#s_day').val(), $('#e_day').val());
				}
				LoadSchedule();
				modViewCloseBtEvent();
			});
		});

		function init() {
			$('.inDay')[0].innerHTML = "";
			$('.addLineView')[0].innerHTML = "";
			$('.inScheduleView')[0].innerHTML = "";
			if(in_month < 10){
				drawDayLine(in_year, "0"+in_month);
				drawDayAddLine(in_year, "0"+in_month);
				drawInScheduleLine(in_year, "0"+in_month);
			}else{
				drawDayLine(in_year, in_month);
				drawDayAddLine(in_year, in_month);
				drawInScheduleLine(in_year, in_month);
			}
			toDayCheck();
		}

		function toDayCheck(){
			if(Number(in_month) == Number((init_day.getMonth()+1)) && Number(in_year) == Number(init_day.getFullYear())){
				$('.inDayMini_'+Number(in_today)).css('background-color', '#8DF6FB');
				$('.InSchedule_'+Number(in_today)).css('background-color', '#8DF6FB');
			}
			getInputDayLabel(in_year, in_month);
		}

		function getInputDayLabel(yy, mm) {
			var Getweek = new Array('일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일');
			var Gettoday = "";
			for(var i=1;i<=lastDay;i++){
				if(mm < 10){
					if(i < 10) {
						Gettoday = new Date(yy+"-0"+mm+"-0"+i).getDay();
					}else {
						Gettoday = new Date(yy+"-0"+mm+"-"+i).getDay();
					}
				}else{
					Gettoday = new Date(yy+"-"+mm+"-"+i).getDay();
				}
				if(Getweek[Gettoday] == "일요일" || Getweek[Gettoday] == "토요일"){
					$('.inDayMini_'+i).css('background-color', '#FFEBEB');
					$('.InSchedule_'+i).css('background-color', '#FFEBEB');
				}
			}
		}


		function drawDayLine(yy, mm) {
			$('.TodayView')[0].innerHTML = in_year+"-"+in_month;
			lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
			for(var i=1; i <= lastDay; i++){
				$('.inDay')[0].innerHTML += "<div class='inDayMini_"+i+"' id='inDayMini'>"+i+"</div>";
			}
		}

		function drawDayAddLine(yy, mm) {
			lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
			for(var i=1; i <= lastDay; i++){
				var dayMin = i;
				if(i < 10){
					dayMin = "0"+i;
				}
				$('.addLineView')[0].innerHTML += " <div class='inAddDayMini_"+i+"' id='inAddDayMini' tumb='"+yy+mm+dayMin+"' inPos='"+i+"'>"+i+"</div>";
			}

			$("[class^='inAddDayMini_']").hover(
				function (){
					if($(this).css("background-color") != "rgb(249, 149, 218)"){
						$(this).css("background-color", "#ffff00");
					}
				},
				function (){
					if($(this).css("background-color") != "rgb(249, 149, 218)"){
						$(this).removeAttr('style');
					}
				}
			);

			$("[class^='inAddDayMini_']").click(function(){
				schedule_add_div_click($(this));
			});
		}

		function drawInScheduleLine (yy, mm) {
			lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
			for(var i=1; i <= lastDay; i++){
				if(i == lastDay){
					$('.inScheduleView')[0].innerHTML += "<div class='InSchedule_"+i+" last' id='InSchedule'></div>";
				}else{
					$('.inScheduleView')[0].innerHTML += "<div class='InSchedule_"+i+"' id='InSchedule'></div>";
				}
			}
		}

		function schedule_add_view() {
			if($('.addSchedule').css("display") == "none"){
				$('.OnOffbt').val("Close Add Schedule");
				$('.addSchedule').css("display", "block");
			}else{
				$('.OnOffbt').val("Open Add Schedule");
				$('.addSchedule').css("display", "none");
			}
		}

		function schedule_add_div_click (obj) {
			if(start_day == 0){
				obj.css("background-color", "#F995DA");
				start_day = obj.attr("tumb");
				$('#s_day').val(start_day);
			}else if(start_day == obj.attr("tumb")) {
				obj.removeAttr('style');
				start_day = 0;
				clearInput();
			}else if(start_day != 0 && start_day != obj.attr("tumb")) {
				if(Number(obj.attr("tumb")) > Number(start_day)) {				
					obj.css("background-color", "#F995DA");
					end_day = obj.attr("tumb");
					$('#e_day').val(end_day);
					inBkColorChange(start_day, end_day);
				}
			}else {

			}
		}

		function inBkColorChange(s_flag, e_flag) {
			clearAddBkColor();
			if(e_flag != '' && s_flag != '') {
				for(var i=s_flag;i<=e_flag;i++){
					$('div[tumb="'+i+'"]').css("background-color", "#F995DA");
				}
			}else if(s_flag != '' && e_flag == ''){
				$('div[tumb="'+s_flag+'"]').css("background-color", "#F995DA");
			}
		}

		function clearAddBkColor() {
			$('div[id="inAddDayMini"]').removeAttr('style');
		}

		function clearInput() {
			clearAddBkColor();
			$('.addSchedule input[type=text]').val("");
			start_day = 0;
			end_day = 0;
			return false;
		}

		function schedule_add() {
			var url = "스케쥴 등록하는 url 경로";
			$('.lodingMsg').animate({
				opacity: "1"
			}, 500);
			$.ajax({      
				type:"POST",
				url:url, 
				data:{
					user_id : _user_id,
					subject : $('#s_subject').val(),
					content : $('#s_content').val(),	
					sdate : $('#s_day').val(),
					edate : $('#e_day').val(),
					field_color : $('#inputColor').val(),
				},
				success:function(args){
					if(args){
						LoadDdayList();
						LoadSchedule();
						schedule_add_view();
						clearInput();
					}else{
						alert("스케쥴 등록 실패.");
						LoadSchedule();
						schedule_add_view();
					}
					$('.lodingMsg').animate({
						opacity: "0"
					}, 500);
				},
				error:function(e){  
					alert(e.responseText);  
				}  
			}); 
			return false;
		}

		function colorPickUp() {
			if($('.ColorPikerBody').css("display") == "none"){
				$('.info_veiw_bk').css('padding-top', '190px');
				$('.ColorPikerBody').css("display", "block");
				$('.ColorPik')[0].innerHTML = "";
				for(var i=0; i< 5; i++){
					for(var j=0; j<10; j++){
						var InColorPick = Math.random().toString(16).replace(/.*(\w{6})/, '#$1');
						$('.ColorPik')[0].innerHTML += "<div class='cPick_1' coloTump='"+InColorPick+"' style='background-color: "+InColorPick+";''></div>";
					}
				}
				$('[class^="cPick_"]').hover(
					function(){
						$('.ColorView').css("background-color", $(this).attr("coloTump"));
						$('#inputColor').val($(this).attr("coloTump"));
					}
				);
				$('[class^="cPick_"]').click(function(){
					$('.ColorPikerBody').css("display", "none");
					$('.info_veiw_bk').css('padding-top', '0px');
					$('#inputColor').val($(this).attr("coloTump"));
				});
			}else{
				$('.info_veiw_bk').css('padding-top', '0px');
				$('.ColorPikerBody').css("display", "none");
			}
		}

		function LoadSchedule() {
			init();
			var NowDate_s = 0;
			var NowDate_e = 0;
			if(in_month < 10){
				NowDate_s = in_year+"0"+in_month+"01";
			}else{
				NowDate_s = in_year+in_month+"01";
			}
			if(in_month < 10){
				NowDate_e = in_year+"0"+in_month+lastDay;
			}else{
				NowDate_e = in_year+in_month+lastDay;
			}

			var url = "스케쥴 등록하는 url 경로";
			$('.lodingMsg').animate({
				opacity: "1"
			}, 500);
			$.ajax({      
				type:"POST",
				url:url,
				data:{
					user_id : _user_id,
					yyMonth_s: NowDate_s,
					yyMonth_e: NowDate_e,
				},      
				success:function(args){
					if(args){
						splitScheduleString(args);
					}
					$('.lodingMsg').animate({
						opacity: "0"
					}, 500);
				},
				error:function(e){  
					alert(e.responseText);  
				}
			});
		}

		function LoadDdayList() {
			var url = "스케쥴 오늘날짜에서부터 D-day 리스트를 가져오는 url 경로";
			var now_year = Number(init_day.getFullYear());
			var now_month = Number(init_day.getMonth() + 1);
			var now_today = Number(init_day.getDate());
			var hitNow = "";

			
			if(10 > now_month){
				now_month = "0"+now_month;
			}
			if(10 > now_today){
				now_today = "0"+now_today;
			}
			hitNow = now_year+""+now_month+""+now_today;

			$('.lodingMsg').animate({
				opacity: "1"
			}, 500);
			$.ajax({
				type:"POST",
				url:url,
				data:{
					user_id : _user_id,
					toDay: hitNow,
				},      
				success:function(args){
					if(args){
						splitScheduleString2(args);
					}
					$('.lodingMsg').animate({
						opacity: "0"
					}, 500);
				},
				error:function(e){  
					alert(e.responseText);  
				}
			});
		}


		/*
		***********************************************************************
			splitScheduleString[0][0] = subject;	스케쥴 제목이 와야되요
			splitScheduleString[0][1] = content;	스케쥴 내용이 오구요
			splitScheduleString[0][2] = s_date;		스케쥴 시작날짜
			splitScheduleString[0][3] = e_date;		스케쥴 종료날짜
			splitScheduleString[0][4] = color;		스케쥴 표시할 칼라
			splitScheduleString[0][5] = s_idx;		스케쥴 고유 idx
			splitScheduleString[0][6] = s_memo;		스케쥴 세부 내용
		***********************************************************************
		*/
		function splitScheduleString(stringTo) {
			var InSchArr = stringTo.split('&|&');
			var countArr = 0;
			SaveInfoScheduleArr = "";
			SaveInfoScheduleArr = new Array();

			for(var i=0;i<InSchArr.length;i++){
				var tempArr = new Array();
				tempArr = InSchArr[i].split('@|@');
				
				if( Number(tempArr[2]) >= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[2]) <= Number($('[inpos="'+lastDay+'"]').attr("tumb")) ){
					SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
					countArr += 1;
				}else if( Number(tempArr[3]) >= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[3]) <= Number($('[inpos="'+lastDay+'"]').attr("tumb")) ){
					SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
					countArr += 1;
				}else if(Number(tempArr[2]) <= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[3]) >= Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
					SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
					countArr += 1;
				}
			}
			ViewheightChange();
			DrawInfoSchedule();
		}

		function splitScheduleString2(stringTo) {
			var InSchArr = stringTo.split('&|&');
			var countArr = 0;
			DdayInfoScheduleArr = "";
			DdayInfoScheduleArr = new Array();

			for(var i=0;i<InSchArr.length;i++){
				var tempArr = new Array();
				tempArr = InSchArr[i].split('@|@');

				DdayInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
				countArr += 1;
			}
			info_msg();
		}

		function ViewheightChange() {
			var heightSet = (SaveInfoScheduleArr.length * 33) + 1;
				
			if(heightSet < 141){
				$(".inScheduleView").animate({
					height: "141px"
				}, 1000 );
			}else{
				$(".inScheduleView").animate({
					height: heightSet+"px"
				}, 1000 );
			}
		}

		function info_msg() {
			var now = new Date();
			var then = 0;

			var now_year = Number(init_day.getFullYear());
			var now_month = Number(init_day.getMonth() + 1);
			var now_today = Number(init_day.getDate());
			var hitNow = "";

			
			if(10 > now_month){
				now_month = "0"+now_month;
			}
			if(10 > now_today){
				now_today = "0"+now_today;
			}
			hitNow = now_year+""+now_month+""+now_today;
			$('.info_msg')[0].innerHTML = "";

			var count_info = 0;
			for(var i=1; i<=DdayInfoScheduleArr.length;i++){
				if(Number(DdayInfoScheduleArr[i-1][3]) >=  Number(hitNow)){
					
					then = new Date(YearMonthDay2(DdayInfoScheduleArr[i-1][3]));
					var gap = now.getTime() - then.getTime();
					gap = Math.floor(gap / (1000 * 60 * 60 * 24)) * -1;
					if(i%2 == 0){
						$('.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>";
					}else{
						$('.info_msg')[0].innerHTML += "<div>  "+DdayInfoScheduleArr[i-1][0]+"<div style='float: right; padding-right:10px'>D-day : "+gap+"</div></div>";
					}
					count_info += 1;
				}
			}
			
			var TotalViewHeight = 40 + (count_info * 21);
			$('.TotalView').css("height", TotalViewHeight+"px");
			$('.titleHead').css("height", (TotalViewHeight+20)+"px");

		}

		function YearMonthDay2(inDay){
			var yy = inDay.substring(0,4);
			var mm = inDay.substring(4,6);
			var dd = inDay.substring(6,8);

			return yy+"-"+mm+"-"+dd;
		}

		function DrawInfoSchedule(){
			for(var i=1; i<=SaveInfoScheduleArr.length;i++){
				var left = ($('[tumb="'+SaveInfoScheduleArr[(i-1)][2]+'"]').attr('inpos') * 24) - 24;
				var color_set = SaveInfoScheduleArr[(i-1)][4];
				$('.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>";
			}
			$('[class^=inSchDiv_]').hover(
				function(){
					var s_day_val = 0;
					var e_day_val = 0;
					var stringSet = $(this).css("background-color");
					stringSet = stringSet.slice(3,-1)+", 0.6)";
					$(this).css("background-color", "rgba"+stringSet);
					if(!clickOnFlag){
						s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
						e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));

						if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
							s_day_val = 0;
						}
						if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
							e_day_val = Number(lastDay);
						}

						infoSet($(this));
						
						$('.schedule_info').css("display", "block");
						for(var i=s_day_val;i<=e_day_val;i++){
							$('.inDayMini_'+i).css("background-color", "yellow");
						}
					}
				},
				function(){
					var stringSet = $(this).css("background-color");
					var stringSetArr = stringSet.split(", ");
					var stringSet = stringSetArr[0]+", "+stringSetArr[1]+", "+stringSetArr[2]+",  1.0)";

					$(this).css("background-color", stringSet);
					if(!clickOnFlag){
						var s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
						var e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
						
						if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
							s_day_val = 0;
						}
						if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
							e_day_val = Number(lastDay);
						}
						
						$('.schedule_info').css("display", "none");

						for(var i=s_day_val;i<=e_day_val;i++){
							$('.inDayMini_'+i).removeAttr('style');
						}
						toDayCheck();
					}
				}
			);

			$('[class^=inSchDiv_]').click(function(){
				/* 여기 작업해야됨!!!!!!!! */
				if(SaveInfoScheduleArr[$(this).attr('infotumb')][5] == $('#in_idx').val()){
					modViewCloseBtEvent();
					if($(this).css("border-right") == "0px none rgb(0, 0, 0)"){
						$(this).css("border-left", "1px double #A2A2A2");
						$(this).css("border-top", "1px double #A2A2A2");
						$(this).css("border-bottom", "1px double #A2A2A2");
					}else if($(this).css("border-left") == "0px none rgb(0, 0, 0)"){
						$(this).css("border-right", "1px double #A2A2A2");
						$(this).css("border-top", "1px double #A2A2A2");
						$(this).css("border-bottom", "1px double #A2A2A2");
					}else{
						$(this).css("border", "1px double #A2A2A2");
					}
					$('[class="rightSaveBt"]').css("display", "none");
					return false;
				}else{
					borderClear();
				}

				if($(this).css("border-right") == "0px none rgb(0, 0, 0)"){
					$(this).css("border-left", "2px groove yellow");
					$(this).css("border-top", "2px groove yellow");
					$(this).css("border-bottom", "2px groove yellow");
				}else if($(this).css("border-left") == "0px none rgb(0, 0, 0)"){
					$(this).css("border-right", "2px groove yellow");
					$(this).css("border-top", "2px groove yellow");
					$(this).css("border-bottom", "2px groove yellow");
				}else{
					$(this).css("border", "2px");
					$(this).css("border-style", "groove");
					$(this).css("border-color", "yellow");
				}

				$('[class="rightSaveBt"]').css("display", "block");

				clickOnFlag = true;
				$('.schedule_info').css("display", "none");
				infoSet($(this));
				var s_idx = SaveInfoScheduleArr[$(this).attr('infotumb')][5];
				$('#in_idx').val(s_idx);
				$('.info_view_body').animate({
					height: "350px"
				}, 500);

				for(var i=1;i<=lastDay;i++){
					$('.inDayMini_'+i).removeAttr('style');
				}

				s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
				e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));

				if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
					s_day_val = 0;
				}
				if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
					e_day_val = Number(lastDay);
				}

				toDayCheck();
				for(var i=s_day_val;i<=e_day_val;i++){
					$('.inDayMini_'+i).css("background-color", "yellow");
				}
			});
			inAnimation();
		}

		function borderClear(){
			for(var i=0;i<SaveInfoScheduleArr.length;i++){
				if($('div[infotumb="'+i+'"]').css("border-right") == "0px none rgb(0, 0, 0)"){
					$('div[infotumb="'+i+'"]').css("border-left", "1px double #A2A2A2");
					$('div[infotumb="'+i+'"]').css("border-top", "1px double #A2A2A2");
					$('div[infotumb="'+i+'"]').css("border-bottom", "1px double #A2A2A2");
				}else if($('div[infotumb="'+i+'"]').css("border-left") == "0px none rgb(0, 0, 0)"){
					$('div[infotumb="'+i+'"]').css("border-right", "1px double #A2A2A2");
					$('div[infotumb="'+i+'"]').css("border-top", "1px double #A2A2A2");
					$('div[infotumb="'+i+'"]').css("border-bottom", "1px double #A2A2A2");
				}else{
					$('div[infotumb="'+i+'"]').css("border", "1px double #A2A2A2");
				}
			}
		}

		function infoSet(obj){
			var SubjectVal = SaveInfoScheduleArr[obj.attr('infotumb')][0];
			var ContentVal = SaveInfoScheduleArr[obj.attr('infotumb')][1];
			var s_date = YearMonthDay(SaveInfoScheduleArr[obj.attr('infotumb')][2]);
			var e_date = YearMonthDay(SaveInfoScheduleArr[obj.attr('infotumb')][3]);
		
			$('.info_subject')[0].innerHTML = "<b>"+SubjectVal+"</b>";
			$('.info_content')[0].innerHTML = "<p>"+s_date+" ~ "+e_date+"</p><p>"+ContentVal+"</p>";

			$('#info_sDay_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][2]);
			$('#info_eDay_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][3]);
			$('#info_subject_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][0]);
			$('#info_subject_content').val(SaveInfoScheduleArr[obj.attr('infotumb')][1]);
			$('#info_subject_memo').val(SaveInfoScheduleArr[obj.attr('infotumb')][6]);


			$(document).mousemove(function(e){
				if(obj.attr('infotumb') > 2){
					if((e.pageX+5) < 610){
						$('.schedule_info').css('left', e.pageX+5);
						$('.schedule_info').css('top', e.pageY);
					}else{
						$('.schedule_info').css('left', e.pageX-310);
						$('.schedule_info').css('top', e.pageY);
					}
				}else{
					if((e.pageX+5) < 610){
						$('.schedule_info').css('left', e.pageX+5);
						$('.schedule_info').css('top', e.pageY-90);
					}else{
						$('.schedule_info').css('left', e.pageX-310);
						$('.schedule_info').css('top', e.pageY-90);
					}
				}
			});

		}

		function YearMonthDay(inDay){
			var yy = inDay.substring(0,4);
			var mm = inDay.substring(4,6);
			var dd = inDay.substring(6,8);

			return yy+"년 "+mm+"월 "+dd+"일";
		}

		function inAnimation() {
			for(var i=1; i<=SaveInfoScheduleArr.length;i++){
				var s_setPos = 0;
				var e_setPos = 0;

				if(Number(SaveInfoScheduleArr[(i-1)][2]) < Number($('[inpos="1"]').attr("tumb"))){
					s_setPos = $('[inpos="1"]').attr('inpos');

					$('.inSchDiv_'+i).css("border-left", "0px");
					$('.inSchDiv_'+i).css("border-top-left-radius", "0px");
					$('.inSchDiv_'+i).css("border-bottom-left-radius", "0px");
				}else{
					s_setPos = $('[tumb="'+SaveInfoScheduleArr[(i-1)][2]+'"]').attr('inpos');
				}

				if(Number(SaveInfoScheduleArr[(i-1)][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
					e_setPos = $('[inpos="'+lastDay+'"]').attr('inpos');

					$('.inSchDiv_'+i).css("border-right", "0px");
					$('.inSchDiv_'+i).css("border-top-right-radius", "0px");
					$('.inSchDiv_'+i).css("border-bottom-right-radius", "0px");
				}else{
					e_setPos = $('[tumb="'+SaveInfoScheduleArr[(i-1)][3]+'"]').attr('inpos');
				}

				var widthSet = ((e_setPos - s_setPos)*24) + 21;
				$(".inSchDiv_"+i).animate({
					width: widthSet+"px"
				}, 1500 );
			}
		}

		function modViewCloseBtEvent() {
			clickOnFlag = false;
			$('#info_sDay_input').val("");
			$('#info_eDay_input').val("");
			$('#info_subject_input').val("");
			$('#info_subject_content').val("");
			$('#info_subject_memo').val("");
			$('#in_idx').val("");

			$('.info_view_body').animate({
				height: "105px"
			}, 500);

			for(var i=1;i<=lastDay;i++){
				$('.inDayMini_'+i).removeAttr('style');
			}
			toDayCheck();
		}

		function modDelEvent(){
			if (confirm("정말 삭제하시겠습니까??") == true){    //확인
				var s_idx = $('#in_idx').val();	
				var url = "스케쥴 삭제 처리하는 url 경로"
				$('.lodingMsg').animate({
					opacity: "1"
				}, 500);
				$.ajax({      
					type:"POST",
					url:url,
					data:{
						user_id : _user_id,
						s_idx : s_idx,
					},
					success:function(args){
						if(args){
							LoadDdayList();
							LoadSchedule();
							$('.info_view_body div input[type=text]').val("");
							$('.info_view_body div textarea').val("");
							modViewCloseBtEvent();
							$('[class="rightSaveBt"]').css("display", "none");
						}
						$('.lodingMsg').animate({
							opacity: "0"
						}, 500);
					},
					error:function(e){  
						alert(e.responseText);  
					}
				});	
			}else{   //취소
				return false;
			}
		}

		function modViewUpdateEvent() {
			var s_day = $('#info_sDay_input').val();
			var e_day = $('#info_eDay_input').val();
			var subject = $('#info_subject_input').val();
			var content = $('#info_subject_content').val();
			var memo = $('#info_subject_memo').val();
			var s_idx = $('#in_idx').val();

			var url = "스케쥴 업데이트 및 수정처리하는 url 경로";
			$('.lodingMsg').animate({
				opacity: "1"
			}, 500);
			$.ajax({      
				type:"POST",
				url:url,
				data:{
					user_id : _user_id,
					subject : subject,
					content : content,
					sdate : s_day,
					edate : e_day,
					memo : memo,
					s_idx : s_idx,
				},      
				success:function(args){
					if(args){
						LoadSchedule();
					}else{
						clearInput();
						init();
					}
					$('.lodingMsg').animate({
						opacity: "0"
					}, 500);
				},
				error:function(e){  
					alert(e.responseText);  
				}
			});	
		}

		function showObj(obj) {
			var str = "";
				for(key in obj) {
				str += key+"="+obj[key]+"\n";
			}
			alert(str);
			return;
		}

		function PrepNextDay(flag){
			if(!clickOnFlag){
				return false;
			}
			
			var s_day_yy = Number($('#info_sDay_input').val().substring(0,4));
			var s_day_mm = Number($('#info_sDay_input').val().substring(4,6));
			var s_day_dd = Number($('#info_sDay_input').val().substring(6,8));

			var e_day_yy = Number($('#info_eDay_input').val().substring(0,4));
			var e_day_mm = Number($('#info_eDay_input').val().substring(4,6));
			var e_day_dd = Number($('#info_eDay_input').val().substring(6,8));

			var InlastDay = 0;
			InlastDay = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
			switch(Number(flag)){
				case 1:
					if(1 >= s_day_dd){
						if(1 >= s_day_mm){
							s_day_yy -= 1;
							s_day_mm = 12;
						}else{
							s_day_mm -= 1;
							s_day_dd = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
						}
					}else{
						s_day_dd -= 1;
					}
					if(10 > s_day_mm) {
						s_day_mm = "0"+s_day_mm;
					}
					if(10 > s_day_dd) {
						s_day_dd = "0"+s_day_dd;
					}
					$('#info_sDay_input').val(s_day_yy+""+s_day_mm+""+s_day_dd);
					break;
				case 2:
					InlastDay = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
					if(InlastDay <= s_day_dd){
						s_day_dd = 1;
						if(12 <= s_day_mm){
							s_day_yy += 1;
							s_day_mm = 1;
						}else{
							s_day_mm += 1;
						}
					}else {
						s_day_dd += 1;
					}
					if(10 > s_day_mm) {
						s_day_mm = "0"+s_day_mm;
					}
					if(10 > s_day_dd) {
						s_day_dd = "0"+s_day_dd;
					}
					$('#info_sDay_input').val(s_day_yy+""+s_day_mm+""+s_day_dd);
					break;

				case 3:
					if(1 >= e_day_dd){
						if(1 >= e_day_mm){
							e_day_yy -= 1;
							e_day_mm = 12;
						}else{
							e_day_mm -= 1;
							e_day_dd = ( new Date( e_day_yy, e_day_mm, 0) ).getDate();
						}
					}else{
						e_day_dd -= 1;
					}
					if(10 > e_day_mm) {
						e_day_mm = "0"+e_day_mm;
					}
					if(10 > e_day_dd) {
						e_day_dd = "0"+e_day_dd;
					}
					$('#info_eDay_input').val(e_day_yy+""+e_day_mm+""+e_day_dd);
					break;
				case 4:
					InlastDay = ( new Date( e_day_yy, e_day_mm, 0) ).getDate();
					if(InlastDay <= e_day_dd){
						e_day_dd = 1;
						if(12 <= e_day_mm){
							e_day_yy += 1;
							e_day_mm = 1;
						}else{
							e_day_mm += 1;
						}
					}else {
						e_day_dd += 1;
					}
					if(10 > e_day_mm) {
						e_day_mm = "0"+e_day_mm;
					}
					if(10 > e_day_dd) {
						e_day_dd = "0"+e_day_dd;
					}
					$('#info_eDay_input').val(e_day_yy+""+e_day_mm+""+e_day_dd);
					break;
			}
		}
	</script>

3-1. HTML 부분 ( 클릭하면 소스가 보여요 )

 
<body>
		<div class="schedule_info">
			<div class="info_subject"><b>제목</b></div><hr><div class="info_content">내용</div>
		</div>
		<div class="titleHead">
			<div class="TotalView">
				<div class="info_body">
					<b>현재 진행중인 스케쥴 </b><font style="font-size: 9px; color: gray;"> (지난 프로젝트는 표기하지 않습니다.)</font>
					<hr>
					<div class="info_msg"></div>
				</div>
			</div>
		</div>
		<div class="schedule_body">
			<div class="schedule_addbt_lay">
				<input type='button' class='OnOffbt' onclick='schedule_add_view();' value='Open Add Schedule'/>
			</div>
			<div class="lodingMsg">로딩중...</div>
			<div class="info">
				<div class="PrepBt"><</div>
				<div class="TodayView">2016-04-26</div>
				<div class="NextBt">></div>
			</div>
			<div class="inScheduleView"></div>
			<div class="inDay"></div>
			<div class="addSchedule" style="display:none">
				<div><font style="font-size: 13px; color: #F38080;">> 아래 날짜를 선택해주세요.</font></div>
				<div class="addLineView" style='height: 28px;'></div>
				<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>
				<div>
					제목 : <input type="text" id="s_subject" name="s_subject" value="" />
				</div>
				<div>
					간단설명 : <input type="text" id="s_content" name="s_content" value="" />
				</div>
				<div>
					<input type='text' id='inputColor' name='inputColor' size='7' onclick='colorPickUp(); return false;' value=''/><div class='ColorView'></div>
					<div class="ColorPikerBody" style="display:none">
						<div class='ColorPik'></div>
					</div>
				</div>
				<div style="padding-top:3px;">
					<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" />
				</div>
			</div>
			<div class="info_veiw_bk">
				<div class="info_view_body">
					<input type="hidden" id="in_idx" name="in_idx" value="" />
					<div class="mod_subject">
						기간 : <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=">" />
						<div class="rightSaveBt" id="closeBt" onclick='modDelEvent(); return false;'>Del</div>
						<div class="rightSaveBt" onclick="modViewUpdateEvent(); return false;" style="margin-left: 0px; margin-right: 00px;">Save</div>
					</div>
					<div class="mod_subject">
						제목 : <input type="text" id="info_subject_input" name="info_subject_input" size="80" value="" />
					</div>
					<div class="mod_Content">
						간단설명 : <input type="text" id="info_subject_content" name="info_subject_content" size="80" value="" />
					</div>
					<div class="mod_memo">
						내용<br><textarea id="info_subject_memo" name="info_subject_memo" value="" /></textarea>
					</div>
				</div>
			</div>
		</div>
	</body>

3-2 처리단부분

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

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

저작자표시

'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

이전 1 2 3 4 ··· 7 다음

Xcode Programing & iOS !!

검색

검색결과 리스트

web에 해당되는 글 7건

글

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

설정

트랙백

댓글

CATEGORY

TAG

RECENT POSTS

RECENT COMMENT

NOTICE

RECENT TRACKBACK

MY LINK

ARCHIVE

calendar

COUNTER

티스토리툴바

일	월	화	수	목	금	토
	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