개발자.. 너란놈..

SELECT * FROM DUAL 
WHERE 1=1
AND 컬럼명1 = 값 
OR 컬렴명1 = 값
OR 컬럼명1 = 값
OR 컬럼명1 = 값

[2021.05.07]

Console.WriteLine으로 데이터가 보이지 않을 때 아래와 같은 문구를 사용하면

Debug 창에서 볼 수 있습니다.

System.Diagnostics.Debug.WriteLine(결과값);

/* 3개 이상 될 때 체크 후 데이터 받아와서 자동완성 리스트 만들기 (출발지) */
$("#Input_Start").keyup(function () {

    $("#searchclear_Start").toggle(Boolean($(this).val()));

    var vValue = $("#Input_Start").val();

    if (vValue.length > 2) {
        //Ajax 통신
        if (vValue != _vAutoValue) {
            _vHeight_Start = 0;
            _vSelectATag_Strat = 0;
            //_vAutoValue = "";

            fnGetJson_Port('Search_StartData', vValue);
        }
    } else {
        $("#Search_StartData").empty();
    }

    /* 값이 있을 경우 show 없을 경우 hide */
    if (0 < vValue.length) {
        $("#Search_StartData").show();
    } else {
        $("#Search_StartData").hide();
    }


    _vAutoValue = vValue;

});

//////////////////////////////////////자동완성 리스트 클릭 시 이벤트

//자동 완성 리스트 클릭 시 해당 데이터 input 박스에 넣기 (출발지)
$(document).on('click', "#Search_StartData a", function (event) {
    //현재 선택된 A태그 가져오기
    //var vGetValue = event.target.attributes.value.nodeValue; //value값 가져오기
    var vGetValue = event.target.text;   //Text

    $("#Input_Start").val(vGetValue)
    fnShowHideList("Input_Start", "Search_StartData", "none");
    $("#Search_StartData").hide();

});

//영역 포커스 잃었을 때/////////////////////////////////////////////////////////

var IsCheckMouse;

$("#Search_StartData").on('mouseenter', function () {
    IsCheckMouse = true;
});
$("#Search_StartData").on('mouseleave', function () {
    IsCheckMouse = false;
});


//focus 잃었을 경우.
$("#Input_Start").focusout(function (e) {

    //input 박스 데이터 없을 시 삭제 + 초기화
    if (IsCheckMouse == false) {
        $("#Input_Start").val("");
        $("#Search_StartData").empty();
    }
});


///////////////////////////방향키 위 아래 이벤트 

 //자동완성 키 ↑↓ 이벤트
$("#Input_Start").keydown(function (e) {
    //방향키 ↑
    if (e.keyCode == '38') {
        if (_vSelectATag_Strat == 0) {
            //리스트의 첫번째를 선택 했을 경우            
            _vSelectATag_Strat = 0;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");
        } else {
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").removeClass();
            _vSelectATag_Strat--;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");

            /* 리스트 selected 설정 */
            var winH = $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").outerHeight();
            _vHeight_Start -= winH;

            //Focus 이동
            if (235 > _vHeight_Start) {
                $('#Search_StartData').animate({ scrollTop: _vHeight_Start }, 0);
            }
        }
        //기본 이벤트 막기 (방향키 ↑ 눌렀을 때 커서 이동 막기)
        e.preventDefault();
    }
    //방향키 ↓
    else if (e.keyCode == '40') {

        if (_vSelectATag_Strat == $("#Search_StartData a").length - 1) {
            //리스트의 마지막을 선택 하는 경우
            _vSelectATag_Strat == $("#Search_StartData a").length - 1;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");
        } else {
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").removeClass();
            _vSelectATag_Strat++;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");

            /* 리스트 selected 설정 */
            var winH = $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").outerHeight();
            _vHeight_Start += winH;
            var vDivH = $("#Search_StartData").outerHeight();
            console.log(vDivH);

            $('#Search_StartData').animate({ scrollTop: _vHeight_Start - vDivH }, 0);
        }
    }
    //Enter Key
    else if (e.keyCode == '13') {
        var vSelectValue = $(".A_Select").text();

        $("#Input_Start").val(vSelectValue);

        $("#Search_StartData").empty();
    }
    //키보드 값 확인.
    console.log(_vSelectATag_Strat);
});

////////////////////Search 리스트 체크 로직
/* Search 리스트 체크하는 로직 */

function fnfilterFunction(input,div) {
var input, filter, ul, li, a, i;
input = document.getElementById(input);
filter = input.value.toUpperCase();
div = document.getElementById(div);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if(filter == ""){
for(i = 0; i < a.length; i++){
a[i].style.display ="none";
}
}
}

/* 자동완성 hide 시켜주는 함수 */
function fnShowHideList (input,div,ShowType){
var vInput , vFilter , vAtag , vShowType;
vInput = $("#"+input).val();
vFilter = vInput.toUpperCase();

vAtag = $("#"+div+" a");    

for(var i=0; i<vAtag.length; i++){
    vAtag[i].style.display = ShowType;
}

}

//▼버튼 클릭 시 리스트 show / hide
/*function fnControlList(id){
vInput = $("#"+id).css("display");
vCheck = ""

if(vInput == "block"){
$("#"+id).hide();
vCheck = "none";
}else{
$("#"+id).show();
vCheck = "block";
}

if(id == "Search_StartData"){
fnShowHideList("Input_Start","Search_StartData",vCheck);
}else if(id == "Search_EndData"){
fnShowHideList("Input_End","Search_EndData",vCheck);
}
}*/

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

처음에 생성된 fullcalendar는 삭제하고, 재 생성 해주는 것으로 다시 그려줄 수 있습니다.

//기존 FullCalendar 삭제
$('#calendar').fullCalendar('destroy'); //달력 삭제

//FullCalendar 달력 재 생성
$('#calendar').fullCalendar({  // 달력 재 생성
    height: 700,
    header: {
      //center: 'prev,title,next', 여기에 select 값을 보내서 달력 이동 할 수 있게.
      left: null,
      center: 'title',
      right: null
    },
    defaultDate: "YYYYMMDD", //20200101 숫자가 들어가야됩니다. 
    editable: true,
    eventLimit: true,
    monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
    dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
    buttonText: {
      today: "오늘",
      month: "월별",
      week: "주별",
      day: "일별"
	}
});

[2021.05.07][2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

먼저 FullCanlendar는 처음에 생성 될 때 옵션 값들을 넣어서 설정하는 것으로 달력을 html 해서 그려줍니다.

저는 Cell 클릭시 새로운 영역을 보여주기를 원했고, 설정에서는 어떻게 사용해야 되는지를 알 수 없어서 API를 뜯었습니다.

DayTableMixin.prototype.renderBgCellHtml로 api를 검색하여 Cell이 그려질 때 마다 Onclick 이벤트의 함수를 넣어서 사용 할 수 있게 하였습니다.

DayTableMixin.prototype.renderBgCellHtml = function (date, otherAttrs) {
        var t = this;
        var view = t.view;
        var isDateValid = t.dateProfile.activeUnzonedRange.containsDate(date); 
        var classes = t.getDayClasses(date);
        classes.unshift('fc-day', view.calendar.theme.getClass('widgetContent'));
        
        //※ td에 Onclick 이벤트를 주었습니다.
        return '<td class="' + classes.join(' ') + '" onclic="Test()"  ' + 
            (isDateValid ?
                ' data-date="' + date.format('YYYY-MM-DD') + '"' : 
                '') +
            (otherAttrs ?
                ' ' + otherAttrs :
                '') +
            '>' +         
			'</td>';
    };

td의 onclick 이벤트를 주어서 클릭 할 때마다 원하는 함수를 사용 할 수 있게 만들었습니다.

name이나 class로 데이터를 넣는다면 아래와 같이 이벤트를 할 수 있을 것 같습니다. (이것은 해보지는 않았습니다.)

※새롭게 생성되는 html일 경우 아래와 같이 사용 하여야 이벤트를 잡을 수 있습니다.

$(document).on("click","생성된 클래스 or 네임",function () {
	//소스 코딩
});

질문이 있으시면 댓글로 남겨주세요~

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

현재 날짜 이전의 년도 및 월을 검색 하고 싶지 않을때는 아래와 같이 써주면 됩니다.

//YYYYMM
if($('#calendar').fullCalendar('getDate').format('YYYYMM') == YYYY + MM){
	$(".fc-prev-button").prop('disabled', true); 
}

주의할 점

※calendar를 생성 시켜준 다음에 적용 하셔야 됩니다.

[2021.05.07]

jquery autocomplete를 가져와서 사용 하였습니다.

샘플 소스는 아래의 링크를 통해서 보실 수 있습니다.

jqueryui.com/autocomplete/

※필수적으로 필요한 CSS와 Js가 있습니다.

Jquery 기반으로 되어있기 떄문에 Jquery가 필요하고 아래 CSS와 js를 필수적으로 넣어야 됩니다.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

가능하면 소스파일을 따로 다운 받아서 사용하시기를 추천 드립니다. 

아래는 샘플입니다. 

var vJsonData = [
		{ label: "Test", value: "Test" }, { label: "Test1", value: "Test1" },{ label: "Test2", value: "Test2" },{ label: "Test3", value: "Test3" }
	];
$("#ID").autocomplete({ //input ID를 넣어주세요.
	source: vJsonData,
	open: function (event, ui) {
		$(this).autocomplete("widget").css({
			"width": 100 //width 조절
		});
	},
	minLength: 0,
	autoFocus: true,
	focus: function (event, ui) {
		return false; //클릭 시 이상한 것이 클릭 되면 추가해주세요. 
	},
	select: function (event, ui) { //autocomplete에서 선택 시
		//ui.item.label vJsonData의 label 데이터
		//ui.item.value vJsonData의 value 데이터
		return false;
	}
}).bind('focus', function () { //포커스가 되었을 때. 자동완성 데이터 전부 보여주고 싶을 때 이 부분을 넣어주세요. 		
	if (!$(this).val().trim())
		$(this).keydown();
});

[2021.05.07]

Input 박스에 X 표시를 넣는 방법 입니다.

X 표시를 넣었다고 해서 데이터가 삭제되거나 그러지는 않습니다.

HTML

<input id="TEST_ID" class="input_FontSize form-control form-control-sm " autocomplete="off" type="text" />
<span class="searchclear" style="display:none">X</span>

CSS

.TEST_ID[type=text]:-ms-clear{display: none;}
.searchclear {position: absolute;right: 6px;top: 7px;bottom: 15px;width: 10px;height: 14px;margin: auto;font-size: 15px;cursor: pointer;color: #ccc;background-color: #fff;}

JavaScript (Jquery)

$(document).on("keyup",".searchclear",function () {
	$(".searchclear").toggle(Boolean($(this).val())); //영역 
});